angular2入門①【環境構築編】

ゼットンです。

ひょんなことからangular2の講師をすることになってしまいました。
まだangular2を触り始めて3ヶ月なのに・・・。 正式リリースしてからまだ一ヶ月も経ってないのに・・・！
苦しかった破壊的変更の嵐・・・
なのに奴らときたらもうバージョン2.1β版とか出しちゃったりしてさ！！！

良いんですけどね、機能が改善されるのは良いことですよ。デグレは勘弁ですけど。
というわけで、備忘録も兼ねてつらつらangular入門なるものを書いていこうかと。

今回は、環境構築編です。サクッとHello,worldしちゃいましょう。
必要なものは下記の通り。

• Node.js
• angular-cli

Node.jsのインストール

下記のサイトから最新のインストーラをダウンロードし、
実行する。はい、終わり(雑)

http://nodejs.jp/nodejs.org_ja/docs/v0.10/

きちんとインストールされたか不安な方は
コマンドラインで下記のように実行してください。

>node -v
v5.0.0

↑こんな感じでバージョンが表示されたらOKです。

angular-cliの導入

これは何かというと、angular2の開発を助けてくれる有能なツールです。
公式HPはこちら：https://cli.angular.io/
具体的には下記のような機能があります。

プロジェクト雛形の自動生成 モジュール/コンポーネント/パイプ/サービス等の自動生成 ローカルサーバーの起動 テストの実行

など。他にもgit連携機能なんかもあります。（あんまり使ってないけど）
上記の機能はコマンド一発でできちゃいます。かなり便利。
では、インストールしていきましょう。

コマンドラインで下記を実行してください。

>npm install -g angular-cli

怒られたら、管理者権限で実行してください。

きちんとインストールされたか不安な方は
コマンドラインで下記のように実行してください。

>ng -v
angular-cli: 1.0.0-beta.15
node: 5.0.0
os: darwin

↑こんな感じでバージョンが表示されたらOKです。

プロジェクトの生成〜サーバーの起動

いっきに行くよー
コマンドラインで下記を実行してくださいまし。

>ng new sample-prj
>cd sample-prj
>ng serve

すると下記のようにサーバが起動するはず。

** NG Live Development Server is running on http://localhost:4200. **

8027ms building modules                 4ms add01687ms5172ms asset92ms emittinggHash: 8fce41954677c9def6f7

Version: webpack 2.1.0-beta.22

Time: 15501ms

[f:id:zetton110:20161003205732p:plain]Asset       Size  Chunks             Chunk Names
    main.bundle.js    2.83 MB    0, 2  [emitted]  main
styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
              inline.js    5.53 kB       2  [emitted]  inline
           main.map    2.89 MB    0, 2  [emitted]  main
         styles.map    14.1 kB    1, 2  [emitted]  styles
          inline.map    5.59 kB       2  [emitted]  inline
          index.html  486 bytes          [emitted] 
assets/.npmignore    0 bytes          [emitted] 

  Child html-webpack-plugin for "index.html":

         Asset     Size  Chunks       Chunk Names

    index.html  2.82 kB       0 

http://localhost:4200/へアクセス！
すると下記のような画面が表示される。

よーし環境構築、終わった終わった！
いやいや、これは全ての始まり。

そう、おれたちの戦いはこれからだ！！！

(あれー、おかしいな。ちゃんと続くよ！)

RiotJS × Sass

RiotJS良いですよ。

自由度が高いためエンタープライズには向かない印象だけど
気軽にサクッとアプリを作るには良さそう。
JQueryを始め、いろんなJSライブラリと組み合わせやすいし
なんといっても軽量なのでCordovaと組み合わせるには良いかも。

そんで、、Sass使いたいよね？そうだよね、きっとね。わかるわかる。
でも公式でSassとの連携の情報がないんですなー。でも出来るよ。

すでに出回っている情報だけど、備忘録のため投稿します。
RiotJSをプリコンパイルする環境を想定。
まあみんなそうしてるんでしょ。

1.各種ライブラリをプロジェクトにインストール

下記の３つのライブラリが必要

• gulp
• gulp-riot
• node-sass

$ npm install --save-dev gulp

$ npm install --save-dev gulp-riot

$ npm install --save-dev node-sass

2.プロジェクト直下にgulpfile.jsを作成

ここでは、tagsフォルダ配下の.tagファイルに対して
Sassの記述をCSSに変換した上で、js/tagsフォルダ配下に吐き出している。
ここは各人の好きなようにすれば良いと思いマッスル。

var gulp = require('gulp');  
var riot = require('gulp-riot');  
var sass = require('node-sass');

gulp.task('riot', function() {  
  gulp
    .src('tags/*.tag')
    .pipe(riot({
      parsers: {
        css: {
          sass: function(tagName, css) {
            var result = sass.renderSync({
              data: css
            });
            return result.css.toString();
          },
        },
      },
    }))
    .pipe(gulp.dest('./js/tags'))
    ;
});
 

3.コンポーネント作成

今回はフォントの色と背景色を変数に入れるという至極簡単な例で実装した。
サルでも分かるはず。
もちろんこれはtagsフォルダ下に配置。

<app>  
  <h1>Riot.js で Sass を導入して使う方法</h1>
  <style type='scss'>
  $font-color: blue;
  $theme-color: red;
  h1 {
    color: $font-color;
    background-color: $theme-color;
  }
  </style>
</app> 

★styleタグにtypeを指定する点がポイントずらー

4.gulpコマンド実行

$ gulp riot

そうするとjs/tagsフォルダ配下にapp.jsファイルが出力されるはず。
中身はこんな感じ。

riot.tag2('app', '<h1>Riot.js で Sass を導入して使う方法</h1>', 'h1 { color: blue; background-color: red; }', '', ); 

ちゃんとSassがCSSに変換されているはず。未来ずら〜！！

この素晴らしきフロントエンドに祝福を

ただのアニヲタがひょんなことから

フロントエンドエンジニアとして生きて行くことになりました。

とりあえず、備忘録としてブログを立ち上げてみた。

主に最近のフロントエンドの技術トピックと、

たまにアニメネタでも書いていこうかと思っています。

それにしてもなぜこうもフロントエンド技術というのは

複雑化しているのか・・・。

ベストプラクティスを提示しろだなんて簡単に言うなよ、偉い人たち。

まあ混沌の世界だからこそ、生きる力が身についていくわけで・・・

少しずつ力を溜め込んで爆裂魔法を覚えたい。

エクスプロージョン！！！