いまどきの JavaScript入門 - ES6/TypeScript/Vue.js

Transcript

2. 谷口 允 たにぐち まこと @seltzer 01w.me/tomo
8. ウェブのしくみ HTML CSS
9. ウェブのしくみ …
10. サーバーサイド言語 PHP Ruby
11. サーバーサイド言語 PHP Ruby いちいち通信が必要
12. JavaScript JavaScript
13. JavaScriptの特徴 •通信がなくても動作できるので早い •時間・マウスの動きなど クリック以外の動作に対応できる •データの共有や保存などはできない
14. Ajax 非同期通信
15. Ajaxとは Synchronous 同期通信 Asynchronous 非同期通信
20. 拡がるJavaScript
21. 拡がるJavaScript
22. 拡がるJavaScript
23. 準備するもの
24. JavaScriptをはじめよう
25. キホンのプログラム let day = prompt('何日の秒数を計算しますか？'); document.write(60*60*24*day);
26. キホンのプログラム let day = prompt('何日の秒数を計算しますか？'); メソッド（Method） どうする？ パラメーター（Parameter） なにを？ どのように？
27. キホンのプログラム let day = prompt('何日の秒数を計算しますか？'); 変数 戻り値・返り値
28. キホンのプログラム document.write(60*60*24*day); オブジェクト ～が メソッド どうする
29. キホンのプログラム let day = window.prompt('何日の秒数… windowオブジェクト
30. 犬でおぼえる オブジェクト指向
31. フル版はこちらで
32. メソッド（Method） 命令・お願い
33. パラメーター（Parameter） 細かい指定
34. 戻り値 戻ってきたボール
35. プロパティ（Property） 性質・特性
36. インスタンス（Instance） 実体
37. オブジェクト（Object） 物・概念
38. クラス（Class） 分類
39. 応用JavaScript <button id="buy">決済する</button> <script> const btn = document.getElementById('buy'); btn.addEventListener('click', () => { btn.disabled = true; }); </script>
40. イベントドリブン ユーザーの操作など（イベント） に応じてプログラムが動作
41. ECMAScript
42. ウェブブラウザーの誕生
43. Internet Explorerの登場
44. スクリプト技術の競合 JavaScript VBScript
45. スクリプトの競合 JavaScript VBScript ブラウザーの開発戦争が勃発
46. 国際標準規格の登場 ECMAScript
47. 標準規格って？ A4
48. 標準規格って？ A4 規格に沿うからメーカー問わず
49. ECMAScript準拠言語 ECMAScript
51. <div id="timer"></div> <script> function timer() { var now = new Date(); document.getElementById('timer').innerHTML = now.getSeconds() + '秒'; } var timerID = setInterval(timer, 500); </script> <div id="timer"></div> <script> const timer = () => { let now = new Date(); document.getElementById('timer').innerHTML = `${now.getSeconds()}秒'; } let timerID = setInterval(timer, 500); </script>
52. 古いブラウザーで動作しない… …
53. トランスパイル
54. トランスパイルとは <div id="timer"></div> <script> function timer() { var now = new Date(); document.getElementById('timer').innerHTML = now.getSeconds() + '秒'; } var timerID = setInterval(timer, 500); </script> <div id="timer"></div> <script> const timer = () => { let now = new Date(); document.getElementById('timer').innerHTML
55. トランスパイルとは <div id="timer"></div> <script> function timer() { var now = new Date(); document.getElementById('timer').innerHTML = now.getSeconds() + '秒'; } var timerID = setInterval(timer, 500); </script> <div id="timer"></div> <script> const timer = () => { let now = new Date(); document.getElementById('timer').innerHTML
56. トランスパイルとは <div id="timer"></div> <script> function timer() { var now = new Date(); document.getElementById('timer').innerHTML = now.getSeconds() + '秒'; } var timerID = setInterval(timer, 500); </script> <div id="timer"></div> <script> const timer = () => { let now = new Date(); document.getElementById('timer').innerHTML 古い書き方に巻き戻す
57. トランスパイルのメリット •プログラマーは便利な書き方で書ける •利用者は古い環境でも利用できる •環境のことを気にせずに、最新機能を利用できる
58. トランスパイラー
59. トランスパイラー
60. TypeScriptとは •Microsoftが開発したプログラミング言語 •JavaScriptと完全互換性 •TypeScript→JavaScriptへの変換の際に トランスパイルを設定可能
61. 「型」とは let x = 1; let y = 2; x = '文字列を代入します'; console.log(x * y); // NaN
62. 「型」とは let x = 1; let y = 2; x = '文字列を代入します'; console.log(x * y); // NaN 数字 文字
63. 「型」とは let x = 1; let y = 2; x = '文字列を代入します'; console.log(x * y); // NaN let x: number = 1; let y: number = 2; x = '文字列を代入します'; console.log(x * y); // NaN ここでエラー
64. TypeScriptのメリット •厳密な型チェックで変数の誤用を防ぐ •コンパイルエラーで、実行時のトラブルを防ぐ •チーム開発時の曖昧な仕様によるトラブルを防ぐ
65. ライブラリー
67. JavaScriptライブラリー
68. JavaScriptライブラリー
69. jQueryが得意なこと •画面内のテキストフィールドなどを指定しやすい •柔軟なイベント定義 •作業手順を指定できる（メソッドチェーン） •豊富なプラグイン
70. jQueryが苦手なこと •ページ内に新しい要素を登場させる •複数の要素を連携させる •非同期通信を利用したデータ操作
71. 新たなJavaScriptプロダクト
72. 新たなJavaScriptプロダクト
73. Reactの特徴 •大規模サイトでも、しっかりした設計で開発 •アプリ開発などにも活用可能 •習得に時間がかかり、若干難しい
74. Vue.jsの特徴 •HTMLに簡単に組み込んで利用可能 •コードを極力書かずに開発が可能 •大規模な開発には向かない
76. 要素の生成 <div id="app"> {{ message }} </div> <script> let app = new Vue({ el: "#app", data: { message: "Vue.jsを勉強中です" } }); </script> Vue.jsを勉強中です
77. イベント制御 <div id="app"> <button @click="checkClick" :disabled="clicked">決済する </button> </div> <script> var app = new Vue({ el: "#app", data: { clicked: false }, methods: { checkClick: function() { this.clicked = true } } }) </script>
78. フォームの制御 <div id="app"> <clock></clock> <clock style="color: blue">現在時刻</clock> </div> <script> Vue.component('clock', { data: function () { return { time: '' } }, mounted: function () { var timerID = setInterval(this.refresh, 500); }, methods: { refresh: function () { var now = new Date(); this.time = `${now.getHours()}:${now.getMin utes()}:${now.getSeconds()}` } }, ... template: '<div :style=""><h2><slot>時計 </slot></h2>{{ time }}</div>' }) var app = new Vue({ el: "#app" }) </script>
79. Vue.jsのこれから
80. Vue 3の特徴 •大規模な開発が可能になるように •Vue 2以前の不満点を解消 •TypeScriptとの相性の向上
81. JSを学習しよう
82. JSを学習するために •HTML/CSSはしっかりマスターしよう •良いエディター（Visual Studio Code）を使おう •サーバーサイドも（少し）理解しよう