おもろいことしかやらない

🗣: バイクに乗ったり、ものづくりしたり、ひたすら寝たり。

Angular初心者がルールを学びながらxlsx出力する

得意でない・興味のないものを触ると集中力が半減する私です。

そのようなテンションの中で、Angularを触れる機会があったので備忘録的に書いておきます。 かなりスカスカな内容なので繰り返し修正を入れていきたい。

構造

WebAPI(Rails) <--> Client(Angular2)

どこかのプロジェクトのAngularのプロジェクトの構造

hoge
 ∟hogeモデルのデータを行で表現している
 serviceから受信したデータの整形・Viewに干渉して変更を加える
hoges
 ∟hogeモデルのデータを集合で表現している、基本的な役割は上と同じ
models/hoge
 ∟hogeモデルのゲッタやセッタがある感じ
services/hoge
 ∟Web-APIと通信する層

悩みどころ

型を明示的に書かないjsしか経験がなかったので、フロントのノリで触るとしたらなかなかに馴染みにくい。

やりたい事はあるけれど、Angularにどのように適応させたら良いかが掘りづらい。(Angular(初代)の内容もよく引っかかるから) →Angular - Angular2などのマイナス検索が有効

正直公式ドキュメントだけでは実装への応用が難しいと感じる、手を動かしてから細部を理解する派なので。 何やってるかわかんないからコードを追うけど、よく迷ったりする。

基本テンプレ

html

  • *ngIf -> 条件分岐。
  • {{}}/{{| date:'yyyy/MM/dd'}} ->ディレクティブ。名の通りダイレクトに関数を呼び出せる。返り値がそのまま反映されるので、パイプでフォーマットの形式を指定できるらしい。nullにするとParser Errorを吐いてブチギレる。
  • (change) -> changeイベント。対象のhtmlを管轄しているモデルのメンバ・関数が呼び出せる。こいつらの値に変化があればイベントが発火する。
  • [(ngModel)] -> モデルのメンバを呼び出す。exportしているクラスの中にいるやつ。この値に干渉します。イベント発火マンと併用するといろんなことができるよ。
  • [hoge] -> モデルで定義したメンバを呼び出します。
  • #downloadLink -> href属性で飛ばしたい先として指定することができる。公式の引用先を見たことがないのでこの説明にはとても不安がある。

ts

  • @Input -> モデルとhtmlをバインドするところ。これにバインドされたコンポーネントからはimportした範囲のモデルロジックを呼び出すことができる。
  • @Output -> イベントを外へ伝搬させたいときに使う。メンバとhtmlをバインドさせて、関数でこのメンバに対して変更があった時に変化をもたせたいときに使える。 クラスのインスタンスを作って、同期もしくは非同期に描画するイベントを作ることができる。インスタンスに影響があったらViewにも反映できるってところが違いかな。 ex; @Output() modelChanged = new EventEmitter();ってのがあったら (modelChanged)ってhtmlにバインドできる

実装

やりたい事:チェックボックスにチェックした行データについて、xlsx形式でファイルをエクスポートする

苦労もしくはめんどかったポイントだけ

某UIフレームワークはlabel + inputの順で解釈しないとCSSを当てない点 ツールチップを作るのにそのUIフレームワークの名のprefixが必要(なんで???)

慣れないうちは純粋なjsで書いた方がいいのか、Angularで解決できる話なのか切り分けが難しかった -> 多分だいたいAngularさんはできる、うちはunderscore.jsが入っていたのでその辺を利用してデータを整形したりするなど。でもfunctionって長い…よね…

xlsxのMIMEタイプがよくわからないので受け渡しの仕方がモヤっとしている -> ポストする時responseType: ResponseContentType.Blobを利用する(多分あとで丁寧に書く)