その1」からの転載です。続いています)SEROKUでは、フロントエンド開発およびバックエンド開発それぞれにおいてWebアプリケーションフレームワークを使用しています。フレームワークを使う意義は、ネットを探せばいくらでも見つかると思うのでそこに関しての説明は省きますが、今回はフロントエンド開発で使用しているAngularに関して、SEROKU開発において貯まったTipsを少しでも共有できればと思い記事化することにしました。気持ちで書きますので参考程度にしてもらえれば幸いです。ngIf/then/elseを使うまとめAngularとはいきなりTipsの話をする前に、一応Angularに関しての説明をサクッとしておきます。AngularはGoogleによって開発されているJavaScriptフレームワークで、2018年6月現在の最新のメジャーバージョンは6です。※Angularは「セマンティックバージョニング」というものと「タイムベースリリース」を採用しており、これによりどういった周期でどれくらいのアップデートが行われるかというのが、予測可能になっています。JavaScriptフレームワークと書きましたが、使用する言語はTypeScript*1です。TypeScriptは、JavaScriptのいわゆるスーパーセットで、クラスベースのオブジェクト指向で開発できるのが利点です。Angularはフルスタックフレームワークなので(PHPでいうところのCakePHPや、RubyでいうところのRubyOnRails)、学習コストは多少高めですが、独立したフレームワークを組み合わせて動作させることの苦労に比べればそこまでのハードルではないように思います。(これに関しては賛否両論あると思います)では次の項目からAngularのTipsを書いていこうと思います。:ロジックは極力コンポーネントクラスに寄せよう初心者が陥りがち?なものとして、htmlに何でもかんでもロジックを詰め込んでしまうのがよく見受けられます。あるモデルクラスの特定のフィールドを元に、さらに出し分けたいパターンがあるとします。string;}この場合に以下のように、templateの内部でロジックを駆使し、書いてしまう。・}まぁこれくらいの処理ならば特に気にせずに書けちゃうのであまりピンと来ないかもしれませんが、以下のように書いたほうがコード的には見やすくなります。}書く行数が増えてるのになんで!?と思われるかもしれませんが、ロジックがhtmlとコンポーネントに分散してしまうと保守性という観点から、見なければいけないファイルが増えるのはよろしくないのでそうした方が無難です。4以降で、(v4)リアクティブプログラミングをサポートするための変更が進み始め、それまでは実現できなかったことができるようになりました。使用できるようになりました。Angular4以前は、ある条件によって表示を切り替えたい場合は、いずれか2つのパターンで実装していたことが多かったと思います。・ngIfを羅列するパターンだと、そもそもほぼ同じ条件をチェックしているにもかかわらず、愚直に書いているのでコードが汚くなってしまうし、評価が2度走るためパフォーマンス的にもあまりうれしくはないです。ngSwitchを使った場合は、コードの視認性という観点ではngSwitchブロックであるということと、条件自体は出し分けしたいタグの親に当たるタグに書くので許容。本来のngSwitchはT/Fのためというよりかは複数の条件への対応の場合により力を発揮するものなので、この場合には少し役不足な感じが否めません。上記の例をngIf/elseで書いてみたいと思います。ことで、ここからは個人的にもう少しスッキリした書き方のパターンを紹介します。ngIf/then/elseを使うはい、突然出てきました。これはngIfの時のテンプレートを指定するときに使います。要するに、elseの時だけではなく、ifの時もtemplate使おうぜってことです。・うむ、個人的には満足です。ngIfを記述しているタグ、本家のサンプルやそれを見習って書いているtech系のブログではdivタグを使ってますが、実は何でも良いです(多分)。divタグ使ったところで、内部的にはそのタグ自体は意味を成さないので(出力されない)、あえてこういう書き方をしてみました。いかようにも書ける分、チーム開発するときは何かしらのコーディングルールを設けると、ひっちゃかめっちゃかにならずに済みますよね。SEROKUの開発時に利用したAngularに関するTipsを書きましたが、かゆいところに届くような内容にはならず、無難なものに落ちつてしまった感がありますが、少しでも参考になると幸いです^^;次回以降もこれにめげず書いていこうと思いので乞うご期待?*1:TypeScriptは、マイクロソフトによって開発、メンテナンスされているOSSのプログラミング言語です。*2:正しくコンポーネントを分割できていた場合です。weseek_incはてなブログをはじめよう!weseekさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。