JSのお勉強の話。
- 2. $whoami 2
- 3. Toro_Unit 占部 紘 (うらべ ひろし) フリーランスr Frontend Engineer / Web Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 3
- 4. 割とWordPressの人です。 • WordBench 長野 モデレーター • プラグイン/テーマ作者 • WordCamp Kyoto 2017 セッション チーム 4
- 5. Plugins • Custom Post Type Permalinks • 413,500 Downloads • Active Install 80,000+ • Other... Theme • Vanilla 5
- 6. Others • VCCW Team • WordPress Core Contributor (4.3,4.4,4.5,4.7) 6
- 7. 長野県松本市からきました。1 • 日本一美味しいらしいすいかがある とか無いとか。 • ワイン美味い。 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY 2.5 7
- 8. 8
- 9. やってきたこと (2010 ~) • HTML&CSS 開発 / たまにWebデザイン • JavaScriptはjQueryでゴリゴリ系がわりと多め。 • CMS テーマ制作 • ( 9割方 WordPress or MovableType / たまにDrupalとか...etc ) • CMS カスタマイズ・プラグイン制作 • ( カスタムフィールドめっちゃ作ったり、PHPめっちゃ書いたり ) • 環境はほとんどレンタルサーバー (LAMP) 9
- 10. やってないこと (手伝い程度ならある) • スマホアプリ開発 • WEBサービス開発 • システム開発 10
- 11. 今日の話のゴール • 自分でググりながらJSの勉強が出来 るようになる。 • Qiita 等の文書がある程度理解できる ようになる。 11
- 15. • 最近はNode.js等、ブラウザにとどま らず汎用的なプログラミング言語と しての利用も増えてきた。 • 言語としては、ちょっと変わった特 徴をいろいろ持ってる。 • プロトタイプベース 15
- 17. WEBサイトでのユースケース。 • DOM (ブラウザ上でのHTML/CSS)の操作。 • https://codepen.io/torounit/pen/xLwjMB • Ajax. サーバーとの通信。 • https://codepen.io/torounit/pen/Kvzdej • more... 17
- 18. DEMO 18
- 20. Usecase • WEBサイト・ブラウザアプリケーション • モバイルアプリ • デスクトップアプリケーション • Atom/Vscode/Slack/WordPress.com...etc • Brackets 20
- 24. （´°ム°`;） 24
- 25. • JavaScript の話が知りたいんだけ ど。。。 • しかもコピペしても動かない。。。 25
- 27. よく聞く ES6 と か ES2015 って 何？ 27
- 28. ECMAScript (通称ES) • 誕生してすぐに、JavaScriptっぽい言 語が生まれる。(IEのJScript) • ECMAという標準化団体が標準規格 を定める。それがECMAScript. • 要はJIS規格みたいなヤツ。 28
- 29. ES6 / ES2015 • ECMAScript 6 Edition. 6版. • これの策定中に毎年リリースするようになったので、正式に は、ECMAScript 2015。ただし以前からES6と呼んでいたの で、ES6と呼び続けている。 • ES6はES5(2009年)とは別物になるレベルでの大きな変更があ った。 29
- 30. ES2016 • ES2016: ECMAScript 2016。現在公開されている最新の仕 様。 ES.next, ES7 • 未来に実装予定or実装が議論されている仕様のこと。ES7は 無いけど、過去にそういう言い方をしていた頃の名残。 30
- 31. JavaScript / ECMAScript の歴史 1 • 1995年: JavaScript誕生。Netscapeに搭載。 • 1996年: JScript誕生。IE3に搭載。一気に普及。 • 1997年: ECMAScript初版。 • 1998年: ES2. 第2版。 • 1999年: ES3が策定。 31
- 32. JavaScript / ECMAScript の歴史 2 • 2000年~2003年頃: ES4の仕様策定が始まる。が、失敗。 • 2007年~2008年頃: 再びES4の仕様策定が始まる。が、失敗。そしてES4 はお蔵入りに... • 2008年: 次世代のJSを考えるプロジェクト ECMAScript Harmony 発足。 • 2009年: Internet Explorer 8 (ES3準拠…) • 2009年: Node.JSの登場。 • 2009年: ES5策定 （こちらはES3.1をちょっと改良したモノ） 32
- 33. 進化は停滞するがその間、爆発的に需要が伸びる。 • パソコン、インターネットの普及。 • Ajaxに注目が集まる。 • スマートフォンの普及。 • 脱Flashの動き。 33
- 34. CommonJS / Node.JS • サーバーサイドやブラウザ以外でもJavaScriptを使いたい！ V8エンジン(Google ChromeのJSエンジン)滅茶苦茶早い！ 34
- 35. AltJS (Altnative Javascript) • JavaScript はいろいろと他のプログラム言語とは違う特徴が ある。いろいろ個性的。(thisとか...) • それらの問題を解決するために、別の言語で書いて、それを JSに変換しよう！という動きが生まれる。そいつらはAltJSと 呼ばれる。 35
- 38. ECMAScript 2015 ( 6 edition ) !!! 38
- 39. ECMAScript Harmony がついにリリース。 （約7年!!!） • ES4で挫折した仕様も取り込まれている。 • 1999年以来の超大規模アップデート。(約16年!!!) • ほぼ別の言語になったと思って差し支えない。 • CommonJS や AltJS 由来の機能なども一部取り込まれてい る。 39
- 41. 定数 以前は変数しか無かった。 const ham = '（´°ム°`）' ham = 'ハム' // <- エラー!!! 41
- 42. 以前は。。。 定数として扱うモノは、大文字にしてコーディング規約で対 応。 そして破られる var HAM = '（´°ム°`）' HAM = 'ハム' // <- エラーにならない!!! 42
- 43. デフォルト引数 function multiply(a, b = 1) { return a*b; } multiply(5); // 5 43
- 44. 以前は。。。 function multiply(a, b) { var b = typeof b !== 'undefined' ? b : 1; return a*b; } multiply(5); // 5 44
- 45. Class 構文 class Human { constructor(name) { this.name = name; } say(){ console.log('私の名前は' + this.name + 'です！'); } } const ham = new Human('（´°ム°`）'); const torounit = new Human('とろゆに'); ham.say(); //'私の名前は（´°ム°`）です！' torounit.say(); //'私の名前はとろゆにです！' 45
- 46. 以前は。。。 function Human(name) { this.name = name } Human.prototype.say = function () { console.log('私の名前は' + this.name + 'です！'); } const ham = new Human('（´°ム°`）'); const torounit = new Human('とろゆに'); ham.say(); //'私の名前は（´°ム°`）です！' torounit.say(); //'私の名前はとろゆにです！' 46
- 47. ES6 Modules JS から JSを取り込む仕組み。 import hoge from './hoge.js' hoge.js const hoge = 'ほげ'; export default hoge; 47
- 48. CommonJSにも似たような仕組みが。 var hoge = require('./hoge.js'); 48
- 49. 以前は... window.hoge = {} その他 • require.js 49
- 50. • scriptタグの読み込み順などをちょっと間違えると動かなか った。 • window.hoge はグローバル変数なので、どこからでも書き換 えられる。また、var hoge と 関数などの外で書くと window.hoge が書き換わる。 • 良く解らないところで突然のエラーが発生したり。 50
- 51. 変数が影響しないように、即時関数で囲んだり。 (function(){ var hoge = 'ほげ'; })(); 51
- 54. やったー！ 54
- 55. みんなも JS 書こう！！ 55
- 56. ... 56
- 58. JS（というかフロントエンド全般）の最大の辛み。 • 同一のコードで複数のブラウザ・バージョンに対応。 • IE / Edge / Safari / Chrome / Firefox / iOS / Android / …. • ECMAScriptはあくまでも仕様。ブラウザにその機能が入っている かどうかは別問題。 • 全ての機能を100%実装したブラウザは、Safariのみ。今年中に は他のブラウザも? • ES6 Modules にはまだまだ壁が・・・ 58
- 59. 全然楽になってない… 59
- 60. じゃぁどうしてる？ 60
- 61. 最近よくある手法。 1. ES6やそれ以降の仕様で書く。 2. ブラウザでも動くように変換。 • 変換するプログラムのことをトラ ンスパイラという。Babel が有 名。（変換することをバベるって 言ったり） 61
- 62. ES6 Modules • トランスパイラはJSの構文を変換し てくれるが、import や require は別 の対応が必要。 • webpack / browserify / rollup.js あた りが有名。 62
- 63. ここまでのまとめ • ES/ECMAScript が仕様。 JavaScript が実装。 • つい最近まで 1999年の仕様から逃れられなかったのがJS。 • その反動で、ES2015 でほぼ別物の言語になってる。 • いろんな環境で同じコードを動かすために、バグが少なく読 みやすく管理しやすいJSのために、webpackとかでまとめた り、Babel で変換したりしてる。 63
- 65. たとえばこんなの 65
- 66. 66
- 67. Good Morning Sunshine • gms.life • new barlance のWEBマガジン • CMS（WordPress）が出力したJSONをAjaxで取ってきて、 Reactでレンダリング。 67
- 70. • ちょろっと書くぶんには便利。 • 最近は、「とりあえずjQuery」は避けられる傾向。 • jQueryが提供してきた機能は最近のブラウザにはだいたい標準 装備。 • ブラウザの機能が標準化される前は良い感じにしてくれた。 • 実は結構トリッキーなことをやってるので組み合わせ足りする のに難があることも。 • 取っつきやすさは素晴らしいけど、どちらにしろJSの知識は要る。 70
- 71. いくつか例。 71
- 72. use jQuery var button = jQuery('.button'); button.on('click', function(){ jQuery(this).addClass('active'); }); Vanilla.js var button = document.querySelector('.button'); button.addEventListener('click', (e) => { e.currentTarget.classList.add('active'); }); 72
- 73. use jQuery jQuery.ajax('/api.json') .then( data => console.log( data ) ) Vanilla.js fetch('/api.json') .then( response => response.json() ) .then( data => console.log( data ) ) 73
- 74. 所感 • 今でも便利なケースはあるのでほどほどに付き合えば良いの かなと。 • jQuery そのものも標準化された仕様に合わせようとしている 雰囲気。(ver3系) 74
- 75. Angular/React/Vue/Riot • JavaScript のライブラリ。Angularは Google製、ReactはFacebook製。 • View、UIを構築するためのライブラ リ。与えられたデータに応じてHTML を生成したりが得意。 • これらのライブラリで見た目を構築 → データはJSでAPIと通信して取 得。と言う流れも今後ますます増え そう。 75
- 78. PWA • プログレッシブウェブアプリ • WEBサイトとアプリのいいとこ取りをしたようなモノ。 • オフラインファーストという考え方も。 • Yosuke Onoue: WORDPRESSユーザーのための PROGRESSIVE WEB APPSの話 | WordPress.tv 78
- 80. 僕の場合。 • 僕自身はJSの案件はそこまで多くない。でも、突然WEBアプ リじみたこと、複雑なフォームを作る案件がふってくる。 • jQuery でも良いけど、それしか知らないと適切な選択が出 来ないので、ちょこっと触ってみる。 • 画面遷移があるモノは状態の管理が辛いけど、JSだけでや ると割とサクッと終わるケースが多い気がする。（多段式 のフォームとか） 80
- 81. たとえばこんなの。 81
- 82. • チュートリアルやサンプルアプリが整 備されているものが多いので、それの 写経はおすすめ。 写経 • 具体例を見ながら自分で同じモノを 書いていく行為。 • 小さいモノをじっくり考えながら書 いていく。何行か書くごとに動かして みたり。ただ漠然と書いてもだめ。 82
- 83. Todoアプリ • Todoアプリが基礎が一杯詰まっててオススメ。 • TodoMVCといういろんな技術で同じTodoアプリをつくって見ようという プロジェクトもあるので、参考にはなるかも。 83
- 84. とりあえず動くモノを作るとテンション上がる! • モチベーションを維持する上でだいじ。 • なんだかんだで動くモノ作るのは達成感あるでしょ？ • 凄いモノを作る必要は無い。 • torounit/one-day-onsen-in-asamaonsen 84
- 85. 人に聞く。 • 身近にエンジニアがいる場合はいろいろ聞いてみる。 • 身近に居ない場合は、勉強会などに参加して仲間を増やす。 • 仲良くなる -> SNS で繋がる -> 情報が自然にに入ってくる • 友達がやってることって結構気になるよね。 85
- 86. コードを公開する。 • コードを公開してSNSやブログでさらすと、いろいろ教えて くれる人がその仲間の中から出現したりする。 • 人のコードを読むのも写経するのも勉強になるし、本人に聞 いたりできる。 • Githubおすすめ。フロントエンドだったら Codepen もおす すめ。 86
- 90. Felt • https://cognitom.github.io/felt/ • オープンソースカフェの河村さん作の 開発・ビルド環境。 • 要Node.js. • コマンドをコピペすれば出来る。 （ cd path/to/project は適宜読み 替えて。） 90
- 91. WebStarterKit • https://developers.google.com/ web/tools/starter-kit/ • Google 作のスターターキット • ES6 Modules には非対応 91
- 92. • HTML/CSS/JSだけなら、どちらも仕事でも普通に使える。 • PHPと組み合わせるとかだといろいろ大変ですが、著名な フレームワークやCMSとかならひな形があったりする。 • これらに限らず、Node.js 製のツールが多いので、インストー ルしておくといい。 • 著名なフレームワークなども、プロジェクトのひな形を配布 していたりするので、それからはじめるといい感じにJSを書 くことだけに集中出来る。 92
- 94. 実戦投入。 • 実際に仕事や案件をこなす中で見えてくる部分も多い。 • 「こんなことにも気を遣うのかー」とか。 • 普段コピペしてるような10行程度のコードを自分で改めて書いてみ たり。 • 短いコードをしっかりちゃんと考えて書くことがその後に繋が る。 • ちょっとずつやってみるのがたいせつ。 94
- 96. 他の言語も触ってみる • プログラミング言語はいろいろ影響を与えあってるので、仕 事で触ってる他の言語とかも同時並行的に勉強してみる。 • 「JSのこれってPHPでいうところのあれか！」みたいな発 見があったり、いろいろ理解の助けになる。 • 他の言語の機能が輸入されるケースはJSに限らずよくあ る。 96
- 97. まとめ • 写経大事。量より質。 • 実戦投入も大事。ただ、ちいさくこつこつ。 • ひとりで頑張るのはたいへんなので、コードを公開していろ んな人と一緒にべんきょうしていこう。 • とりあえず Codepen でなにか書こう。 • とりあえず Node.js はインストールしとこう。 97
- 98. さいごに 98
- 100. 最新のモノだから良い！ってことはない。けどそれを用いると 簡単に解決出来ることもある。 • 新しい機能は何らかの問題を解決するために生まれる。 • 1,2年遅れくらいでいいのかなーというゆるい気持ちで。 • 概要くらいは押さえておくクセをつけるといいかも。 • 全部の機能を一度に使ってみよう！というのは大変。 • 試してみながら徐々に仲良くなって行ければ。 100
- 101. こつこつ地道につきあっていきましょう。 • 1日30分とかでもいい。飽きない程度に。 • 実戦投入と仲間を作ることはモチベーションの維持にとても 重要。 • 困って悩んだ時間は絶対無駄にならない。 101
- 103. おわり。 Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 103