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