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

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

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

※ご回答希望の場合は、ご連絡先も記入ください
"意見が持てる" デジタルコラム
絶賛配信中!

メルマガ詳細はこちら >>>

送信時点で「Privacy Policy」に同意したものとみなします。
広告を含むご案内のメールをお送りする場合があります。
   
         
最後までお読みいただき、ありがとうございました。
以下も、ぜひご活用ください^^
出版物
ITmedia
メルマガ
Site Access Log by HTTP Header

    >情報システムの

    情報システムの"教科書"本を発売中!


    ■ 情シス、システムコンサルタント、システムエンジニアの方へ
    情シスの定石(技術評論社)

    ■ システムエンジニア、情シスの方へ
    システム設計の教科書(技術評論社)

    CTR IMG

    株式会社グロリア ご紹介