Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
おっさん
ES6/ES2015,React.jsを学ぶ
2016JavaScript入門
2016/11/21 @BizReach D3
園田剛史
園田剛史 趣味:自転車 3児の父
2
はなすひと
自転車部あります執行役員
もうビズリーチに
小学校より長くいます
@katamuki
娘!娘!息子!
主な業務経験
2002 2004 2008 2010
VC++
富士フイルム
ソフトウエア OPT Become Bizreach
C#
Perl
PHP
Java
インフラ
Java
Scala
在籍企業
2015 2016
インフラ
JSJ...
今回のお題
• おっさんES6/ES2015,React.jsを学ぶ
おっさんの定義(狭義)
• 狭義の意味でのおっさんは35歳以上
• ワカモノは20代と定義します
• 登壇者は37歳ですがまだまだ若いと思ってます。
• 弊社では「安定感のあるおっさん」などプラスの意味でも使わ
れます
今回何故か応募100名オーバー!!
• D3史上空前の応募数
• 何故?
参加者多くてビビって
\(^o^)/
パワポも100枚オーバー
背景&経緯
• 最近新しい技術的なのを触ってない気がする
• 新しい技術を自ら提案ではなく、ワカモノから提案されるよう
になった
• 提案されたところでよくわからなかったり(TOT)
背景&経緯
• 業務でメンバーAnguraJSとかReactJSとかでガンガン開発して
いる
• がっ自分は全く触ってない
• しかもReactはかなり来ている肌感はある
• 危機感をかんじるものの、触る機会(仕事)がない
• プライベートも忙...
Reactを触ろうとするものの
• ヤバイ!まず使われている単語がわからない
• 自分の知識はJQueryくらいで止まってる
• EcmaScriptってなに?
• トランスパイラって何? JSなのにコンパイルってどういうこ
と?
• Babe...
とりあえず最近のJavaScript動向から
• とりあえずReactの前に最近のJavaScript動向調べないと始まら
ない!!(始められない)
目次
• 最近のJavaScript動向
• 試験に出るJavaScript21年の歴史
• ES6/ES2015を学ぶ
• ES6/ES2015概要
• ES5を振り返る
• altjsの意義
• Reactを学ぶ
• DOCを読む
• Tu...
試験に出るJavaScript21年の歴史
JavaScriptの歴史 誕生
• 1995年-誕生
• 12月,Netscape Navigator 2.0に,ブレンダン・アイク(Brendan
Eich)が開発した『LiveScript』が実装されるNetscape Navigator...
JavaScriptの歴史 標準化へ
• 1997年
• JscriptとJavascriptというブラウザ互換性のない状態を解決しようと
NN社は,Javascriptを標準化しようと画策し,ECMAという標準化機
関にJavascriptの...
JavaScriptの歴史 標準化したものの・・
• 1998年 ECMA-262 第2版、1999年 ECMA-262 第3版までは標
準化は順調に進む
• ECMA-262 第4版のときに4版をおすAdobe,Mozira(旧NN社)と
3...
JavaScriptの歴史 暗黒期2000年代前半
• 2000年代前半
• JSはOFFにするのがセキュリテーを守る意味でわりと一般的
だった。エンジニアはOFFにしてたような・・(登壇者肌感)
• ブラウザ側もセキュリティへの考慮が不十分で...
JavaScriptの歴史 Ajax登場JS復権へ
• 2005年2月8日 Google Map登場 日本版は7月14日
• Gmail、GoogleサジェストなどでもAjax技術が使われる
• Ajaxとうい概念が誕生( AjaxはAsync...
JavaScriptの歴史 ライブラリの普及
• JavaScriptが見直され、様々な機能が実装されJSライブラリな
るものが登場し始める
• 2005年 Prototype.js初版リリース
• 2006年JQuery初版初版リリース
• ...
JavaScriptの歴史 V8エンジン
• 2008年にGoogle chromeが公開、V8 JavaScriptエンジンが搭載
される
• V8エンジンはJIT(Just in time) Virtual Machine型の
JavaSc...
JavaScriptの歴史 サーバーサイドjs
• 2009年 Node.js登場
• サーバーサイドJS、非同期、ノンブロッキングIO
• C10K問題への対応
• Google V8エンジン
• サーバーサイドだけでなくnpm gulpなど...
JavaScriptの歴史 フレームワーク編
• 世界はJQueryの天下が続くと思われたが、JSがより大規模開発
になるにつれてJQueryにも不満が溜まってくる。
• 一人でゴリゴリ書くのは良いが、テストが書きづらく集団メン
テナンスがわる...
JavaScriptの歴史 フレームワーク編
• Backbone.js、Angular.js,React.js,Riot.jsなどが出てくる
• 2009年 Angular.js - Google製フレームワーク
• 2010年 BACKBO...
JavaScriptの歴史 altJS
• AltJS(Alternative JavaScript)とは、その名の通りJavaScript
の代替言語
• 複数人数開発をするに伴い問題になってきた、言語仕様の柔軟
性(悪く言えば適当さ)を解決...
JavaScriptの歴史 altJS
• 2009年 CoffeeScript (Railsに標準でサポート)
• 2011年 Dart Google製
• 2012年10月 TypeScript マイクロソフト製
• ES6のスーパーセット...
EcmaScript ES5
• 2009年 ES5 10年ぶりの仕様更新
• ES4とES3.1の対立を長らく続けていたがES3.1をベースとする
ことで調整、実質的な初もESメジャーバージョンアップ
• ES4は破棄、ES3.1をES5とし...
EcmaScript - ES2015/ES6
• 2015年6月にリリースされたECMAScript 6th edition
• コードネームは「harmony」ES3.1とES4の対立を調和させた
らしい。
• 当初はES6という名称だった...
ES6/ES2015について学ぶ
及びEcmaScript AltJSについて
ES2015で追加となった機能(1)
• let・const変数宣言
• class構文
• アロー関数
• importとexportによるモジュール構文(Module)
• 分割代入
• Pythonスタイルのジェネレータ
• 関数のデフォ...
ES2015で追加となった機能(2)
• テンプレート文字列
• Symbol
• Promise
• プロキシ型付き
• 配列Map、Set、WeekMap、WeekSet
• イテレータ、for/ofループ
• 2進数および8進数の整数リテ...
letとconst
• 今までは変数宣言はvarでしたがES6からletとconstが追加され
ている。
let
• letは代入できるが再宣言できない
let
• 関数スコープではなくブロックスコープ
varだと
意図せずX=1が出力される
letだと
ちゃんとエラーになる
スコープがブロック、関数の範囲になる!
const
• constは再代入できない
• 定数として利用できる
• Immutableなオブジェクトとして利用できる
const
所感:var,let,constどれを使うべきか?
• varはもう出番はない
• 基本はconst、必要に応じてlet
• コーディングミスを防ぐためにも、immutable(不変なオブ
ジェクト)なプログラミングの流れ的にも constベー...
class
• JSでclassっぽいものは関数を宣言することで実現してきました
が、Classが言語仕様となりました。
class
アロー関数
Promise
• Promiseはまだ完了していないが、いずれ完了する処理を表す
• callback地獄から脱却出来る、並列処理が書きやすくなる
• すごい大事なんですが、説明が難しので今回は割愛
• MDM promise
• https...
ES6/ES2015の普及具合
出典:http://kangax.github.io/compat-table/es6/
ES6/ES2015の普及具合
• Chrome,Firefox,Edge,Safari(10)などのモダンブラウザのみを
ターゲットにする場合は、ES2015はほぼほぼいける
• IE11やそれ以前のブラウザのシェアを考慮すると互換性の面で
...
結局互換性の問題
• トランスパイラの登場
• トランスパイラはコードをコードに変換する
• JSの世界ではES6以降をES5に変換してくれる
Babel
Babel
• もとの名前は6to5, ES6をES5に変換するためのツールだった
• ES6以降もサポートしていくということでBabelという名前に
• ES6/ES2015のイケてるJSでコーディングしながらES5対応ブ
ラウザで動作させる...
Babel ES6をES5に変換
Babelデモ
Webでデモが出来る
https://babeljs.io/repl/
Babelデモ
class Person {
constructor(name) {
this.name = name;
}
hello() {
console.log('My name is ' + this.name);
}
}
const...
ECMAScript
Edition 公開日
1 1997年6月 初版
2 1998年6月 EditionはそのままISO/IEC 16262 international standardへの対応
3 1999年12月 正規表現、よりよい文字列...
ちょっとES5についても語っておこう
• 1999年のES3(ES4は破棄)より10年の時をへて2009年策定され
たバージョン
• まさかの復権を遂げたJSが使われ方が進化していく中で多くの
曖昧な部分、および仕様に準拠しつつも現実世界の実装...
use strict
• “use strict”; と宣言することで使用可能に
• 具体的には次ようなミスがエラーとして処理されます
• 宣言されていない変数への代入
• 書き込み不可変数・getterのみの変数への代入
• 削除できないプロ...
use strict
今っぽいJS界隈だとコレを書いてないと石を投げられるらしい
use strict
• 既視感がある
• この道はいつか来た道
use strict の既視感
• Perl
• PHPもStrict modeがあるとか無いとか
• LL言語 型無し言語の通る道なのかなー
ES5ブラウザ対応状況
IE8NG
IE9 ミニマム行けそう
IE10以降が妥当
でもCSSとかの問題も
あるので
ES5でもIE11以降ベター
弊社HRMOSでは
IE11以降がサービス対象
(B向けだけど)
ESバージョン
• 現状のモダンJSを使うならES->Babel使うにしてもES5対応ブ
ラウザが最低ライン
• IE8対応必須とか言ってる状況なら、ES5/ES6/ES2015は諦め
たほうが無難
ちょっと脱線
ES6/ES2015以降altJSは必要か?
• 数年前であればaltJSの必要性は理解できる
• 現状ES6でclassの概念も入り今後もESは新しい概念を導入し
ながら毎年バージョンアップしていく中でaltJSの学習コストを
かけてまで使う...
ES6/ES2015以降altJSは必要か?
• 弊社のフロントエンドエンジニアのイケてるワカモノに聞いて
みた。
• 補足弊社の人材採用管理システムHRMOSは
React+TypeScript+Scala/playで開発中
http://w...
ES6/ES2015以降 altJSは必要か?
• ES6/2015以降でも実現されてない機能はあるのでメリットは
有る(静的型付けなど)
• 大規模開発などで構文チェックなどメリットは大きい
• 今新たにHRMOSを作るとしてもTypeScr...
ES6/ES2015以降 altJSは必要か?
• 学習コストもTypeScriptはES6のスーパーセットなのでそこま
でかからない
• 逆にTypeScriptはESのスーパーセットなのでES/Javascriptの
悪いところをまだ引きず...
ES6/ES2015以降 altJSは必要か?
• 個人的にはES6でいいじゃんって感じ
• でも実際の現場ではニーズはある模様
ワカモノ聞いたファンキーな話
• TypeScriptを一旦ES6に出力してES5トランスパイルすること
もあるらしい
• TypeScriptにないツールとか(カバレッジツールとか)を使う
ために一旦ES6に出力してツールかましてES5にする...
現状はES5に変換するのが基本
• とりあえず現状はES6でもaltJSでもES5に変換して稼働させる
React
• ReactはFacebookの社員が作ったイケてるJSライブラリ
• 公式サイトに、「A JavaScript library for building user
interfaces」とあるように、React.jsはUIを構築...
React x Flux
• Reactと一緒にFluxについてよく語られますが今回は割愛
• Flux
• Architecture
• MVCのような設計手法
• 以下の4つからなる
• ActionCreators
• Dispatche...
2015年末のReactTOP
現在のTOP
Reactの特徴を端的にいうと
• コンポーネントを組み合わせて構築するコンポーネント指向
FW(View ライブラリ)
• VirturalDOMを用いた画面の差分描画を行い高速な画面表示を
提供する
つまりUIをコンポーネント化しイベントハ...
変更があった場所だけを更新
Component Component
Data Data
A
B C
E FD
A
B C
EE FD
ユーザーのActionで
データが変わった
差分部分のみ更新
JQueryと何が違うのか?
• JQueryの場合データをDOM自体に形になることが多い
• <li>に入ってる文字列がデータ!
• データの更新があった場合.detach()して.clone()して.text()し
て.appendTo()...
DOM(Document Object Model)
• W3Cから勧告
• HTML文書やXML文書をアプリケーションから利用するための
API
• DOMツリーと呼ばれるツリー構造として扱う事ができる
• JSで言うところのdocument...
VirtualDOM
• DOMを直接いじるとコストが大きい
• React.jsではVirtualDOMとしてメモリ上にDOM Treeのような
情報をもっていて前後の状態を比較し差分の部分だけを実際の
DOMに反映してくれます。必要最低限の...
DOM中心からデータ中心に
• 今まで
• DOMを作ってDOMを書き換えDOM自体がデータをもつ
• React
• データが主、データから動的にDOMを生成する
コンポーネント指向
• UIのパーツをコンポーネントして考える
• コンポーネントで管理しコンポーネントを極力ステートレスに
する(コンポーネントが情報を持たないようにする)
• コンポーネント単位での再利用性が高まる
とりあえず触ってみる
• 何はともあれ触ってみよう
構成(社内の開発構成 A)
ES6/2015 ES5
istanbul
①TypeScriptで記述
TSLint(TypeScript検証ツール)でチェック
②一旦ES6に書き出して
istanbul(カバレッジツール)でチェック
②BABE...
Webpack
webpack は 必要なリソースの依存関係を解決し、アセット(配布物)を生成す
るビルドツール JavaScript,CoffeeScript,TypeScript,CSS,画像などの取りまとめ
を行う
構成(社内開発環境2)
ES6/2015 ES5
①ES6で記述
ATOM(エディター)に
ESLintプラグインを入れて構文チェック
①BabelでES5に変換
Gulpがビルドシステムヘルパー
(タスクランナー)として
上記を自動で処理する...
ビルドツール
• サーバーサイドプログラミングだとビルド環境など前からあっ
たが
• フロントエンド(JS/CSS/HTML/アセット)周りにもそういっ
た概念が入ってきている
とりあえず環境を作る
• とはいえ、React触りたいだけなのになんだかめんどくさそう
とりあえず開発環境つくる便利なものが
• create-react-appが便利!!
• https://facebook.github.io/react/docs/installation.html
• 始めるまで時間がかかるBabel/We...
create-react-app
• 詳しくは弊社ワカモノが書いた資料を御覧ください
THX!😘
https://speakerdeck.com/adwd/create-react-app-introduction
Hello World
• デモ
Helo world
• https://codepen.io/katamuki/pen/PGMGvY
Doc
JSX
• JSXはECMAScript(JavaScript)にXMLライクのシンタックス
を追加する言語拡張です。JSXを使うと、JavaScriptコード中に
HTMLタグを埋め込んでいるかのように記述できます。
JSX:Hello World
JSにHTMLみたいなのをかける
https://codepen.io/katamuki/pen/qqNLNp
JSX:classはClassName
• Jsxないでclassは使えないのでclassNameとする(JSの予約
後)
Rendering a Component
• http://codepen.io/gaearon/pen/YGYmEG?editors=0010
Welcomeという
コンポーネントを作って
タグとして記述、使用できる
Functional and Class Components
https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-compo...
Composing Components
コンポーネントをまとめて
コンポーネントすることも可能
http://codepen.io/gaearon/pen/KgQKPr?editors=0010
propsとstateの概念
• props(プロパティ)
• 親コンポーネントから渡されたプロパティ
• 変わらない値
• state(状態)
• そのコンポーネントが持っている状態
• 変わることがある値
props
いままで使っていたのはprops
State and Lifecycle
http://codepen.io/gaearon/pen/KgQpJd?editors=0010
Stateで指定
時刻が更新されないバージョン
http://codepen.io/gaearon/pen/amqdNA?editors=0010
componentWillMount()
ComponentがDOMツリーに追加される前に
一度だけ呼ばれる。
初期化処理を行うのに使う
com...
State and Lifecycle
• Lifecycleって名前になってるけど、ちょっとこの辺りGUIアプ
リのイベントハンドラに似てる
Handling Events
• ReactエレメントのイベントハンドリングはDOMエレメントと
同じように行える
http://codepen.io/gaearon/pen/xEmzGg?editors=0010
Handling Events
onClickとか
おっさんでも知ってるよ!
Lists and Keys
https://codepen.io/gaearon/pen/jrXYRR?editors=0011
表示内容には関係ないけど
ユニークなkeyを指定する
Lists and Keys
• Listなどでデータとしては必要ないがKeyを指定する必要があ
る
• IDを割り当てることで変更や追加削除などDomの変更を最小限
にすることが出来る
• 指定しないと警告が出る
Tutorial
Tutorial
https://codepen.io/ericnakagawa/pen/ALxakj
まとめ
• JS進化しすぎ。3-4年くらい目を話しただけで超絶進化しすぎ。
まとめ(JavaScript言語について)
• 誕生当時はちょっとWebページに動きをつけるための言語だっ
たJSも、Webアプリケーションに求められるUI/UXが高度化す
るの中で、JSのコードは肥大化し複雑化している。
• その中で言語とし...
まとめ(JavaScript言語について)
• 言語的にはclassなど(遅すぎる気もするけど)ちゃんとした言
語に向かう方向性もありつつ、最近のプログラミング言語の潮
流(関数型、immutableとか)も取り入れながら進化している
印象
•...
まとめ (React)
• MVCのVを提供するライブラリというシンプルな位置づけだが
コンポーネント、VirtualDomによる開発メリットはかなり大き
い
• JQuery等でのDOM操作、イベント管理などを煩雑化しやす
かった部分を、コン...
まとめ(UI/UX GUI)
• 個人的にReactを触る中で感じたことは、
Visual C++/C#/BasicあたりのGUIアプリ開発に考え方がにて
いると思った点(コンポーネント、イベントハンドラとか)
• Webに求められるUI/UX...
まとめ(UI/UX GUI)
• デザイナー・フロントエンドエンジニア・プログラマの切り分
けみたいなのは難しくなる気がする。
• コンポーネント化+イケてるUI/UX=情報設計(IA)をしっかりす
る
だと思うので
• デザイナーに対してIA...
まとめ(JSフレームワーク)
• まずはJSフレームワークを使う場合は本当に必要かを考えたほ
うがいいかも。
• 何のために使うのか?
• 新しいUI/UXを提供する必要がある?普通のUI/UXじゃだめなのか?
• SEO施策が必要か?
• ブ...
まとめ
• JSフレームワークの進化に追従する意志がないと使うのは難し
い
• 作った後も更新、キャッチアップを続ける意志が必要
• 二年前作ったAngularのソース誰もメンテ出来ないよとかそう
いう状態になっちゃう。
• このあたりサーバー...
まとめ(JSの開発環境 ビルド周り)
• JSの開発環境 ビルド周りはちょっと複雑化しすぎ
• JS/CSS/HTML含めて複雑化してきている。
• 弊社でもビルド職人と呼ばれる人が一手にやっているらしい
• ただ現状のビルド周りの複雑化は過渡...
まとめ(Webアプリケーション)
• AltJS,webpack(ビルドツール)などをみていると、最後は
HTML/JS/CSS/アセット(imgとか)の形で書き出せば開発はど
んな言語でも開発しやすい用に作っちゃったほうがいいよね!
という世...
まとめ
• JS界隈から離れて3-4年ぐらいだけど進化しすぎ
• パラダイムシフトが2回くらい起こってる印象
• ReactはJQuery登場くらいのインパクトだとおもう
• 正しい進化だと思うのでキャッチアップしていかないとヤバイ
• Web...
まとめ
• ただカーボーイのみなさんが地雷を踏みまくり屍の山を築き情
報共有をしてくれて、その上に高速道路が引かれるので後から
でも結構キャッチアップできる。
• カーボーイの皆さんありがとう
まとめ
• IT業界はほんとに変化が早い、正直つらいっす
• 2010年当時なら自分はフルスタックエンジニアと言えたが今は
言えない。周りがドンドン進むので学び続けないと取り残され
る。
• 新しいことを学ぶのに、過去の経験は役に立つそこはおっ...
まとめ
• マネージャーとかやってても、自分のスペシャリティを意識す
ることは大事
• エンジニアとしてのスペシャリティを維持するためには頑張ら
ないと。
• 皆さん頑張っていきましょう
BizReachは優秀なエンジニアを募集してます
THANK YOU 😘
おっさんES6/ES2015,React.jsを学ぶ
Upcoming SlideShare
Loading in …5
×

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

12,533 views

Published on

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

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

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

Published in: Technology
  • Be the first to comment

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

  1. 1. おっさん ES6/ES2015,React.jsを学ぶ 2016JavaScript入門 2016/11/21 @BizReach D3 園田剛史
  2. 2. 園田剛史 趣味:自転車 3児の父 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. おっさんの定義(狭義) • 狭義の意味でのおっさんは35歳以上 • ワカモノは20代と定義します • 登壇者は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!で意見が別れて最終的には第4版は破棄 • その後第5版がリリースされるのは10年後の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年 CoffeeScript (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の 悪いところをまだ引きずられてる仕様もあるのでCoffeeScript や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フレームワークだと圧倒的1位 (弊社ワカモノ談)
  66. 66. React x Flux • Reactと一緒にFluxについてよく語られますが今回は割愛 • Flux • Architecture • MVCのような設計手法 • 以下の4つからなる • 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,CoffeeScript,TypeScript,CSS,画像などの取りまとめ を行う
  79. 79. 構成(社内開発環境2) 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-4年ぐらいだけど進化しすぎ • パラダイムシフトが2回くらい起こってる印象 • ReactはJQuery登場くらいのインパクトだとおもう • 正しい進化だと思うのでキャッチアップしていかないとヤバイ • Web業界にいるならJSの土俵に立たなくてもいいので話くらい は出来るようにはしておくべき
  115. 115. まとめ • ただカーボーイのみなさんが地雷を踏みまくり屍の山を築き情 報共有をしてくれて、その上に高速道路が引かれるので後から でも結構キャッチアップできる。 • カーボーイの皆さんありがとう
  116. 116. まとめ • IT業界はほんとに変化が早い、正直つらいっす • 2010年当時なら自分はフルスタックエンジニアと言えたが今は 言えない。周りがドンドン進むので学び続けないと取り残され る。 • 新しいことを学ぶのに、過去の経験は役に立つそこはおっさん のメリット(時には足を引っ張ることもありますが)
  117. 117. まとめ • マネージャーとかやってても、自分のスペシャリティを意識す ることは大事 • エンジニアとしてのスペシャリティを維持するためには頑張ら ないと。 • 皆さん頑張っていきましょう
  118. 118. BizReachは優秀なエンジニアを募集してます THANK YOU 😘

×