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

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

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