フロントエンドの開発を行う際に、シングルページアプリケーションが作りやすいと言われている「Angular」環境を構築してみました。
備忘録をかねたメモです。
「Angular」はGoogleが中心となって開発されているフレームワークであり、日本語のドキュメンテーションも充実しております。
そのため、かなり安心して手を出せるフレームワークかと思います。
モダンなアプリを構築するためのウェブ開発フレームワーク…
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、UX体験が向上するSPA。…
構築環境
MacBookPro 15インチ(2018)
macOS Catalina (10.15.3)
インストール
必要なものは、コーディングするためのエディタと、Angular一式(Node.js、TypeScript、AngularCLI)です。
Visual Studio Code
極論、テキストエディタであればなんでもよいですが、Visual Studio Codeがオススメです。
※なお、以下の構築・稼働確認手順の中で使うことはありません。
ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code…
Node.js
公式サイトからインストーラをダウンロードしましょう。
特別な理由がない限り、安定版である「推奨版」でOKです。
自身が構築したタイミングでは「12.16.1」でした。
Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc…
TypeScript
ターミナル.app で作業します。
自身が構築したタイミングではバージョンは「3.8.3」でした。
sudo npm install -g typescript
Angular CLI
ターミナル.app で作業します。
自身が構築したタイミングでは「9.0.6」でした。
sudo npm install -g @angular/cli
動作確認
プロジェクトを作る
Mac内の適当な場所に、今回作るプロジェクト用のフォルダを作成します。
# Mac内の適当な場所に、今回作るプロジェクト用のフォルダを作成します。 # そして、作成したフォルダに移動します。 cd /Users/xxxxxx/angular/test # Angularのプロジェクトを作成します。 # 下記例だと「testproject」がプロジェクト名です。 # 実行することで、基本となるファイル等が生成されます。 ng new testproject
ビルドして、テスト用サーバで稼働確認
Angularの成果物を動作させるには、ビルド(コンパイル)して実行できる形を作成する必要があります。
サーバ上でないと動作しませんので、テスト用としてMacでサーバを稼働させます。
# ビルドしたいプロジェクトの場所に移動 cd /Users/xxxxxx/angular/test/testproject # ビルドして、テスト用サーバを起動(Macでサーバを起動)します ng serve --open # ブラウザで localhost:4200 が表示され、「〜 running!」というメッセージが画面に出ていたら成功です! # ターミナルで「ctrl + c」で止めることができます。
余談
1時間もかからずに開発環境(端末)が準備できました。
最近の環境構築のしやすさは半端ないですね・・・
どのようなフレームワークを用いるかを色々と検討しているところとなりますが、
かねてより構想していたWebサービスの構築を開始します!!
よりよいものを作るべく、α版、β版ができたタイミングで
使い勝手などをご利用いただける方を募集するかも・・・です。
楽しみながら、がんばります!!
絶賛配信中!
メルマガ詳細はこちら >>>
広告を含むご案内のメールをお送りする場合があります。
以下も、ぜひご活用ください^^