おっさんES6/ES2015,React.jsを学ぶ

おっさんES6/ES2015,React.jsを学ぶ
2016JavaScript入門

2016/11/21 @BizReach D3イベント登壇資料

最近のJavaScript動向
・試験に出るJavaScript21年の歴史
ES6/ES2015を学ぶ
・ES6/ES2015概要
・ES5を振り返る
・altjsの意義
Reactを学ぶ
・DOCを読む
・Tutorialをやる
まとめ
・今回の学習を通じて感じたこと

Transcript

1. ͓ͬ͞Μ &4&4 3FBDUKTΛֶͿ 2016JavaScript⼊⾨ 2016/11/21 @BizReach D3 園⽥剛史
2. 園⽥剛史 趣味：⾃転⾞ ３児の⽗ 2 はなすひと ⾃転⾞部あります 執⾏役員 もうビズリーチに ⼩学校より⻑くいます @katamuki 娘！娘！息⼦！
3. 主な業務経験 2002 2004 2008 2010 VC++ 富⼠フイルム ソフトウエア OPT Become Bizreach C# Perl PHP Java インフラ Java Scala 在籍企業 2015 2016 インフラ JS JS ⾔語 マネジメントとかで ほとんど開発してない期間
4. 今回のお題 • おっさんES6/ES2015,React.jsを学ぶ
5. おっさんの定義（狭義） • 狭義の意味でのおっさんは３５歳以上 • ワカモノは２０代と定義します • 登壇者は37歳ですがまだまだ若いと思ってます。 • 弊社では「安定感のあるおっさん」などプラスの意味でも使わ れます
6. 今回何故か応募100名オーバー！！ • D3史上空前の応募数 • 何故？
7. 参加者多くてビビって ＼(^o^)／ パワポも100枚オーバー
8. 背景＆経緯 • 最近新しい技術的なのを触ってない気がする • 新しい技術を⾃ら提案ではなく、ワカモノから提案されるよう になった • 提案されたところでよくわからなかったり(TOT)
9. 背景＆経緯 • 業務でメンバーAnguraJSとかReactJSとかでガンガン開発して いる • がっ⾃分は全く触ってない • しかもReactはかなり来ている肌感はある • 危機感をかんじるものの、触る機会（仕事）がない • プライベートも忙しい（という⾔い訳） • 重い腰を上げてReactを触ってみることに
10. Reactを触ろうとするものの • ヤバイ！まず使われている単語がわからない • ⾃分の知識はJQueryくらいで⽌まってる • EcmaScriptってなに？ • トランスパイラって何？ JSなのにコンパイルってどういうこ と？ • Babelなにそれつよいの？⼤丈夫？神の怒りかっちゃわない？ • Gulp?タスクランナー？なにそれGruntみたいなヤツ？ごめん そっちも知らない。最近はWebpack??もうお腹いっぱいです。 • React触るっつーか スタート地点にも⽴ててない
11. とりあえず最近のJavaScript動向から • とりあえずReactの前に最近のJavaScript動向調べないと始まら ない！！（始められない）
12. ⽬次 • 最近のJavaScript動向 • 試験に出るJavaScript21年の歴史 • ES6/ES2015を学ぶ • ES6/ES2015概要 • ES5を振り返る • altjsの意義 • Reactを学ぶ • DOCを読む • Tutorialをやる • 今回の学習を通じて感じたこと
13. 試験に出るJavaScript21年の歴史
14. JavaScriptの歴史 誕⽣ • 1995年-誕⽣ • 12⽉，Netscape Navigator 2.0に，ブレンダン・アイク（Brendan Eich）が開発した『LiveScript』が実装されるNetscape Navigator社 とSun Microsystems(現Oracle)は当時提携関係にあり，Javaの勢いに 便乗しようとLiveScriptから『JavaScript』に改名． • こんな名前にしたせいで多くの混乱と誤解を⽣む • 1996年 • MSはIEにJavaScriptを搭載しようとしたが，NN社はライセンスを供 与しなかった．そのため，Javascriptに似た⾔語として『JScript』と いう⾔語を開発・・ 部分的に互換があったりなかったり • 開発者泣かせの状態に（ブラウザ依存はずっと開発者泣かせだけど ね！）
15. JavaScriptの歴史 標準化へ • 1997年 • JscriptとJavascriptというブラウザ互換性のない状態を解決しようと NN社は，Javascriptを標準化しようと画策し，ECMAという標準化機 関にJavascriptの標準化を依頼． • 1997年6⽉ECMA-262 初版ができる．世界に平和が訪れた！
16. JavaScriptの歴史 標準化したものの・・ • 1998年 ECMA-262 第2版、1999年 ECMA-262 第3版までは標 準化は順調に進む • ECMA-262 第4版のときに4版をおすAdobe,Mozira(旧NN社)と 3.1版をおすダグラス・クロックフォード(Douglas Crockford)、 MSやYahoo!で意⾒が別れて最終的には第４版は破棄 • その後第５版がリリースされるのは１０年後の2009年である • （あとで詳しく語ります）
17. JavaScriptの歴史 暗⿊期2000年代前半 • 2000年代前半 • JSはOFFにするのがセキュリテーを守る意味でわりと⼀般的 だった。エンジニアはOFFにしてたような・・（登壇者肌感） • ブラウザ側もセキュリティへの考慮が不⼗分で，Javascriptの 脆弱性をつくウィルスが登場したり，ブラウザに無理に負荷を かける通称「ブラクラ」が作られていた。 • 動的なベージはFlashを使ったサイトが全盛 • JSこのまま歴史に埋もれた⾔語となるかと思われた！！
18. JavaScriptの歴史 Ajax登場JS復権へ • 2005年2⽉8⽇ Google Map登場 ⽇本版は7⽉14⽇ • Gmail、GoogleサジェストなどでもAjax技術が使われる • Ajaxとうい概念が誕⽣（ AjaxはAsynchronous JavaScript + XML の略で、2005年2⽉18⽇に⽶国のインフォメーションアー キテクトであるJesse James Garrettにより名付けられた） • JavaScriptが再評価される
19. JavaScriptの歴史 ライブラリの普及 • JavaScriptが⾒直され、様々な機能が実装されJSライブラリな るものが登場し始める • 2005年 Prototype.js初版リリース • 2006年JQuery初版初版リリース • 特にJQueryは⼀⼤ブームに、JSの標準じゃないかと思われるぐ らいに普及する。 $を使うことで、簡単にDOMを扱えるように なり、メソッドチェーンを使って適当に書いたらかっこよく動 く。数多のプラグインが作られ、当時世間を変えつつあったス マホにも対応するjQuery Mobileなども登場 • 世界はJQueryによって包まれた！
20. JavaScriptの歴史 V8エンジン • 2008年にGoogle chromeが公開、V8 JavaScriptエンジンが搭載 される • V8エンジンはJIT(Just in time) Virtual Machine型の JavaScript実⾏エンジン，JSが⾼速に動作した。 • 当時のJavaScriptは遅いという常識を覆しプラウザ環境を根底 から変えていく • 補⾜：Firefoxはインタープリタで実⾏して、統計情報をとって、まず中間コードに変換し、その上 でJITコンパイルするが、V8では、中間コードもなく、インタープリタも搭載せずに最初の実⾏時 からコンパイルする。
21. JavaScriptの歴史 サーバーサイドjs • 2009年 Node.js登場 • サーバーサイドJS、⾮同期、ノンブロッキングIO • C10K問題への対応 • Google V8エンジン • サーバーサイドだけでなくnpm gulpなどでフロントエンドJSも 恩恵を受ける
22. JavaScriptの歴史 フレームワーク編 • 世界はJQueryの天下が続くと思われたが、JSがより⼤規模開発 になるにつれてJQueryにも不満が溜まってくる。 • ⼀⼈でゴリゴリ書くのは良いが、テストが書きづらく集団メン テナンスがわるい、⾼度化するWebアプリケーションにおいて、 jQueryだと設計とか保守性を担保するのが難しかった。 • そして時代はJSフレームワークを求める始める
23. JavaScriptの歴史 フレームワーク編 • Backbone.js、Angular.js，React.js，Riot.jsなどが出てくる • 2009年 Angular.js - Google製フレームワーク • 2010年 BACKBONE.js • 2013年 3⽉ React.js ‒ Facebook製 • Viewだけなのでフレームワークでは無くライブラリ • 2013年 11⽉ Riot.js • 2016年 Angular2 (betaは2015年)
24. JavaScriptの歴史 altJS • AltJS（Alternative JavaScript）とは、その名の通りJavaScript の代替⾔語 • 複数⼈数開発をするに伴い問題になってきた、⾔語仕様の柔軟 性（悪く⾔えば適当さ）を解決するために登場 • →動的型付けによりバグの混⼊ Classが無い等ため仮想的に class概念を作ったりするなど。 • AltJSをコンパイル（トランスパイル）することでJavaScriptを ⽣成し、⾔語仕様が柔軟なJavaScriptの持っている問題を解決 します。 • JSを⽣成する⾔語という昔のおっさんにはびっくりな世界に
25. JavaScriptの歴史 altJS • 2009年 CoffeeScript (Railsに標準でサポート) • 2011年 Dart Google製 • 2012年10⽉ TypeScript マイクロソフト製 • ES6のスーパーセット • いまはTypeScriptが主流な模様
26. EcmaScript ES5 • 2009年 ES5 10年ぶりの仕様更新 • ES4とES3.1の対⽴を⻑らく続けていたがES3.1をベースとする ことで調整、実質的な初もESメジャーバージョンアップ • ES4は破棄、ES3.1をES5としてリリース
27. EcmaScript - ES2015/ES6 • 2015年6⽉にリリースされたECMAScript 6th edition • コードネームは「harmony」ES3.1とES4の対⽴を調和させた らしい。 • 当初はES6という名称だったがこれ以降は1年毎にリリースして いく計画となったためES2015が正式名称となった • 今後の名称はES2015, ES2016,ES2017とうい名称になるとのこ と
28. ES6/ES2015について学ぶ 及びEcmaScript AltJSについて
29. ES2015で追加となった機能(1) • let・const変数宣⾔ • class構⽂ • アロー関数 • importとexportによるモジュール構⽂（Module） • 分割代⼊ • Pythonスタイルのジェネレータ • 関数のデフォルト引数、関数の可変⻑引数
30. ES2015で追加となった機能(2) • テンプレート⽂字列 • Symbol • Promise • プロキシ型付き • 配列Map、Set、WeekMap、WeekSet • イテレータ、for/ofループ • 2進数および8進数の整数リテラル
31. letとconst • 今までは変数宣⾔はvarでしたがES6からletとconstが追加され ている。
32. let • letは代⼊できるが再宣⾔できない
33. let • 関数スコープではなくブロックスコープ varだと 意図せずX=1が出⼒される letだと ちゃんとエラーになる スコープがブロック、関数の範囲になる！
34. const • constは再代⼊できない • 定数として利⽤できる • Immutableなオブジェクトとして利⽤できる
35. const
36. 所感:var,let,constどれを使うべきか？ • varはもう出番はない • 基本はconst、必要に応じてlet • コーディングミスを防ぐためにも、immutable（不変なオブ ジェクト）なプログラミングの流れ的にも constベースでいい のではないか？
37. class • JSでclassっぽいものは関数を宣⾔することで実現してきました が、Classが⾔語仕様となりました。
38. class
39. アロー関数
40. Promise • Promiseはまだ完了していないが、いずれ完了する処理を表す • callback地獄から脱却出来る、並列処理が書きやすくなる • すごい⼤事なんですが、説明が難しので今回は割愛 • MDM promise • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/G lobal_Objects/Promise • ちなみにAsync/AwaitはES2016で⼊るっぽい予定だったのが⼊ ら無かったみたいです。（ES2017でほぼ⼊りそう）
41. ES6/ES2015の普及具合 出典:http://kangax.github.io/compat-table/es6/
42. ES6/ES2015の普及具合 • Chrome,Firefox,Edge,Safari(10)などのモダンブラウザのみを ターゲットにする場合は、ES2015はほぼほぼいける • IE11やそれ以前のブラウザのシェアを考慮すると互換性の⾯で はまだちょっと不安
43. 結局互換性の問題 • トランスパイラの登場 • トランスパイラはコードをコードに変換する • JSの世界ではES6以降をES5に変換してくれる
44. Babel
45. Babel • もとの名前は6to5, ES6をES5に変換するためのツールだった • ES6以降もサポートしていくということでBabelという名前に • ES6/ES2015のイケてるJSでコーディングしながらES5対応ブ ラウザで動作させることが出来る
46. Babel ES6をES5に変換
47. Babelデモ Webでデモが出来る https://babeljs.io/repl/
48. Babelデモ class Person { constructor(name) { this.name = name; } hello() { console.log('My name is ' + this.name); } } const alice = new Person('kotaro'); alice.hello() https://babeljs.io/repl/ に上記を貼り付ける
49. ECMAScript Edition 公開⽇ 1 1997年6⽉ 初版 2 1998年6⽉ EditionはそのままISO/IEC 16262 international standardへの対応 3 1999年12⽉ 正規表現、よりよい⽂字列の取り扱い、新しいコントロール構⽂、 try/catch例外処理、より厳格なエラー処理、数字のその他の書式化フォー マット 4 廃棄 政治的な理由により廃棄 5 2009年12⽉ 10年分の負債の精算 "strictモード"、初期化時に発⽣しがちなエラーを回 避するための追加仕様の追加。多くの曖昧な部分、および仕様に準拠しつ つも現実世界の実装の融通の利く振る舞いを明確にした。いくらかの新機 能、getterやsetter、JSONライブラリのサポート、より完全なオブジェク トの属性のリフレクション 5.1 2011年6⽉ ISO/IEC 16262:2011への対応 6/2015 2015年6⽉ クラス、モジュール、イテレータ、for/ofループ、Pythonスタイルのジェ ネレータ、アロー関数、2進数および8進数の整数リテラル、Map、Set、 WeekMap、WeekSet、プロキシ、テンプレート⽂字列、let、const、型 付き配列、デフォルト引数、Symbol、Promise、分割代⼊、可変⻑引数 2016 2016年6⽉ 冪乗演算⼦、Array.prototype.includes 2017 策定中
50. ちょっとES5についても語っておこう • 1999年のES3(ES4は破棄)より10年の時をへて2009年策定され たバージョン • まさかの復権を遂げたJSが使われ⽅が進化していく中で多くの 曖昧な部分、および仕様に準拠しつつも現実世界の実装の融通 の利く振る舞いを明確にした。 • Array.isArray Array.prototype.forEach Array.prototype.mapと かArray系の機能拡張が多く⾏われてる • Object系の拡張も⽬⽟だがES6以降はclassでいいよね感 • ⾊々あるけど“use strict”とかはLL⾔語のよくある流れ
51. use strict • “use strict”; と宣⾔することで使⽤可能に • 具体的には次ようなミスがエラーとして処理されます • 宣⾔されていない変数への代⼊ • 書き込み不可変数・getterのみの変数への代⼊ • 削除できないプロパティのdelete • 引数名の重複 • 8進数表記 • with構⽂
52. use strict 今っぽいJS界隈だとコレを書いてないと⽯を投げられるらしい
53. use strict • 既視感がある • この道はいつか来た道
54. use strict の既視感 • Perl • PHPもStrict modeがあるとか無いとか • LL⾔語 型無し⾔語の通る道なのかなー
55. ES5ブラウザ対応状況 IE8NG IE9 ミニマム⾏けそう IE10以降が妥当 でもCSSとかの問題も あるので ES5でもIE11以降ベター 弊社HRMOSでは IE11以降がサービス対象 （B向けだけど）
56. ESバージョン • 現状のモダンJSを使うならES->Babel使うにしてもES5対応ブ ラウザが最低ライン • IE8対応必須とか⾔ってる状況なら、ES5/ES6/ES2015は諦め たほうが無難
57. ちょっと脱線
58. ES6/ES2015以降altJSは必要か？ • 数年前であればaltJSの必要性は理解できる • 現状ES6でclassの概念も⼊り今後もESは新しい概念を導⼊し ながら毎年バージョンアップしていく中でaltJSの学習コストを かけてまで使う必要はあるのか？
59. ES6/ES2015以降altJSは必要か？ • 弊社のフロントエンドエンジニアのイケてるワカモノに聞いて みた。 • 補⾜弊社の⼈材採⽤管理システムHRMOSは React+TypeScript+Scala/playで開発中 http://www.slideshare.net/itaruxkita/1spa http://qiita.com/kitaly/items/85254fd346e2e575582b
60. ES6/ES2015以降 altJSは必要か？ • ES6/2015以降でも実現されてない機能はあるのでメリットは 有る（静的型付けなど） • ⼤規模開発などで構⽂チェックなどメリットは⼤きい • 今新たにHRMOSを作るとしてもTypeScriptを採⽤すると思う • もう少し⼩さなプロダクトならES6でよいかと
61. ES6/ES2015以降 altJSは必要か？ • 学習コストもTypeScriptはES6のスーパーセットなのでそこま でかからない • 逆にTypeScriptはESのスーパーセットなのでES/Javascriptの 悪いところをまだ引きずられてる仕様もあるのでCoffeeScript やDart のを使う意義もある（別のJSに詳しいおっさん談）
62. ES6/ES2015以降 altJSは必要か？ • 個⼈的にはES6でいいじゃんって感じ • でも実際の現場ではニーズはある模様
63. ワカモノ聞いたファンキーな話 • TypeScriptを⼀旦ES6に出⼒してES5トランスパイルすること もあるらしい • TypeScriptにないツールとか（カバレッジツールとか）を使う ために⼀旦ES6に出⼒してツールかましてES5にするとかする こともあるらしい • .....お前正気か？
64. 現状はES5に変換するのが基本 • とりあえず現状はES6でもaltJSでもES5に変換して稼働させる
66. React • ReactはFacebookの社員が作ったイケてるJSライブラリ • 公式サイトに、「A JavaScript library for building user interfaces」とあるように、React.jsはUIを構築するためのライ ブラリ、フレームワークでなくあくまでUIを構築するだけのラ イブラリで、MVCでいうところのVのみの機能を提供します。 • ー＞なのでフレームワークではない • Facebook InstagramはもちろんYahooやAirbnbなどでも使われ ている • 現状のJSフレームワークだと圧倒的１位 （弊社ワカモノ談）
67. React x Flux • Reactと⼀緒にFluxについてよく語られますが今回は割愛 • Flux • Architecture • MVCのような設計⼿法 • 以下の４つからなる • ActionCreators • Dispatcher • Store • View (Reactはここを担当)
68. 2015年末のReactTOP
69. 現在のTOP
70. Reactの特徴を端的にいうと • コンポーネントを組み合わせて構築するコンポーネント指向 FW（View ライブラリ） • VirturalDOMを⽤いた画⾯の差分描画を⾏い⾼速な画⾯表⽰を 提供する つまりUIをコンポーネント化しイベントハンドリングDOMの更新とをやってくれる
71. 変更があった場所だけを更新 Component Component Data Data A B C E F D A B C EE F D ユーザーのActionで データが変わった 差分部分のみ更新
72. JQueryと何が違うのか？ • JQueryの場合データをDOM⾃体に形になることが多い • <li>に⼊ってる⽂字列がデータ！ • データの更新があった場合.detach()して.clone()して.text()し て.appendTo()みたいになってかなり煩雑 • 機能を追加するときもめんどくさい • データが変わるとDOMの値を書き換える必要がある • DOMがどんな値を持っていて、どんなイベントを発⽕するのか制御 しないといけない • Reactコンポーネントとデータを分けて考え、データが更新される とコンポーネントが更新されるような機能を提供してくれる
73. DOM（Document Object Model） • W3Cから勧告 • HTML⽂書やXML⽂書をアプリケーションから利⽤するための API • DOMツリーと呼ばれるツリー構造として扱う事ができる • JSで⾔うところのdocument.getElementById(“jid_xx”)
74. VirtualDOM • DOMを直接いじるとコストが⼤きい • React.jsではVirtualDOMとしてメモリ上にDOM Treeのような 情報をもっていて前後の状態を⽐較し差分の部分だけを実際の DOMに反映してくれます。必要最低限のDOMの更新ですみコ ストがかからず表⽰も早い
75. DOM中⼼からデータ中⼼に • 今まで • DOMを作ってDOMを書き換えDOM⾃体がデータをもつ • React • データが主、データから動的にDOMを⽣成する
76. コンポーネント指向 • UIのパーツをコンポーネントして考える • コンポーネントで管理しコンポーネントを極⼒ステートレスに する（コンポーネントが情報を持たないようにする） • コンポーネント単位での再利⽤性が⾼まる
77. とりあえず触ってみる • 何はともあれ触ってみよう
78. 構成（社内の開発構成 A） ES6/2015 ES5 istanbul ①TypeScriptで記述 TSLint(TypeScript検証ツール)でチェック ②⼀旦ES6に書き出して istanbul（カバレッジツール）でチェック ②BABELでES5へ Webpacがこれらを Module Bundler/ビルドツールとして処理
79. Webpack webpack は 必要なリソースの依存関係を解決し、アセット（配布物）を⽣成す るビルドツール JavaScript,CoffeeScript,TypeScript，CSS,画像などの取りまとめ を⾏う
80. 構成（社内開発環境２） ES6/2015 ES5 ①ES6で記述 ATOM(エディター)に ESLintプラグインを⼊れて構⽂チェック ①BabelでES5に変換 Gulpがビルドシステムヘルパー （タスクランナー）として 上記を⾃動で処理する コードチェックとかもしてくれる コードを書き換えたら ⾃動でブラウザ⽴ち上げとか
81. ビルドツール • サーバーサイドプログラミングだとビルド環境など前からあっ たが • フロントエンド（JS/CSS/HTML/アセット）周りにもそういっ た概念が⼊ってきている
82. とりあえず環境を作る • とはいえ、React触りたいだけなのになんだかめんどくさそう
83. とりあえず開発環境つくる便利なものが • create-react-appが便利！！ • https://facebook.github.io/react/docs/installation.html • 始めるまで時間がかかるBabel/Webpack/gulp/jest/eslint周り を旨いことやってくれる • Facebookのエンジニアが⼿動して開発 • Reduxの作者Dan Abramov⽒ • React Docのinstallationにも⼿順載ってます https://facebook.github.io/react/docs/installation.html
84. create-react-app • 詳しくは弊社ワカモノが書いた資料を御覧ください THX! https://speakerdeck.com/adwd/create-react-app-introduction
85. Hello World • デモ
86. Helo world • https://codepen.io/katamuki/pen/PGMGvY
87. Doc
88. JSX • JSXはECMAScript（JavaScript）にXMLライクのシンタックス を追加する⾔語拡張です。JSXを使うと、JavaScriptコード中に HTMLタグを埋め込んでいるかのように記述できます。
89. JSX:Hello World JSにHTMLみたいなのをかける https://codepen.io/katamuki/pen/qqNLNp
90. JSX:classはClassName • Jsxないでclassは使えないのでclassNameとする（JSの予約 後）
91. Rendering a Component • http://codepen.io/gaearon/pen/YGYmEG?editors=0010 Welcomeという コンポーネントを作って タグとして記述、使⽤できる
92. Functional and Class Components https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components コンポーネントは classでもかける
93. Composing Components コンポーネントをまとめて コンポーネントすることも可能 http://codepen.io/gaearon/pen/KgQKPr?editors=0010
94. propsとstateの概念 • props（プロパティ） • 親コンポーネントから渡されたプロパティ • 変わらない値 • state（状態） • そのコンポーネントが持っている状態 • 変わることがある値
95. props いままで使っていたのはprops
96. State and Lifecycle http://codepen.io/gaearon/pen/KgQpJd?editors=0010 Stateで指定 時刻が更新されないバージョン
97. http://codepen.io/gaearon/pen/amqdNA?editors=0010 componentWillMount() ComponentがDOMツリーに追加される前に ⼀度だけ呼ばれる。 初期化処理を⾏うのに使う componentDidMount() 初期描画(rendering)が発⽣した直後に ⼀度実⾏されます。 時刻が更新されるバージョン Tickを定期的に呼びstateを更新することで 画⾯上の⽇付も更新される
98. State and Lifecycle • Lifecycleって名前になってるけど、ちょっとこの辺りGUIアプ リのイベントハンドラに似てる
99. Handling Events • ReactエレメントのイベントハンドリングはDOMエレメントと 同じように⾏える
100. http://codepen.io/gaearon/pen/xEmzGg?editors=0010 Handling Events onClickとか おっさんでも知ってるよ！
101. Lists and Keys https://codepen.io/gaearon/pen/jrXYRR?editors=0011 表⽰内容には関係ないけど ユニークなkeyを指定する
102. Lists and Keys • Listなどでデータとしては必要ないがKeyを指定する必要があ る • IDを割り当てることで変更や追加削除などDomの変更を最⼩限 にすることが出来る • 指定しないと警告が出る
103. Tutorial
104. Tutorial https://codepen.io/ericnakagawa/pen/ALxakj
105. まとめ • JS進化しすぎ。3-4年くらい⽬を話しただけで超絶進化しすぎ。
106. まとめ（JavaScript⾔語について） • 誕⽣当時はちょっとWebページに動きをつけるための⾔語だっ たJSも、Webアプリケーションに求められるUI/UXが⾼度化す るの中で、JSのコードは肥⼤化し複雑化している。 • その中で⾔語としてコーディング、チーム開発の効率性などが もとめられ、JSライブラリ、JSフレームワークなどの発想、発 展、⾔語としての進化（曖昧性の除外、機能強化）などは⾃然 な流れ
107. まとめ（JavaScript⾔語について） • ⾔語的にはclassなど（遅すぎる気もするけど）ちゃんとした⾔ 語に向かう⽅向性もありつつ、最近のプログラミング⾔語の潮 流（関数型、immutableとか）も取り⼊れながら進化している 印象 • 最近のプログラミング⾔語は他⾔語のいいところを取り⼊れて 進化している、JSもその流れを組んでいると感じた
108. まとめ (React) • MVCのVを提供するライブラリというシンプルな位置づけだが コンポーネント、VirtualDomによる開発メリットはかなり⼤き い • JQuery等でのDOM操作、イベント管理などを煩雑化しやす かった部分を、コンポーネント概念によりコンポーネント単位 でイベントハンドリングなど管理をまとめて再利⽤性を⾼める、 データとDOMを分離してステートレスなコンポーネント管理を 実現するなど、複雑化するUI/UXを管理しやすくなる効果はか なり⼤きいだろう
109. まとめ（UI/UX GUI） • 個⼈的にReactを触る中で感じたことは、 Visual C++/C#/BasicあたりのGUIアプリ開発に考え⽅がにて いると思った点（コンポーネント、イベントハンドラとか） • Webに求められるUI/UXが「ページ」ではなく「アプリケー ション」になってきている。 • 今までのページとしての発想でなく、GUIアプリなどで使って いた概念が取り⼊れられているような印象を受けました。（コ ンポーネントとかイベントハンドラとか） • このあたり新しいけど古いみたいな
110. まとめ（UI/UX GUI） • デザイナー・フロントエンドエンジニア・プログラマの切り分 けみたいなのは難しくなる気がする。 • コンポーネント化+イケてるUI/UX＝情報設計(IA)をしっかりす る だと思うので • デザイナーに対してIAはより求められると思う
111. まとめ（JSフレームワーク） • まずはJSフレームワークを使う場合は本当に必要かを考えたほ うがいいかも。 • 何のために使うのか？ • 新しいUI/UXを提供する必要がある？普通のUI/UXじゃだめなのか？ • SEO施策が必要か？ • ブラウザはどこまでサポートする必要があるのか？
112. まとめ • JSフレームワークの進化に追従する意志がないと使うのは難し い • 作った後も更新、キャッチアップを続ける意志が必要 • ⼆年前作ったAngularのソース誰もメンテ出来ないよとかそう いう状態になっちゃう。 • このあたりサーバーサイドの⾔語・フレームワークも同じだが 今は過渡期で進化が早いので意識しといたほうがいい
113. まとめ（JSの開発環境 ビルド周り） • JSの開発環境 ビルド周りはちょっと複雑化しすぎ • JS/CSS/HTML含めて複雑化してきている。 • 弊社でもビルド職⼈と呼ばれる⼈が⼀⼿にやっているらしい • ただ現状のビルド周りの複雑化は過渡期なのかとも感じる （Javaとかの歴史と⼀緒）もう少し待てばベストプラクティス というか環境は整ってくると思う。 • とりあえず昔みたいにJQuery読み込んでちょっといじるとかそ ういう感じではない
114. まとめ（Webアプリケーション） • AltJS,webpack(ビルドツール)などをみていると、最後は HTML/JS/CSS/アセット(imgとか)の形で書き出せば開発はど んな⾔語でも開発しやすい⽤に作っちゃったほうがいいよね！ という世界観を感じました。 • HTML/JS/CSSはオープンなGUIプラットフォームとして地位 を確⽴したのかも？
115. まとめ • JS界隈から離れて3-４年ぐらいだけど進化しすぎ • パラダイムシフトが２回くらい起こってる印象 • ReactはJQuery登場くらいのインパクトだとおもう • 正しい進化だと思うのでキャッチアップしていかないとヤバイ • Web業界にいるならJSの⼟俵に⽴たなくてもいいので話くらい は出来るようにはしておくべき
116. まとめ • ただカーボーイのみなさんが地雷を踏みまくり屍の⼭を築き情 報共有をしてくれて、その上に⾼速道路が引かれるので後から でも結構キャッチアップできる。 • カーボーイの皆さんありがとう
117. まとめ • IT業界はほんとに変化が早い、正直つらいっす • 2010年当時なら⾃分はフルスタックエンジニアと⾔えたが今は ⾔えない。周りがドンドン進むので学び続けないと取り残され る。 • 新しいことを学ぶのに、過去の経験は役に⽴つそこはおっさん のメリット（時には⾜を引っ張ることもありますが）
118. まとめ • マネージャーとかやってても、⾃分のスペシャリティを意識す ることは⼤事 • エンジニアとしてのスペシャリティを維持するためには頑張ら ないと。 • 皆さん頑張っていきましょう
119. BizReachは優秀なエンジニアを募集してます THANK YOU