はじめに
Angular 4/5を数か月使ってみて、
知識0のときに、これを知っていれば!という私的Tips 7つをまとめました。
1. Angularの公式サイトは日本語版がある
Angular未経験者が初めに読むのが公式サイトのチュートリアルかと思います。
https://angular.io
非常にわかりやすいです。*Angularすげー!*ってなります。英語でなければ。
日本語のAngular記事では、上記が紹介されることが多いですが
公式サイトには、なんと日本語版があります。
angular.ioのURLを見つけたら、.ioを.jpに変換すると、幸せになれました。
2. npmの代わりにyarnを使う
- yarnは、--saveし忘れがない
- yarnはadd(install)がやたら速い
- yarnのほうがトラブルが少ない
npmを使用していたころ、Angular CLIのアップデートで依存関係エラーが頻発しました。
よくわからない初心者の私は、yarnを使ったほうが幸せになれました。
3. とりあえずAngular Materialをいれておく
「見てくれ」がよくなるとレビュアーの顔色が変わります。
Angular Materialである必然性はないですが、公式サイトわかりやすいしね!
https://material.angular.io/
4. IEに対応しておく
AngularはデフォルトでInternet Exploreに対応していません。
いまさらIEなんて使ってるの?...いました。別組織にたくさん。
レガシーな人々のフォローは面倒なので、こちらで対応します。
IE対応
polyfiles.ts内の、IE対応コメントの指示に従います。
コメントに記載されているpackageもインストールします。
IE互換モード回避
ローカルNWにサーバを置くと、IEが 「社内だね!互換モードにするよ!表示できないよ!」
となる場合があります。
index.htmlの<head>に、忘れずに下記を記載しておきます。
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
※下記、参考にさせていただきました。
https://qiita.com/rico/items/09c896290e218ed2b7c3
5. 検索するときには「-angularjs」をつける
「検索ワード」+「angular」でWeb検索すると、
AngularJSの記事が大量にでます。Angularの記事はほぼないです。
そこで、魔法のワード、「-angularjs」です。
[検索ワード] angular -angularjs
なんと、AngularJSの記事が除外されるではありませんか!
※下記記事にて勉強させていただきました。感謝です。
https://qiita.com/daikiojm/items/46f6b2b355f9f73536e1
6. Angular CLIでプロジェクトひな形を作成する
初期は公式チュートリアルのプロジェクトを改造して開発していましたが、
不要な機能を削除するのが存外大変でした。
下記コマンドで1から作り直しました。
# プロジェクト作成
ng new <プロジェクト名>
# コンポーネント|サービス作成
ng g <component|service> <コンポーネント/サービス名>
# コンポーネント作成(モジュール指定)
# モジュールたくさんあって、どこに作ればいいかわからないよ!と怒られた場合
ng g component <コンポーネント名> --module <モジュール名>
結果、サンプルプロジェクトを改変するより1から作成したほうが、
経験値が上がりました。
7. (番外編)DBはMongoDBを使う
Angularではありませんが、私の最大のミスは
バックエンドのDB選定でした。
初期に、Node.js + PostgreSQLを採用しました。
MongoDB?いやいや、PostgreSQLの方が慣れてるし~。あれ?××実装のNode.js + PostgreSQLの記事が見つからない!
Node.js + MongoDBの記事は山ほどあるのに!
結果、PostgreSQLのコードをすべて捨てるという事態に。
開発速度、Web情報量ともにMongoDBが圧倒しています。
リレーショナルDBである必要がなければ、まずはMongoDBをお勧めします。
おわりに
少しでも皆様の参考になっていただければ。では、すてきなAngularライフを!