javascript 研修
TRANSCRIPT
![Page 1: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/1.jpg)
JavaScript 研修
2015/04/15(水) @株式会社ガイアックス
![Page 2: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/2.jpg)
ほと(@hoto17296)
• 株式会社ガイアックス
• 新卒2年目
• Web関係ならなんでもやるマン
![Page 3: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/3.jpg)
この研修の目的
JavaScript とその周辺技術最近のトレンドなどについて
概要を押さえる
![Page 4: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/4.jpg)
特に押さえて欲しいポイント
• JavaScript流オブジェクト指向 • イベント駆動 • DOM • AjaX
![Page 5: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/5.jpg)
今日の流れ
1. JavaScript 概論
2. クライアントサイド JavaScript
ゲームを作ろう
3. サーバーサイド JavaScript
ChatOps してみよう
ワーク
ワーク
![Page 6: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/6.jpg)
1. JavaScript 概論
![Page 7: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/7.jpg)
JavaScript とは
• ブラウザで動作するプログラミング言語
• 様々な場所で使われている
• Java とは似て非なるもの
![Page 8: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/8.jpg)
ここ数年のJSブーム
• 遅かったJSがサクサク動くようになった
• Flash から HTML5 に置き換わる流れ
• CommonJS の登場
![Page 9: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/9.jpg)
JavaScript の種類クライアントサイド JavaScript
サーバーサイド JavaScript
実行環境 ブラウザ node.js
用途 Web 色々
モジュール 読み込み <script> require
![Page 10: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/10.jpg)
なぜ JavaScript を学ぶのか
• エンジニアにとって避けては通れない道
• 唯一のブラウザ標準言語
• ゲーム系エンジニアでも何かしらで触ると思う(よく知らない)
![Page 11: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/11.jpg)
なぜ JavaScript を学ぶのか
• なんだかんだでよくできている言語
• 極めてシンプルなオブジェクト指向
• 非同期処理・イベント駆動
![Page 12: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/12.jpg)
JavaScript の文法
![Page 13: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/13.jpg)
JavaScript のキホン• リテラル • オブジェクトリテラル • 変数 • 式と演算子 • 関数 • 構文
• 条件文 • ループ文
![Page 14: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/14.jpg)
リテラルリテラル 例
数値 123
文字列 "hogehoge"
論理値 true / false
配列 [ 1, 1, 2, 3, 5, 8 ]
NULL null
undefined undefined
オブジェクト { hoge: 123, fuga: 'foo' }
関数 function hoge(param1) { ... }
![Page 15: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/15.jpg)
オブジェクトリテラル
• RubyやPerlでいうところのハッシュ
• 配列や関数も入れることができる
![Page 16: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/16.jpg)
変数• var文 を使って新しい変数を作成 • 独特のスコープの概念があるので注意
• スコープチェーンという • とりあえず「中から外が見える」でOK
![Page 17: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/17.jpg)
演算子演算子名 例
代入演算子 = += -= *= /= %= $= ^= |= など
比較演算子 == != === !== > >= < <=
算術演算子 + - * / % ++ ̶ -
ビット演算子 & | ^ ~ << >> >>>
論理演算子 && || !
文字列演算子 + +=
特殊演算子 delete in new this typeof など
![Page 18: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/18.jpg)
関数
![Page 19: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/19.jpg)
条件文
![Page 20: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/20.jpg)
ループ文
![Page 21: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/21.jpg)
JavaScript のオブジェクト指向
![Page 22: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/22.jpg)
クラスベースではない
• オブジェクト指向にクラスは必須ではない
• オブジェクトリテラルがすべて
• {} ← これ
• 極めてシンプル
![Page 23: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/23.jpg)
関数は第一級オブジェクト• 変数に代入したり、関数の引数に関数を渡したりできる
• JavaScriptの「メソッド」はオブジェクトに生えているただの関数
• メソッドはオブジェクトに束縛されない
• this は呼び出し時に決まる
![Page 24: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/24.jpg)
プロトタイプチェーン
• 「継承(extend)」ではなく「移譲(delegate)」
• 説明しきれないので、詳しくはこのスライドを参照
• 最強オブジェクト指向言語 JavaScript 再入門!
![Page 25: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/25.jpg)
JavaScript の オブジェクト指向
• (わかりづらすぎるので実演)
![Page 26: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/26.jpg)
非同期処理とイベント駆動
![Page 27: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/27.jpg)
イベント駆動
• 「◯◯が起きたら××を実行する」
• あとでワークやります
![Page 28: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/28.jpg)
非同期処理
• 処理の終了を待たずして次の処理を行う
• 非同期処理の結果に対する処理はコールバック関数を用いる
![Page 29: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/29.jpg)
コールバック関数の罠
• コールバック関数を使いすぎるとコールバック地獄にハマる
• コードの可読性が著しく低下する
• Promise パターンを用いるとスッキリする
![Page 30: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/30.jpg)
altJS
![Page 31: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/31.jpg)
altJS
• JavaScriptはシンプルで軽い反面、機能的に物足りない部分も多い
• 型チェック / class / リッチな構文 など
![Page 32: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/32.jpg)
altJS
• 物足りなさを解決するために生まれたのが altJS
• JavaScript にコンパイルできる言語のことを総称して altJS と呼ぶ
![Page 33: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/33.jpg)
代表的な altJS• CoffeeScript
• Ruby / Python っぽい文法 • TypeScript
• Microsoft製 • 静的型付け
• Dart • Google製 • JSを置き換えようとしたが頓挫
![Page 34: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/34.jpg)
2. クライアントサイドJavaScript
![Page 35: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/35.jpg)
DOM 操作
![Page 36: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/36.jpg)
予備知識
• HTML と CSS
• id と class
• DOM
![Page 37: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/37.jpg)
HTML と CSS
• HTML: 要素を記述する言語
• 何があるか
• CSS: 見た目を記述する言語
• どんな風に見えるか
![Page 38: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/38.jpg)
id と class
• どちらも要素にラベルをつけるもの
• id はページ内で唯一の要素
• class はページ内に複数あるかもしれない要素
![Page 39: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/39.jpg)
id と class
![Page 40: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/40.jpg)
id と class• とりあえず覚えてほしいこと
• id は 「 # 」
• class は 「 . 」
• CSSセレクタをはじめ、このルールを用いてラベル(id/class)を探すケースが多い
![Page 41: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/41.jpg)
DOM• Document Object Model
• HTML(XML) を木構造として扱い、構造を取得したり操作したりするAPI を提供する仕組み
• HTML をもとに作られた構造的なナニか(雑)
![Page 42: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/42.jpg)
DOM のイメージhtmlhead
bodydiv#listdiv.itemtext: "あ"
div.itemtext: "い"
div.itemtext: "う"
:↑ HTML
DOM →
![Page 43: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/43.jpg)
クライアントサイドJavaScript でやりたいこと
• DOMの状態を取得する
• DOMを書き換える
• DOMにイベントを割り当てる
![Page 44: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/44.jpg)
JavaScript の問題点: DOM操作はわかりづらい
![Page 45: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/45.jpg)
DOM操作がしづらい
hoge クラスの文字列を取得したい
![Page 46: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/46.jpg)
![Page 47: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/47.jpg)
jQuery
• DOM操作やAjaxを直感的に行えるようにするライブラリ
• ブラウザ間の差を吸収してくれる
• 盛り上がりは収まったけどまだまだ人気
![Page 48: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/48.jpg)
jQuery を読み込む
![Page 49: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/49.jpg)
DOMの状態を取得する
• jQuery関数を使う
• $(‘セレクタ’)
• CSSライクなセレクタで様々なDOMを選択できる
![Page 50: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/50.jpg)
DOMの状態を取得する
hoge クラスの文字列を取得したい
![Page 51: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/51.jpg)
DOMを書き換える
![Page 52: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/52.jpg)
DOMを書き換える
![Page 53: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/53.jpg)
DOMを書き換える
![Page 54: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/54.jpg)
DOMの書き換えをやってみる
• dom / index.html を開いて、ブラウザコンソールから要素を操作してみましょう
ワーク
![Page 55: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/55.jpg)
DOMにイベントを割り当てる
![Page 56: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/56.jpg)
DOMにイベントを割り当てる
![Page 57: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/57.jpg)
イベント割り当てをやってみる
• dom / index.html を開いて、ブラウザコンソールから要素を操作してみましょう
ワーク
![Page 58: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/58.jpg)
jQuery 補足
• すべての要素に対して操作をする
• 要素にデータを埋め込む
![Page 59: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/59.jpg)
すべての要素に対して操作をする
![Page 60: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/60.jpg)
要素にデータを埋め込む
• HTML5のカスタムデータ属性
• 要素そのものに任意のデータを紐付けることができる
![Page 61: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/61.jpg)
ゲームを作ろう
ワーク
![Page 62: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/62.jpg)
エイトクイーン
ワーク
![Page 63: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/63.jpg)
エイトクイーン
• クイーンを8体ならべるゲーム
• どのクイーンも他のクイーンを取れない位置に置かないといけない
ワーク
![Page 64: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/64.jpg)
サンプルコードの仕様ワーク
.queen クイーンを置いたマス
.ableクイーンを置けるマス
.disableクイーンを置けないマス
![Page 65: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/65.jpg)
Ajax
![Page 66: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/66.jpg)
Ajax
• Asynchronous JavaScript + XML
• 非同期通信を行う技術の総称
• Ajax という名前の何かがあるわけではない
• ページ遷移なしで画面を更新することが可能
![Page 67: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/67.jpg)
SPA• Single Page Application
• Ajax などを駆使してページ遷移なしで動作するWebアプリケーションのこと
• 巨大な SPA の例: Gmail
• ちゃんと設計しないと死ぬ
![Page 68: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/68.jpg)
jQuery でAjax してみよう
ワーク
![Page 69: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/69.jpg)
jQuery での Ajax
• jQuery.ajax()
• jQuery.get()
• jQuery.getJSON()
• jQuery.post()
ワーク
![Page 70: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/70.jpg)
課題
• 今日の天気を API から取得して表示してみましょう
• よさげな API を探してきて遊んでみましょう
ワーク
![Page 71: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/71.jpg)
JSフレームワーク
![Page 72: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/72.jpg)
JSフレームワーク• クライアントサイドも大規模になってくると コードが複雑になりがち
• 枠組みにそって開発すると楽
• ドメインロジックとプレゼンテーションの分離
• テスタビリティ
• JSだとMVVMパターンが多い
![Page 73: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/73.jpg)
主要JSフレームワーク
• AngularJS • Backbone.js • Ember.js • Vue.js • Flux + React
![Page 74: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/74.jpg)
3. サーバーサイドJavaScript
![Page 75: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/75.jpg)
CommonJS
• ここ数年でJSのポテンシャルが再発見された
• ブラウザ以外でもJS使おう!!
• しかし独自実装JSが乱立した
• 統一するために作られた規格が CommonJS
![Page 76: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/76.jpg)
従来のJSは I/O が貧弱
• 標準入出力
• File I/O
• Network I/O
• require/include
![Page 77: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/77.jpg)
従来のJSは I/O が貧弱
(すごい雑なイメージ)
今までのJS + I/O= CommonJS
![Page 78: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/78.jpg)
Node.js
• 最もメジャーな CommonJS 実装
• Google V8 エンジンで動作する
![Page 79: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/79.jpg)
npm
• Node.js のパッケージ管理ツール
• Gem とか CPAN みたいなもん
• package.json で管理する
• 手で書くことはあまりない
![Page 80: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/80.jpg)
npm の使い方
• (資料を参照)
![Page 81: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/81.jpg)
その他、流行りのツールとかガンガンいくけど、まぁ
「こんなのがあるんだー」程度で
![Page 82: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/82.jpg)
nodebrew
• node(npm)のバージョン管理ツール
• 現状の Node.js の最新版(0.12.x)は結構不安定
• 0.10.x と使い分けたいことも多い
• plenv とか rbenv みたいなもん
![Page 83: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/83.jpg)
Grunt / Gulp
• タスクランナー
• Gulp の方がシンプルに記述できて人気っぽい
![Page 84: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/84.jpg)
Socket.IO
• WebSocket を実現するライブラリ
• (正確にはちょっと違う)
• リアルタイムWebを構築できる
• チャットみたいな
![Page 85: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/85.jpg)
Browserify
• クライアントサイドJSでもnodeモジュールが使いたい!
• しかしブラウザでは require() は使えない
• 全部ひとつのファイルに固めればいいんじゃね!?
![Page 86: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/86.jpg)
Bower• フロントエンド開発用パッケージ管理ツール
• Twitter製
• サーバーサイドとクライアントサイドのモジュールを区別して管理できる
• 二重管理が面倒くさいという説も
![Page 87: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/87.jpg)
Bower
• npm で全部やったらだめなの?
• 別に問題ないです
![Page 88: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/88.jpg)
Yeoman• 「よーまん」と読むらしい
• Scaffolding のツール
• サーバーサイドJSはツールが多くてよくわからん
• Yeoman「俺が全部面倒見てやるよ!!!」
• 「Yo」「Bower」「Grunt」で構成されている
![Page 89: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/89.jpg)
ChatOps してみよう
ワーク
![Page 90: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/90.jpg)
ChatOps
• Chat の Bot を使っていろいろなことをやる(雑)
ワーク
![Page 91: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/91.jpg)
Slack
• いまイケイケのチャットツール
• Bot を作るのが簡単
ワーク
![Page 92: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/92.jpg)
Hubot• チャット Bot を簡単に作るためのツール
• GitHub製
• JavaScript または CoffeeScript でBot の挙動を記述する
• Slack や HipChat をはじめ、さまざまなチャットツールの Bot を作れる
ワーク
![Page 93: JavaScript 研修](https://reader033.vdocuments.site/reader033/viewer/2022042701/55accdbb1a28ab182c8b46e3/html5/thumbnails/93.jpg)
課題
1. おみくじ機能を作ってみましょう
2. 天気を教えてくれる機能を作ってみましょう
3. 好きな機能を考えて実装してみましょう
ワーク