Install Node & the Angular CLI

講師：では､ この講座ではいくつかのツールが必要ですが､ 順を追ってインストールと追加を行っていきます｡ 例えば､ MongoDBはもう少し後に追加される予定です｡ 絶対に必要なのは､ Node. js. 1つは､ Node.NETを書き､ 実行するからです｡ jsのコード､ 私たちのサーバーサイドのロジックだけでなく､ 私たちが独自のnodeアプリを作らないとしても､ Angularでさえも必要だからです｡ AngularがNodeを使用しているからではありません｡ jsの言語機能ではなく､ Angularはより複雑なビルドワークフローを持つフレームワークであるためです｡ 開発者として書いたソースコードを､ ブラウザで問題なく動作するコードに変換する部分は､ Angularではもう少し複雑です｡ Angularでは､ あるユーザーのタイプのスクリプトは､ JavaScriptにスーパーセットされているからです｡ つまり､ JavaScriptを多用した別の言語であり､ ブラウザ上で動作しないことが重要なのです｡ そして､ それを実行させるためには､ コンパイルする必要があるのですが､ それは私たちのために行われます｡ ご心配なく｡ しかし､ 最終的にコンパイルを行うそのタスクランナーがNodeなのです｡ jsなどです｡ つまり､ これは開発プロセス全体を通じて実行されるのです｡ そのためにコードを書く必要はありませんが､ これは裏で起こっていることなのです｡ また､ TypeScript JavaScriptのコンパイルだけでなく､ Angularのコード自体をバンドルし､ 最適化する必要がありますし､ 使わないコードを削ってminifyすることでコードサイズを小さくする必要があります｡ そして､ これらはすべてNodeが処理するタスクです｡ アプリケーションの開発中､ または基本的に仕上げの時に､ 私たちのマシン上で.jsを実行します｡ そして､ Node. jsもそれに使われることになる｡ つまり､ この2つの理由から､ Node.NETのために必要なのです｡ バックエンドのために書いた js コードと､ Angular のビルドワークフローのために書いた js コードです｡ そして､ AngularとAngularのワークフローとその仕組みについてもっと知りたい方は､ ぜひAngularに特化したコースをチェックしてみてください｡ なぜなら､ このコースでは一般的なAngularの基本をいくつか取り上げますが､ Angularに関する非常に基本的なことを知っていることを期待しているからです｡ Angularを触ったことがない人には向かないコースです｡ それでは､ Nodeをダウンロードしてください｡ jsをNodeから取得します｡ js. orgにアクセスし､ そこで､ 最新のバージョン10を選んでください｡ 1私の場合､ もしそれで問題に直面している場合は､ 古いバージョンにフォールバックしてください｡ しかし､ 一般的には10を使うことが推奨されています｡ 1など､ これをご覧になっている時点で最新のバージョンであることをご確認ください｡ それをクリックするだけで､ インストーラーがダウンロードされ､ その中を歩いていくことができます｡ Mac OS､ Windows､ そしてすべてのLinuxに対応しており､ そこで自動的に正しいダウンロードが行われるはずです｡ そして､ インストーラでインストールに成功したら､ Angularアプリケーションのセットアップを考えることができます｡ そのためには､ 別のツールを使います｡ それがAngular CLIです｡ CLIはコマンドラインインターフェイスの略で､ Angularアプリを作成するための欠陥方法です｡ ビルドのワークフローが複雑なため､ コードをコンパイルして最適化するツールがたくさん必要ですが､ そのすべてを自前で設定するのはかなり面倒で､ エラーが起こりがちです｡ CLIを使えば､ プロジェクトのセットアップがすべて行われ､ Angularのコードを書くことに集中することができます｡ 私たちのロジックです｡ CLIはこのようにインストールされ､ NPM（ノードパッケージマネージャ）を使用して､ この最初のコマンドでCLIツールを私たちのマシンにグローバルにインストールします｡ NPM（ノードパッケージマネージャ）は､ Nodeと一緒にインストールされます｡ jsを自動生成します｡ そのため､ Node.NETをインストールした場合は､ Node.NETがインストールされていないことになります｡ jsの場合は､ NPMがあります｡ さて､ それでは次にCLIをインストールしてみましょう｡ Nodeはもう手に入れました｡ jsがインストールされているので､ このステップに早送りすればいいのです｡ CLIをインストールするには､ お使いのマシンでターミナルまたはコマンドプロンプトを開き､ NPM（Node Package Managerコマンド､ Nodeで利用可能）を実行します｡ js. Install-gはglobalを意味します｡ これは､ Angular CLIをマシン全体にインストールし､ マシンのどこからでも使えるようにしたいからです｡ そして､ そのCLIパッケージの名前が@angular-cliです｡ そして､ これを誤入力しないようにすること､ ネーミングが重要です｡ 最新版を絶対に取得するために@latestを追加することができますが､ デフォルトでそのバージョンを与えるべきです｡ さて､ Windowsの場合､ このコマンドはこんな感じで大丈夫なはずです｡ MacやLinuxでは､ このコマンドを実行するための適切なパーミッションを得るために､ この前にsudoを付ける必要があるかもしれません｡ その後Enterキーを押し､ パスワードの入力を求められたら入力してください｡ そしてその後､ NPMsリポジトリからそのCLIパッケージをダウンロードし､ あなたのマシンにインストールします｡ これは数秒から数分かかることもあります｡ 私の場合､ インストール中にエラーが発生しましたが､ パッケージ名とバージョン､ updatedやadded eightなどの出力があれば問題ありません｡ だから､ そういうのが出てきたら成功したんです｡ その間に発生したエラーは無視しても大丈夫です｡ このインストールが完了したら､ CLIで新しいAngularプロジェクトを作成し､ コース全体を通してそのプロジェクトのセットアップにNodeとMongoとexpressを追加します｡ しかし､ まずはフロントエンドから始めましょう｡ フロントエンドは､ 画面上で何かを素早く確認できる方法だからです｡ 新しいプロジェクトを作成するために､ プロジェクトを作成するフォルダに移動してください｡ そのフォルダに入ったら､ あなたのマシンのCDコマンドでそこに行くことができます｡ ng newで新しいプロジェクトを作成します｡ これはCLIパッケージによって利用できるようになったコマンドで､ ngは基本的にそれによって利用できるようになったコマンドです｡ それから､ プロジェクトの名前ですが､ 私はミーンコースと名付けますが､ もちろん好きな名前を選んでください｡ ただ､ 数字で始まっていないこと､ testという名前がついていないことを確認してください､ それは禁じ手です｡ でも､ それ以外なら何でもいいんです｡ Mean-courseが動作し､ Enterキーを押すと､ そのプロジェクトがセットアップされるはずです｡ その中に大量のファイルが作成されます｡ そのほとんどは､ そのワークフローのための設定ファイルです｡ 心配する必要はないのです｡ また､ ちょっとしたダミーアプリも用意されているので､ それを使って始めることもできます｡ また､ Angularフレームワークや､ フレームワークが依存するその他の依存関係もすべてインストールされます｡ しかし､ ビルドまたはワークフローの依存関係もいくつかあります｡ TypeScriptのコードをコンパイルするための依存関係､ コードを最適化するための依存関係､ そういったものがあるわけです｡ だから､ しばらく時間がかかるので､ 完成したらまた戻ってきます｡ それが完了したら､ その新しく作成されたフォルダにcdで移動し､ そのフォルダの名前を入力することができます｡ そして､ その中でng serveを実行して､ 開発専用のサーバーを立ち上げるだけです｡ そして､ これはデプロイするために使うサーバーではありません｡ コースの最後に､ そのアプリをデプロイする方法をお見せします｡ アプリケーションのプレビューが可能な開発専用サーバーです｡ NXのHTMLファイルをダブルクリックしても､ Httpプロトコルではなく､ ファイルプロトコルを使用するため､ 必要な多くの機能が有効にならないからです｡ そして､ このアドレスのマシン上で実際のウェブサーバーが動作するようになります｡ ここに､ デフォルトでHttp://localhost:4200と表示されていますが､ ブラウザでローカルホスト4200にアクセスするだけでいいのです｡ そして､ そのURLには､ CLIがデフォルトで提供するこのようないくつかのダミーのスタートページが表示されるはずです｡ さて､ これでセットアップが完了したら､ もちろんコードを書きたいわけですが､ そのためにはIDEや高度なテキストエディターが必要です｡ Sublime､ Atom､ WebStormなど､ 好きなIDEを使えるようになりました｡ この講座では､ Visual Studio Codeを使用します｡ では､ 次の講義で､ セットアップして､ プロジェクトを開いてみましょう｡