モダンなフロントエンド開発環境について

2016年2月の社内勉強会にて

Transcript

1. ϞμϯͳϑϩϯτΤϯυ։ൃ ؀ڥʹ͍ͭͯ Ϗϧυπʔϧߏஙͱͦͷ׆༻ࣄྫʹ͍ͭͯ
2. フロントエンドの課題 • レスポンシブ • 表示速度 • ブラウザ問題 • ライブラリ管理 • 複数人開発 • SPA これらの課題を解決しなければ！
3. CSS JS ES2015 SCSS コーディングの変化 機能追加などでブラウザの制約を受けないようコンパイルするようになった。
4. SCSS とは • CSSをよりプログラミングに近い形で書ける言語 • ブラウザでそのまま使うことは出来ない • compass などを使ってコンパイルする CSSを拡張したメタ言語 http://sass-lang.com/guide 出来ること • 変数宣言 • 演算子 • セレクタのネスト • ミックスイン • セレクタの継承
5. ES2015 とは • 他言語の構文を多く採用して5年ぶりのアップデート • 最新ブラウザで対応が始まっている • 標準コンパイラのBabelを使うことを推奨 https://babeljs.io/docs/learn-es2015/ JavaScript の標準化言語 出来ること • let・constキーワードによる変数宣言 • class構文 • テンプレート文字列 • importとexportによるモジュール構文 http://www.slideshare.net/dynamis/java-scripttrendspec
6. 開発ツールの変化 言語の変化やライブラリやパッケージの増加に伴い、他言語にあった管理や実行ツールが充実
7. サーバーサイドJS パッケージ管理 パッケージ タスクランナー トランスコンパイラ フレームワーク ライブラリ 開発ツールの説明 autoscript 的な yum や composer, cpan的な PHPやPerlやRuby的な
8. 環境を作るのが面倒
9. なので作りました
10. node-sample • ライブコンパイル • ファイル圧縮 • ウェブサーバー • ライブリロード • エラー通知 • ドキュメント生成 フロントエンド開発に必要な環境を構築してくれるツール できること https://github.com/jaxx2104/node-sample/
11. 実際に使ってみます
12. 環境構築は3行 $ yum install node $ git clone git@github.com:jaxx2104/node-sample.git $ npm install 1. node.js をインストール 2. node-sample をダウンロードして展開 3. sublime-textからnpm install 実行はコマンドかエディタで可能！ Mac の場合（コマンド不要） Linux の場合
13. ディレクトリはこんな感じ www ├──index.html ├──package.json npm のライブラリ一覧 ├──node_modules npm のライブラリ ├──gulpfile.js gulp のタスク └──assets ├── css ├── js ├── scss ├── babel └── img
14. 最後にLINE BOT フレンド登録したユーザーからのメッセージや ビーコン検知でプログラムを実行できる。 ですが・・・。
15. line-beacon いい活用法あれば https://github.com/jaxx2104/line-beacon/
16. ありがとうございました