現在、開発の主体は、AS400とJavaの2系統で行っていますが、よりモダンな開発スタイルも、今のうちにシコシコと習得しておく必要がありそうです。
動向をチェックしていると、Java Scriptフレームワーク戦争が起きているのは一目瞭然で、昔はあれほど非難されていたJavaScriptが、いちやくスターダムに出てくるとは、これもGoogle様々ですね。
さてさて。自分はどのJSのフレームワークを使いこなせるかというと、現時点でゼロ。
何から勉強しようかと思っていたのですが、あれこれ考えず、まずは一番人気のAngularを理解していこうと思っています。
最近だと「React.js」の急上昇ぶりには驚くばかりでしたが、まずは人気どころで基本をしっかりとマスターしたい!
今年後半や来年にはAngular2が登場するという話もありますが、それまでにAngularの基本やその他のフレームワークを少しずつ試しておこうと考えています。
というわけで、開発用ノートPCへYEOMANの開発環境を構築してみました。
その際のメモになります。
作業手順
(1) Git導入
- YeomanのToolにて、Bowerが指定したJS,CSSライブラリーを自動取得してくれるので、Gitが必要になるので、導入します。
- https://msysgit.github.io/
- Git-1.9.5-preview20150319.exe(環境構築時のVersion)
- 環境変数登録結果
> git --version git version 1.9.5.msysgit.1
(2) Node.jsインストール
- YeomanはNode.js上で動くとのことで、インストールします。デフォルト・インストールでOKのようです。
- [https://nodejs.org/]
- インストール先:「C:\Program Files\nodejs」
- 環境変数登録結果
- システム環境変数Path「C:\Program Files\nodejs」
- ユーザー変数PATH「C:\Users\tigertaizo\AppData\Roaming\npm」
> node --version && npm --version v0.12.2 2.7.4
(3) npm更新
- npm install --global npm@latest
> npm install --global npm@latest C:\Users\tigertaizo\AppData\Roaming\npm\npm -> C:\Users\tigertaizo\AppData\Roaming\npm \node_modules\npm\bin\npm-cli.js npm@2.9.1 C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\npm
(4) Yeoman toolsetインストール
> npm install --global yo bower grunt-cli
- 展開先
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\bower
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\grunt-cli
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\yo
> yo --version && bower --version && grunt --version 1.4.6 1.4.1 grunt-cli v0.1.13
(5) generator-angularインストール
npm install --global generator-angular
- 展開先
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\generator-angular
- C:\Users\tigertaizo\AppData\Roaming\npm\node_modules\generator-karma
(6) プロジェクトファイル作成・構築(Angular)
①ディレクトリ作成・移動
> mkdir C:\develops\html5\angularApp > cd C:\develops\html5\angularApp
②Yoコマンド実行
- yo angular
c:\develops\html5\angularApp> yo angular _-----_ | | .--------------------------. |--(o)--| | Welcome to Yeoman, | `---------´ | ladies and gentlemen! | ( _´U`_ ) '--------------------------' /___A___\ | ~ | __'.___.'__ ´ ` |° ´ Y ` Out of the box I include Bootstrap and some AngularJS recommended modules. ? Would you like to use Sass (with Compass)? Yes ? Would you like to include Bootstrap? Yes ? Would you like to use the Sass version of Bootstrap? Yes ? Which modules would you like to include? (Pressto 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 [...]
(7) 開発環境Webサーバー起動
- grunt serve
c:\develops\html5\angularApp> grunt serve Running "serve" task Running "clean:server" (clean) task >> 0 paths cleaned. Running "wiredep:app" (wiredep) task Running "wiredep:test" (wiredep) task Running "wiredep:sass" (wiredep) task Running "concurrent:server" (concurrent) task Running "compass:server" (compass) task directory .tmp/styles write .tmp/styles/main.css (4.289s) write .tmp/styles/main.css.map Done, without errors. Execution Time (2015-05-17 08:03:42 UTC) compass:server 8s ██████████████████████████████████████████████ 100% Total 8s Running "autoprefixer:server" (autoprefixer) task File .tmp/styles/main.css created. File .tmp/styles/main.css.map created (source map). Running "connect:livereload" (connect) task Started connect web server on http://localhost:9000 Running "watch" task Waiting...
下記のような画面がブラウザ上に出現すれば成功です!
[f:id:no14141:20150517171615p:plain]
(8) プロジェクト・ビルド
- grunt build
c:\develops\html5\angularApp> grunt build Running "clean:dist" (clean) task >> 1 path cleaned. Running "wiredep:app" (wiredep) task Running "wiredep:test" (wiredep) task Running "wiredep:sass" (wiredep) task Running "useminPrepare:html" (useminPrepare) task Configuration changed for concat, uglify, cssmin Running "concurrent:dist" (concurrent) task Running "svgmin:dist" (svgmin) task Total saved: 0 B Done, without errors. Execution Time (2015-05-17 08:09:04 UTC) loading tasks 16ms ███████ 13% svgmin:dist 109ms █████████████████████████████████████████ 87% Total 125ms Running "imagemin:dist" (imagemin) task Minified 1 image (saved 5 kB) Done, without errors. Execution Time (2015-05-17 08:09:04 UTC) loading tasks 15ms ██ 3% imagemin:dist 438ms ██████████████████████████████████████████████ 97% Total 453ms Running "compass:dist" (compass) task directory .tmp/styles write .tmp/styles/main.css (1.639s) Done, without errors. Execution Time (2015-05-17 08:09:04 UTC) compass:dist 4.7s ████████████████████████████████████████████████ 100% Total 4.7s Running "autoprefixer:server" (autoprefixer) task File .tmp/styles/main.css created. Running "autoprefixer:dist" (autoprefixer) task File .tmp/styles/main.css created. Running "concat:generated" (concat) task File .tmp\concat\scripts\vendor.js created. File .tmp\concat\scripts\scripts.js created. Running "ngAnnotate:dist" (ngAnnotate) task >> 2 files successfully generated. Running "copy:dist" (copy) task Copied 12 files Running "cdnify:dist" (cdnify) task [...] Running "cssmin:generated" (cssmin) task >> 2 files created. 307.09 kB → 111.78 kB Running "uglify:generated" (uglify) task >> 2 files created. Running "filerev:dist" (filerev) task Revved 5 files Running "usemin:html" (usemin) task Replaced 4 references to assets Running "usemin:css" (usemin) task Replaced 2 references to assets Running "htmlmin:dist" (htmlmin) task Minified 4 files Done, without errors. Execution Time (2015-05-17 08:08:50 UTC) wiredep:app 480ms █ 1% concurrent:dist 17.9s ███████████████████ 44% autoprefixer:server 453ms █ 1% ngAnnotate:dist 946ms █ 2% cdnify:dist 10.6s ███████████ 26% cssmin:generated 532ms █ 1% uglify:generated 9.1s ██████████ 22% Total 40.6s
- これにより「C:\develops\html5\angularApp\dist」内に、アプリケーションが展開されました! JavaのMavenやGradleと同じようにJSアプリでも簡単に同じことができるということがわかりました。
まだテンプレートでアプリの開発基本動作を理解しただけなのですが、これをベースに基礎学習を進めていけそうですね!!!
参考サイト
追記(2015-05-28)
自分の記事を見ながら、別PCで同一環境構築を実施しましたが、「grunt serve」のところで下記の通りのエラーで起動しませんでした。
compass.batが見つからないとのこと。
c:\develops\html5\angularApp>grunt serve Running "serve" task Running "clean:server" (clean) task >> 0 paths cleaned. Running "wiredep:app" (wiredep) task Running "wiredep:test" (wiredep) task Running "wiredep:sass" (wiredep) task Running "concurrent:server" (concurrent) task Warning: Running "compass:server" (compass) task Warning: Couldn't find the `compass.bat` binary. Make sure it's installed and in your $PATH Use --force to continue. Aborted due to warnings.
こちらのサイトにお世話になり、Ruby、Bundler、Compassをインストールしたら、正常に起動できました。上の操作手順に加えて、下記の手順を追加いたします。
申し訳ありませんでした。。。
(*) Ruby, Bundler, Compassインストール
Rubyインストール
- Ruby - Downloads
- ダウンロードしたファイル(インストーラー)
- rubyinstaller-2.2.2-x64.exe
- インストール先
- C:\Ruby22-x64
- ユーザー環境変数pathへ追加
- C:\Ruby22-x64\bin;
>ruby -v ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] >gem -v 2.4.5 >gem update --system : RubyGems system software updated >gem -v 2.4.7
Bundler, Compass インストール
>gem install bundler : 1 gem installed >bundler -v Bundler version 1.9.9 >gem install compass >compass -v Compass 1.0.3 (Polaris) Copyright (c) 2008-2015 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass