JavaScriptについてまとめた資料です

1. 2017/4/1 Ver.1.0
Hirotaka Ichimura
1
書いてみる！JavaScript

2.  JavaScriptの今
 Strictモードについて
 イベントハンドラと
イベントリスナ
 オブジェクト指向
2
アジェンダ
 グローバルスコープの汚染
 ECMAScriptの対応
 ECMAScriptの機能
 その他

3. JavaScriptの今
3
01

4. 4
JavaScriptの人気が
高まっていますが
現在どんな状況なのか

5. 5
https://www.tiobe.com/tiobe-index/
2017年人気
プログラミング
言語トップ100
8位

6. 6
Googleトレンド：
JavaScript、Java、PHP、C言語系、Python

7. 7
• TechAcademy
https://techacademy.jp/magazine/8735
• 侍エンジニア塾ブログ
http://www.sejuku.net/blog/2439
• Code部
https://blog.codecamp.jp/progrmming-language
• Hrog
http://hrog.net/2016103141896.html
• インターネット・アカデミー
https://www.internetacademy.jp/special/programmer.html
JavaScriptを
取りあげている
ブログ

8. 8
安定した人気と
需要の高さ
ブログからも期待が高い

9. 9
2015年6月
ECMAScript2015が勧告
2016年6月17日
ECMAScript2016が勧告
JavaScriptの機能強化

10. 10
じゃあ
ECMAScriptは
使えるのか

11. 11https://kangax.github.io/compat-table/es6/
ECMAScript 6 compatibility table

12. 12
IE11
Android4.4
非対応

13. 13
使えない…

14. 14
と思われるが
現在はコンパイラなど
専用の記述法を
変換する方法が一般的
後で触れます

15. 15
ただし
ネイティブの書き方が
分かっていた方が
いいと思った

16. 16
JavaScriptの
ネイティブな記述について
色々採り上げてみる

17. Strictモードについて
17
02

18. 18
JavaScriptを記述する時に
Strictモードを使うのが
今の書き方

19. 19
Strictモードを使うと
記述エラーをより厳格に
扱う事ができる

20. 20
Strictモードの記述
'use strict';
"use strict";

21. 21
注意点
関数の中に書く事

22. 22
Strictモードの動作を
正しく動かすのには
これがベター

23. イベントハンドラと
イベントリスナ
23
03

24. 24
JavaScriptは
イベントドリブン型の
プログラミングパラダイム
として設計

25. 25
ブラウザ上でユーザーが取った
アクションに対して
プログラム処理を行う
プログラム
実行
アクション

26. 26
それがイベント
JavaScriptの大きな特徴

27. 27
イベントを扱うメソッドは2つ
イベントハンドラ イベントリスナ
従来からあるメソッド
• onload
• onclick
• onsubmitなど
追加されたメソッド
• load
• click
• submitなど

28. 28
なぜイベントハンドラと
イベントリスナの
2つに増えたのか

29. 29
当初JavaScriptは
HTMLに記述するのが
普通だったが
可読性などの問題により
外部ファイル化することに

30. 30
またイベントハンドラは
一つのオブジェクトに
同じイベントハンドラを
設定できない仕様

31. 31
そこで
イベントリスナ周りが
実装された

32. 32
2つのメソッドの
違いは2つ

33. 33
イベントの定義の仕方
イベントハンドラは
1つの要素に
1つのイベントハンドラ
しか定義できない
1
イベントリスナは
1つの要素に
複数のイベントリスナ
を定義できる

34. 34
イベントの発動タイミング2
イベントリスナには
HTMLのソースのみ読み込んで発動
するイベントが追加された

35. 35
それがDOMContentLoaded
読み込み
開始
読み込み
終了
HTMLドキュメ
ントの読み込み
と解析が完了
画像・CSS
読み込み
DOMContentLoaded load

36. 36
じゃあ
２つのメソッド使い分けは？

37. 37
HTML内にJavaScriptの動作が
あると明示的に書く場合
2つのメソッドの使い分け
イベントの発動タイミング

38. 38
どちらも使えるので
開発側が適切に使えるように

39. オブジェクト指向
39
04

40. 40
ネイティブなJavaScriptで
オブジェクト指向を考えてみる

41. 41
オブジェクト指向とは
対象をモノと捉え
システム構築を効率よく開発
できるプログラミングの手法

42. 42
オブジェクト指向では
クラスという設計図から
インスタンスを生成して使う

43. 43
JavaScriptに
クラスはない
コンストラクタを
クラスの代わりに使う

44. 44
オブジェクト指向の3大特徴
1. カプセル化
2. 継承
3. 多態性

45. 45
カプセル化は
重要な情報を外部から
いじられないように
隠しておく概念、原則の一つ
カプセル化1

46. 46
素人がPCの調子をおかしくして
「何もしてないんだけどねー」
っていう言い訳

47. 47
システムで
こんなことされたら
一大事なので隠す

48. 48
その代わり別な手続きで
アクセスできるようにしておき
開発者以外には
簡単な操作だけ伝えるようにする

49. 49
継承2
継承は記述した
プロパティやメソッドを
新しく作ったオブジェクトで
使えるようにするもの

50. 50
継承は下記の2つの機能で
使う事ができる
• prototypeプロパティ
• callメソッド

51. 51
prototypeは
オブジェクトを作成すると
自動的作られるプロパティ

52. 52
これを使うと
あるオブジェクトに無いものを
探しに行く

53. 53
callメソッドは
関数オブジェクトが持つ関数
thisの振る舞いを
決める事ができる

54. グローバルスコープの汚染
54
05

55. 55
JavaScriptは変数などを
普通に記述しておくと
他のプログラムと衝突して
おかしくなる

56. 56
変数などを関数外に
書いている状態を
「グローバルスコープの汚染」
と呼ぶ

57. 57
この状態は
回避しないといけません

58. 58
回避方法については2つ
• 即時関数を使う
• 名前空間を使う

59. 59
即時関数1
関数の一つ
書いたら即実行される
1回だけの処理に使う

60. 60
関数内部の変数は
影響範囲(スコープ)が
関数内で完結するので安全
扱う事ができる

61. 61
名前空間2
グローバルな
オブジェクトを作り
その中に変数等を定義する事で
汚染を防ぐ

62. 62
これで
外部から変数を変更される事
が無くなり安全に扱える

63. ECMAScriptの対応
63
06

64. 64
ECMAScriptの記述を
変換する機能について説明

65. 65
トランスパイラ「Babel」を使う

66. 66
トランス(コン)パイラは
ECMAScript表記のJavaScriptを
従来のバージョンに
書き直してくれる

67. 67
Babelはgulpで
使えるようになっているので
作業環境を作る

68. 68
• nudistかnodebrewをインストール
• package.jsonの設定
• gulpfile.jsの記述
gulpで環境構築

69. 69
環境を構築していない人は
下記URLで確認
https://babeljs.io/repl/

70. ECMAScriptの機能
70
06

71. 71
ECMAScriptで追加された
機能も
一部だけど見ていくよ

72. 72
let、const1
letはvarの代わりに用意
ブロックスコープを持つ
constは定数宣言ができる

73. 73
テンプレート文字列2
バッククォートで
文字列を囲うことで
文字列を同士を
連結せず使う事ができる

74. 74
引数のデフォルト値3
引数にデフォルト値を
設定できるようになり
コードが簡潔に書ける

75. 75
クラス3
クラスのないJavaScriptで
クラス構文が使えるようになった
これでソースが書きやすくなる？

76. 76
JavaScriptのクラスは
糖衣構文(シンタックスシュガー)
既存の構文などを
別の構文や記法で
記述できるようにしたもの

77. 77
static修飾子4
インスタンスを生成せず
直接メソッドを書くときの
機能を実装

78. 78
getter、setter5
特定のプロパティを
取得、設定する
メソッドの定義も可能

79. 79
継承6
継承も別な方法で
書く事が出来るようになった

80. 80
アロー関数7
アロー関数を使う事で
従来の記述を
簡略して書く事が出来る

81. その他
81
Ex

82. 82
 https://www.tiobe.com/tiobe-index/
 https://techacademy.jp/magazine/8735
 http://www.sejuku.net/blog/2439
 https://blog.codecamp.jp/progrmming-language
 http://hrog.net/2016103141896.html
 https://www.internetacademy.jp/special/programmer.html
 http://qiita.com/takeharu/items/9935ce476a17d6258e27
 https://babeljs.io/repl/
参考

83. 83
以上!!