Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
おっさん
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を学ぶ
Prochain SlideShare
Chargement dans…5
×

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

15 171 vues

Publié le

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

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

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

Publié dans : Technologie
  • Soyez le premier à commenter

おっさん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 😘

×