プログラミング解説 #2 開発環境を構築してみよう!

こんにちは、またまたえとーくんです。

今回は、前回お話した Angularの開発環境を構築していきたいと思います。

が、その前にちょっとだけ前回説明し忘れたところを解説して行きたいと思います。


前回 「Angularには2種類あるよ~」 みたいなお話をしましたが、正直全く別物と思ってもらって構わないです。

AngularJS(v1系) Angular(現在v6)全く別のフレームワークといっても過言ではありません。

まずAngularJSは前回お話したとおり JavaScript で動作しますが、AngularはTypeScript で書いてビルドをしないと動作しません。

根本的に仕組みがそもそも違うため、名前や開発元は同じでも

AngularJS はサイトの拡張補助Angularはサイト本体と考えたほうが分かりやすいかもしれません。


Angularの開発に必要な物の準備

少しタイトルとズレましたが、早速開発環境の構築を初めて行きたいと思います。

開発環境の構築は Windows、Linux、macOSでも殆ど同じです。

作業工程が変わらないのは、これから準備段階でインストールをする Node.js (ビルドするのに必要なプログラム)が、マルチプラットフォームに対応している恩恵です。

ただし、Node.js のインストールについては OS毎に異なったり、他の方のブログや Qiita などでも解説されているので端折ります。

今回必要なプログラム

  • Node.js ( 2018年5月現在 v8以降必須 )
  • npm ( 作業前にアップデートを忘れずに )

以上です。

( Windows の場合は Node.js のインストーラーに npm も同梱されています )

ここからは既に Node.js と npm がインストールされている前提でお話をします。

もしインストールされているかわからない場合は、 ターミナル、 コマンドプロンプト (以下、 ターミナル と省略) に node -v と npm -v を打ってみてください。

「コマンドが見つかりません」 等と言われた場合は正常にインストールできていません。

バージョンが表示された場合は正常にインストールされていますので、このまま次の作業に進みましょう。


Angular CLI をインストールする

Angular CLIとは、骨が折れる大変な構築作業を全部やってくれる物です。

以前は手動で構築するのが普通でしたが、最近はコードの書き方やデバッグ方法を統一できるため、公式でCLIを使った構築が推奨されています。

コマンドもシンプルで分かりやすく、初心者から上級者まで幅広く対応できるシステムになっています。

CLIは単体で動作するため、npmでグローバルインストールが必要になります。

ターミナルを開き、次のコマンドを打ち込みます。

npm install -g @angular/cli

インストールが完了したら、ngコマンド (今インストールしたコマンド) でWebサイトを構築していきます。

ng new コマンドで新しいサイトを構築しますが、サイトのデータは今いるディレクトリの直下に指定した名前のディレクトリが新規に作成されますので、cd コマンドや mkdir コマンドで開発用のディレクトリを作成してから利用することをおすすめします。

ng new {付けたいアプリ名} で構築できますが、今回は –routing と –style=scss をつけています。

ng new HelloWorld --routing --style=scss

–routing はAngularの特徴とも言える SPA ( Single-page Application ) を利用するためのコマンドで、複数ページがある際にヘッダーやフッター、サイドバー等の使い回しができるコンテンツを再読込しないで、メインコンテンツだけを読み込ませる事により、待機時間、通信帯域を大幅に改善できる技術です。

–style=scss は スタイルシートの定義に Scss を利用するという指定で、 デフォルトで Sass を採用しており、Sass は中括弧を利用しないため、今まで CSS を書いていた方には少し抵抗があるかもしれません。

Sass を普段から書いている方はこのオプションは外しても問題ないです。


以上で開発環境の構築は完了です。

次回は実際に生成された初期テンプレートを確認しながら、それぞれのファイルの役割を確認していきたいと思います。

それでは!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です