Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
なぜClassiはReactが盛り上がってる2017年にAngularを選択したのか?/why...
Search
Eiji Hachiya
January 31, 2019
2
1.6k
なぜClassiはReactが盛り上がってる2017年にAngularを選択したのか?/why we use angular
Classi Angular Night #1 で話した資料です。
Eiji Hachiya
January 31, 2019
Tweet
Share
More Decks by Eiji Hachiya
See All by Eiji Hachiya
Angular Elementsにハマってみた/I use the Angular Elements
hachi_eiji
0
1k
【Real Tech Night #2】学校教育を支えるマルチテナント/multi-tenant_in_edtech
hachi_eiji
1
270
レガシー業界の社内を変える /realtech
hachi_eiji
0
470
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
Code Reviewing Like a Champion
maltzj
521
39k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Music & Morning Musume
bryan
46
6.4k
For a Future-Friendly Web
brad_frost
176
9.5k
Building Applications with DynamoDB
mza
93
6.2k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Transcript
Copyright © 2019 Classi Corp. All Rights Reserved. なぜClassiはReactが盛り上がってる2017年に Angularを選択したのか?
2019/01/31
Copyright © 2019 Classi Corp. All Rights Reserved. •八谷 英治(はちや
えいじ) @hachi_eiji •Classi株式会社 エンジニア •Rails、Angular、自称 Chief 球拾い Officer •AngularをClassiに持ち込んだ張本人 1 自己紹介
Copyright © 2019 Classi Corp. All Rights Reserved. 2 ◯
高校への営業 ◯ 学習支援アプリ開発 ◯ 活用コンサルテーション ◯プラットフォーム開発 ◯ ネイティブアプリ開発 ◯ 学校へのICT関連サポート 会社概要 ベネッセとソフトバンクのジョイントベンチャー
Copyright © 2019 Classi Corp. All Rights Reserved. •全国の高校40%超に導入 •お客様(契約者)は学校
•ユーザは先生・生徒・保護者 •47都道府県制覇 3 サービス紹介
Copyright © 2019 Classi Corp. All Rights Reserved. 4
Copyright © 2019 Classi Corp. All Rights Reserved. 5 Angularを選ぶ前の2016年
Copyright © 2019 Classi Corp. All Rights Reserved. 2016年開発時のフロントエンドフレームワーク 6
Copyright © 2019 Classi Corp. All Rights Reserved. 2016年開発時のフロントエンドフレームワーク フレームワーク・ライブラリ
• AngularJS(1.2, 1.3, 1.5) • Backbone.js • React + Mobx • jQuery • CSSの重い有料ライブラリ • Classi独自のCSSスタイル 言語 • JavaScript(Not ES2015) • CoffeeScript 7
Copyright © 2019 Classi Corp. All Rights Reserved. なぜ? •
機能ごとに開発する会社が違っていた • 業務委託・受託開発で開発をお願いしていた • 少なくとも4社に開発を依頼している • フロントエンド フレームワークの混沌期に飲み込まれた 8 社内で技術のコントロールができてない
Copyright © 2019 Classi Corp. All Rights Reserved. Angular vs
React vs Vue.js 9
Copyright © 2019 Classi Corp. All Rights Reserved. 何を大事にしたか? •
開発時に人が入れ替わることは日常茶飯事 • サービス作るというところに注力したかった • みんなが使いやすい 1年で機能がクローズすることはないので長期メンテが基本 10
Copyright © 2019 Classi Corp. All Rights Reserved. 11 npmのダウンロード数(2018年1月〜2019年1月)
https://www.npmtrends.com/@angular/core-vs-react-vs-vue
Copyright © 2019 Classi Corp. All Rights Reserved. Googleトレンドで見る3強 12
Copyright © 2019 Classi Corp. All Rights Reserved. 個人的な予想 予想
理由 React ◎ 同時どの会社もReactを採用していた Angular ◯ まだ採用事例が多くなかった。AngularJSのトラウマ Vue.js ? 薄すぎるのでちょっとないかなぁ 13
Copyright © 2019 Classi Corp. All Rights Reserved. • 一番の大きな要因はTypeScriptの採用
• Reactを採用しても結局state管理ライブラリ、ルーター、etc... と ライブラリを選ぶ必要があり、そこで疲弊しそうだった • パフォーマンスに関してもReactのほうが早いが実用レベルで そこまで差が出ないだろうと判断した • 開発のスタイルとして毎週リリースというのはないので、ライト に書けるよりも安定性や堅牢性を重視 結論 14
Copyright © 2019 Classi Corp. All Rights Reserved. • エンジニア採用
• 猫も杓子もReact • 採用エージェントもエンジニアも下手するとAngularとAngularJSの区 別すら... • ググラビリティが悪い • Angularで検索するとAngularJSとかもヒットする • 検索はAngular2で検索する • 導入事例が少ない いいことばかりではない 15
Copyright © 2019 Classi Corp. All Rights Reserved. • 3強は変わらない
• すべてのフレームワーク/ライブラリでTypeScriptが使える • Angular CLI、Vue CLI、Nuxt が出てきた • 採用をやってるとVue.jsをやってる人が一気に増えた • 肌感で3人に1人はReact,Vueのどちらかを経験済み • 最近はVueやってる人が多い。特にNuxt。 • Angularやってる人はたまーx10に来る orz React vs Angular vs Vue.js vs others ? in 2019 16
Copyright © 2019 Classi Corp. All Rights Reserved. • TypeScriptのバージョンアップに追従している
• テストフレームワークも決まってる • Angular Update Guide の存在は大きい • ng update xxx で必要なものをバージョンアップしてくれる • Angular Wayの上にきちんと乗れば強い • Angular日本語ドキュメントができたので大きい • 採用は頑張れ、俺 2019年で選定してもAngular 17
Copyright © 2019 Classi Corp. All Rights Reserved. • Polyfillがマジ便利とか
• IntelliJ IDEA(WebStorm)で書くとTSLintと相まって最強 18 続きは懇親会で