Node.js
初心者
angular

Angular未経験者だった自分に教えたいこと

はじめに

Angular 4/5を数か月使ってみて、
知識0のときに、これを知っていれば!という私的Tips 7つをまとめました。

1. Angularの公式サイトは日本語版がある

Angular未経験者が初めに読むのが公式サイトのチュートリアルかと思います。
https://angular.io

非常にわかりやすいです。Angularすげー!ってなります。英語でなければ

日本語のAngular記事では、上記が紹介されることが多いですが
公式サイトには、なんと日本語版があります。

https://angular.jp

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>に、忘れずに下記を記載しておきます。

index.html
<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ライフを!