Slide 1

Slide 1 text

ϞμϯͳϑϩϯτΤϯυ։ൃ ؀ڥʹ͍ͭͯ Ϗϧυπʔϧߏஙͱͦͷ׆༻ࣄྫʹ͍ͭͯ

Slide 2

Slide 2 text

フロントエンドの課題 • レスポンシブ • 表示速度 • ブラウザ問題 • ライブラリ管理 • 複数人開発 • SPA これらの課題を解決しなければ!

Slide 3

Slide 3 text

CSS JS ES2015 SCSS コーディングの変化 機能追加などでブラウザの制約を受けないようコンパイルするようになった。

Slide 4

Slide 4 text

SCSS とは • CSSをよりプログラミングに近い形で書ける言語 • ブラウザでそのまま使うことは出来ない • compass などを使ってコンパイルする CSSを拡張したメタ言語 http://sass-lang.com/guide 出来ること • 変数宣言 • 演算子 • セレクタのネスト • ミックスイン • セレクタの継承

Slide 5

Slide 5 text

ES2015 とは • 他言語の構文を多く採用して5年ぶりのアップデート • 最新ブラウザで対応が始まっている • 標準コンパイラのBabelを使うことを推奨 https://babeljs.io/docs/learn-es2015/ JavaScript の標準化言語 出来ること • let・constキーワードによる変数宣言 • class構文 • テンプレート文字列 • importとexportによるモジュール構文 http://www.slideshare.net/dynamis/java-scripttrendspec

Slide 6

Slide 6 text

開発ツールの変化 言語の変化やライブラリやパッケージの増加に伴い、他言語にあった管理や実行ツールが充実

Slide 7

Slide 7 text

サーバーサイドJS パッケージ管理 パッケージ タスクランナー トランスコンパイラ フレームワーク ライブラリ 開発ツールの説明 autoscript 的な yum や composer, cpan的な PHPやPerlやRuby的な

Slide 8

Slide 8 text

環境を作るのが面倒

Slide 9

Slide 9 text

なので作りました

Slide 10

Slide 10 text

node-sample • ライブコンパイル • ファイル圧縮 • ウェブサーバー • ライブリロード • エラー通知 • ドキュメント生成 フロントエンド開発に必要な環境を構築してくれるツール できること https://github.com/jaxx2104/node-sample/

Slide 11

Slide 11 text

実際に使ってみます

Slide 12

Slide 12 text

環境構築は3行 $ yum install node $ git clone [email protected]:jaxx2104/node-sample.git $ npm install 1. node.js をインストール 2. node-sample をダウンロードして展開 3. sublime-textからnpm install 実行はコマンドかエディタで可能! Mac の場合(コマンド不要) Linux の場合

Slide 13

Slide 13 text

ディレクトリはこんな感じ www ├──index.html ├──package.json npm のライブラリ一覧 ├──node_modules npm のライブラリ ├──gulpfile.js gulp のタスク └──assets ├── css ├── js ├── scss ├── babel └── img

Slide 14

Slide 14 text

最後にLINE BOT フレンド登録したユーザーからのメッセージや ビーコン検知でプログラムを実行できる。 ですが・・・。

Slide 15

Slide 15 text

line-beacon いい活用法あれば https://github.com/jaxx2104/line-beacon/

Slide 16

Slide 16 text

ありがとうございました