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

フロントエンドの開発を行う際に、シングルページアプリケーションが作りやすいと言われている「Angular」環境を構築してみました。

備忘録をかねたメモです。

「Angular」はGoogleが中心となって開発されているフレームワークであり、日本語のドキュメンテーションも充実しております。
そのため、かなり安心して手を出せるフレームワークかと思います。

Angular 日本語版

…

Angular - Wikipedia

…

SPA(Single Page Application)ってなに？

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

構築環境

MacBookPro 15インチ(2018)

macOS Catalina (10.15.3)

インストール

必要なものは、コーディングするためのエディタと、Angular一式(Node.js、TypeScript、AngularCLI)です。

Visual Studio Code

極論、テキストエディタであればなんでもよいですが、Visual Studio Codeがオススメです。

※なお、以下の構築・稼働確認手順の中で使うことはありません。

Visual Studio Code – コード エディター | Microsoft Azure

ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code…

Node.js

公式サイトからインストーラをダウンロードしましょう。

特別な理由がない限り、安定版である「推奨版」でOKです。

自身が構築したタイミングでは「12.16.1」でした。

Node.js — Run JavaScript Everywhere

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

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

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