はじめに
非エンジニアがWebアプリケーションを開発する上でたどる、学習の道筋をこのブログに残しております
本日はAngularを学習する際の開発環境を整える方法をご紹介します
Angularを学習するのにそもそも、前提知識が足りているか不安な方は過去の記事を確認されることをお勧めします
businessman-learn-coding.hatenablog.com
AWS Cloud9
プログラミングをする際には、Angularを動作させる整備をしなければらなず、普通は自分のPCにいくつかツールをインストールしたり、そもそも性能の低いPCだと買い替えなければならなかったりする。
入門者にとってはこの整備が難解だったり、成功しないとやたらと時間がかかったりするので、できれば避けたいことである
また、非エンジニアの方はプログラミングの学習は個人所有のPC、仕事は会社支給のPCと、時によって使うPCが変わったりすると、仕事の空き時間があったとしても仕事用PCしか持っておらずプログラミングの学習が進められなかったりし、効率的ではない
そういう方に推奨なのが、AWS Cloud9だ。クラウドの開発環境でブラウザから利用でき、すでにほとんどの言語がインストールされており、すぐに使い始められることや、PCのスペックに影響しないこと、複数の端末からアクセスできるメリットがある
上級者の方でなければこれでほとんど問題ない。もし、処理が遅いと思った場合はあとから増強できるので心配ない。
ただし、利用時間と環境のスペックに応じて課金されることがあるので注意してほしい。
参考に私の場合だと月300円ほどで済んでいるのであまり気にしないでもいいだろう。使わなければ課金されないのでそこまで神経質になる必要もない
AWS Cloud9の始め方
まずは、AWSにログインする。AWSへの登録・ログインについて知りたい人は以下のリンクを参照し欲しい
AWS コンソールにログイン後、検索ボックスにCloud9とタイプすると、AWS Cloud9のサービスが表示されるので、選択する
ページが切り替わった後、Create Your Enviromentボタンを押し、開発環境を作成する
自分が設定したい環境の名称をつける。必要に応じてこの環境の説明を入れる。AWS Cloud9はいくつかの環境を分けて作成できるので、もし別用途で全く違ったツールを使いたい時などは別の環境を用意することをお勧めする
名前を入力したら、Next Stepを押す
設定画面がでてくるが基本的にはすべてデフォルトでよい。内容だけ簡単に紹介すると
Environment Type : 利用環境。すでに稼働しているサーバーかEC2を選択できる。EC2はAWS内のクラウドコンピューティングサービスで、特にサーバーなどもってない方はこちらをそのまま選ぶと、勝手にサーバーを作成してくれる
- Instance Type: EC2を設定した際に出てくるもの。クラウドコンピューティングサービスの性能を決める。後から変更できるので、一番性能が低いものに設定すればよい。性能が低ければ安いので、今後必要に応じて性能をあげることを検討する
- Platform : OSの選択。AmazonがカスタムしているLinuxかUbuntsuが選べる。入門者にとってはどちらも変わらないので、Amazon Linuxをそのまま選択すればよい
- IAM Role : AWSの権限設定。Cloud9を操作する権限が自動で作成されます。こちらもデフォルトで構わない
Next Stepを押して次へ進む
Reviewの画面になったら、Create Environmentを押し、実際の開発環境を作成する
すると、AWS Cloud9のIDE（開発環境）に自動的に切り替わる。最初は2,3分待つ。
IDEは大きく5つで構成されており、一般的なIDEと同様な機能が提供されている
- メニューパネル : Cloud9内でできるファイル操作／検索／アプリケーションの実行コマンドが入っている
- ディレクトリパネル : 作成した開発環境のディレクトリ（フォルダ／ファイル）が表示されている
- エディタタブ : コードを記述するエディタの部分。ディレクトリのファイルをダブルクリックするとタブが追加される
- コンソール : コマンドの実行ができる。言語やライブラリのインストール／Angularのコンパイル（編集したコードを実行可能な形式にする処理）を実行する
- ツールパネル : Cloud9の表示設定や他AWSサービスへの連携設定ができる
※ 正式な名称はわからないので、勝手に呼称している
最初は2,3をほとんど利用するので細かく機能を知る必要はない
AWS Cloud9でAngularを利用できるようにする
残りはAngularを設定するだけだ。Cloud9ではほとんど言語、パッケージがインストールされているが、私が利用した際はAngularは標準でインストールされていなかった
Angularを導入するためには、node.js／npmをインストールする必要があるので、これらが初期インストールされているか確認する
node -v
npm -v
どちらもインストール済なのでAngularのみをインストールすればよい。npmはnodeの統合パッケージ管理ソフトでこれを利用するとAngularをインストールできる
通常）Npm install -g @angular/cli
バージョン指定) Npm install -g @angular/cli@8.1.3
その他 v8の最新版) Npm install -g @angular/cli@v8-lts
途中で、Angularの利用状況をgoogleに連携するかしないかを問われますが、私はどちらでもよいのでYesにしています
実際にAngularが利用できるか一つプロジェクト作成してみる
Ng new (アプリ名）
するとAngularのアプリの骨格が作成され、ディレクトリが作成される
作成したディレクトリに移動し、アプリを起動してみる
Cd (アプリ名)
ng serve --host 0.0.0.0 --port 8080 --disableHostCheck
Compiled Successfullyがでたらコンパイルが完了しているので、Webページを確認してみる
メニューバーのPreview⇒Preview Running Applicationを選択する
Webページが立ち上がり、Angularの初期テンプレートアプリが表示される
これにて完了。
次回の記事
本日はAngularの開発環境を整えた。次回はAngularを学習していく。
