【Angular】開発環境構築〜動作確認メモ(Mac)

フロントエンドの開発を行う際に、シングルページアプリケーションが作りやすいと言われている「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

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サービスの構築を開始します!!

よりよいものを作るべく、α版、β版ができたタイミングで
使い勝手などをご利用いただける方を募集するかも・・・です。

楽しみながら、がんばります!!

関連リンク

ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、UX体験が向上するSPA。…

ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用…

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc…

記事情報や役立ち情報を発信します!
>− あなたと共に、未来を創る −

− あなたと共に、未来を創る −

この理念の元、あなたに寄り添い、あなた以上に未来を見据え、その未来に向けてトータルでサポートいたします。
その場限りではない、末永いお付き合いを望んでおります。

あなたの頭脳になりたい。全ては、明るい未来のために。

CTR IMG
Click to Hide Advanced Floating Content
Click to Hide Advanced Floating Content