Windows 10 に Yeoman をインストールして、AngularJS 開発を始める環境を構築する手順

スポンサードリンク


Yeoman を導入する環境

  • MacBook  Pro (Retina, 13-inch, Late 2012)
  • Boot Camp バージョン 5.1
  • Windows 10 Pro

Yeoman を導入する大まかな進め方

の公式チュートリアルを途中まで実践いたします。今回の目的は環境構築ですので、Step 5: Preview your app in the browser まで行います。他には、

の「Ruby インストール」「Bundler, Compass インストール」以外も参考にいたします。

手順 0. Yeoman を導入するにあたってのポイント

  • 作業は C:¥tmp で行う。予めフォルダを作成しておくこと。
    • パスが長くなるためドライブ直下に近い場所で作業する。
    • C:¥(ドライブ直下)だと一般ユーザのコマンドプロンプトでは権限が足りないため、tmp というフォルダを作り、そこ移動して作業する。
    • C:¥ に作るフォルダ名もできるだけ短くしておく

それでは、Yeoman をインストールしてまいりましょう♪

手順 1. Node.js と npm(Node にバンドルされている) をインストール

  1. Node.js ダウンロードページ の「Windows Installer」アイコンからダウンロード
  2. ダウンロードした node-v0.12.7-x86.msi を実行
  3. すべてデフォルトのまま、インストール
  4. コマンドプロンプトから確認
    >node --version && npm --version
    v0.12.7
    2.11.3
    
    >

手順 2. Git インストール

  1. Git の「Downloads for Windows」からダウンロード
  2. ダウンロードした Git-1.9.5-preview20150319.exe を実行
  3. Adjusting your PATH environment 画面では、「Use Git from the Windows Command Prompt」を選択し、コマンドプロンプトから使用できるように設定する。残りはデフォルトのまま進める。
    Git インストール時は「Use Git from the Windows Command Prompt」を選択し、コマンドプロンプトから使用できるように設定
  4. コマンドプロンプトから確認
    >git --version
    git version 1.9.5.msysgit.1
    
    >

手順 3. Yeoman インストール

  1. コマンドプロンプトから次のコマンドでインストール。npm を使って、yo、bower、grunt をインストールする内容
    >npm install --global yo bower grunt-cli
  2. 次のコマンドで確認
    >yo --version && bower --version && grunt --version
    1.4.7
    1.4.1
    grunt-cli v0.1.13
    
    >

手順 4. AngularJS プロジェクトのひな形ジェネレーターのインストール(ここまでは 1 回だけ行う手順)

こちらのページのプロジェクトひな形を導入いたします。

  1. コマンドプロンプトから次のコマンドでインストール。
    >npm install --global generator-angular

確認用のコマンド等は特にございません。

手順 5. プロジェクトフォルダ作成(ここからはプロジェクトを作る度に行う手順)

今までは必要なソフトウェアなどのインストールでした。これからは作成するアプリ、プロジェクトを実際に作ってまいります。

C:¥tmp フォルダの mytodo というプロジェクト名(=フォルダ名)といたします。

以前に適当な場所で進めましたところ、階層が深く、フォルダ削除ができなくなってしまいました><。ですので、C:¥tmp でプロジェクトを作成いたします。

そのために、コマンドプロンプトは管理者権限で実行いたします。cd c:¥tmp などですでに移動しているものとします。

>mkdir mytodo && cd mytodo

もしくは、エクスプローラーで、C:¥ を表示してそこに tmp¥mytodo フォルダを作ってもよいですわね♪

手順 6. yo を実行してひな形を作成

コマンドプロンプトでの作業となります。

mytodo がカレントフォルダといたします。

  1. 次のコマンドを実行
    >yo angular

    初回のみ、次を聞かれる。Enter(Yes)をタイプ

    [?] ==========================================================================
    We're constantly looking for ways to make yo better!
    May we anonymously report usage statistics to improve the tool over time?
    More info: https://github.com/yeoman/insight & http://yeoman.io
    ==========================================================================: (Y/n)
  2. n をタイプ
    ? Would you like to use Sass (with Compass)? (Y/n)
  3. y をタイプ
    ? Would you like to include Bootstrap? (Y/n)
  4. そのまま Enter をタイプ
    ? Which modules would you like to include? (Press <space> to select)
    >(*) angular-animate.js
    ( ) angular-aria.js
    (*) angular-cookies.js
    (*) angular-resource.js
    ( ) angular-messages.js
    (*) angular-route.js
    (*) angular-sanitize.js
    (*) angular-touch.js
  5. 次のエラーが出た場合は、y を入力し Enter。conflict package.json は一時的なエラーとのこと。
    conflict package.json
    ? Overwrite package.json? (Ynaxdh) ? May bower anonymously report usage statisti
    |s to improve the tool over time? (Y/n) -
  6. 止まるので、Enter をタイプして進める。
    yo コマンド実行時に止まったため、Enter をタイプしたら進んだ。
  7. 5分ほどかかって完了。

手順 7. 動作確認

テスト用の静的サーバを起ち上げて確認いたします。ウェブサーバで確認できるなんて実践的ですの♪

  1. コマンドプロンプトで、次を実行
    >grunt serve
  2. ブラウザが自動的に立ち上がり、URL が http://localhost:9000/#/ のページが表示されたら OK
  3. 終了する時は、コマンドプロンプトで Ctrl + c

おわりに

ポイントとして挙げました、「C:¥ 直下に近い場所で作業する」は作成したプロジェクトを削除しようとしてエラーとなったため、そのようにしております。

エラー内容は、パスが長すぎて削除できない、という趣旨でした><。残し続けるのも嫌ですので調べましたら、次のページを参考にして何とか削除することができました♪ありがとう存じます!

以上です。

コメントを残す