LoginSignup
1
0

More than 3 years have passed since last update.

Angularの開発環境を作る

Last updated at Posted at 2019-08-22

こんにちは。
社内のデザイナーの人と話していて、jsを勉強している話を聞き、
じゃあついでにAngularとかどうよ?って軽率に勧めてみました。
責任は全くもって取れませんが、せめて0→1にする何かは必要な気がして、開発環境の構築メモです。

※対象読者はMac使っている方です。

今回書いてある内容

  • パッケージマネージャーの導入
  • Node.jsのインストール
  • Angular CLIのインストール
  • 初期アプリを作成する

パッケージマネージャーの導入

Homebrewを使いましょう。
以下のコマンドをターミナルに張り付けて実行します。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールの確認でバージョンチェックを行います。

$ brew -v

上記コマンドを実行して、バージョンが出力されたら次のステップに行きましょう。

Node.jsの導入

Homebrewを導入したのでそれを使ってNode.jsをインストールしましょう。
以下のコマンドを入力して同じようにバージョンチェックまで行います。

$ brew install nodejs
$ node -v

バージョンまで出力出来たらまた次のステップに行きます

Angular CLIのインストール

Angular CLIをnpmコマンドを使ってインストールします。

$ npm install -g @angular/cli

初期アプリを作成する

さて、開発準備が整ったので、アプリ開発を始めましょう。

$ ng new test-app

CSS何使う?的な選択とかいくつか出てきますが、好みで選んでいきましょう。
作成が終わったらテストサーバーを立ち上げてみましょう

$ cd test-app
$ ng serve

ローカルサーバーを立ち上げたら、localhost:4200にアクセスして画面が表示されるか確認しましょう。
サーバーを落としたいときはCtrl+Cで落とします。

まとめ

個人的なメモ的な意味もありますが、こういうのはたまにしかやらないので忘れますね。

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0