angular
Angular2

初心者向けAngularスタイルガイド

More than 1 year has passed since last update.

初心者向けAngularスタイルガイド

この記事はAngularはじめてみたけど、ディレクトリや機能の切り替かたとかわからんーって方向けです。公式のスタイルガイドやチュートリアルに準拠しているため、主観を極力省いています。

Angularこれからって方はAngular速習参照

開発のポイント

Angular CLiを使う

Bad

npm ~ を自作するのはやめる。メンテナンスが大変。秘伝のタレ化する。

Good

angular-cliベースでソース生成、実行、ビルドを行う。清く正しいコードが自動生成される。

Module駆動

Angular Styleguide でも引用されているソースをモデルに説明しています。

Notice

  • pagesなどのディレクトリにページ単位でコンポーネントをぶち込む
  • services, pipes, などに機能を無秩序にまとめる

状況によっては良いのでは?と思う節もあるのでBadではなくNoticeにしました。

Good

  • Members, Admin など機能単位のモジュールを作成し、そこに表示や機能を紐付ける
  • shared.module を作り、いわゆるユーティリティ的機能をまとめ、各モジュールから参照する
  • core.module を作り 、Guard などコアで再利用性の無い機能をまとめ、app.module.ts から参照させる(app.module.ts の肥大化を防ぐ)

Snippetを入れる

Good

StyleGuide でも推奨されている Snippet を入れる。これにより正しい構文でスピーディにコーディングが可能。たまに「こんな機能あったのか!」という発見もある。

Lintやる

Bad

anyどころか型定義もせず、Lintもかけないのはよくない。

Good

ng lint

で lint の習慣を。 VSC TSLint 入れとくのもよし。その他下記参照

  • git commit hook で自動Lint
  • Travis CI とかで Pull Request連動Lint

AOTコンパルをやる

ng build --aot

通常のビルドは結果は、実行時にコンパイルするが、 --aot コンパイルはあらかじめコンパイルした状態のものを生成する。その過程で静的チェックがなされるだけでなく、クライアントにも負担を強いないのでAOTコンパイルしてからリリースする。

最後に

僕自身学習中の身なので突っ込みがあればお願いします。