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