Upgrade to Pro — share decks privately, control downloads, hide ads and more …

レガシーエンジニアがモダンなJSに触れてみた

F0a8fbac6e612deca20286be6f197cc1?s=47 tammax
July 22, 2019
Programming
0
110

 レガシーエンジニアがモダンなJSに触れてみた

F0a8fbac6e612deca20286be6f197cc1?s=128

tammax

July 22, 2019
Tweet

Other Decks in Programming

See All in Programming
Becoming an Android Librarian
D4df9c152982182ce1125e49fe83527c?s=48 skydoves
3
480
ソフトウェアテストなんて他人事！
だと思っていた私が始めた小さな取り組み
A524e2bed737555446c8720e3960397e?s=48 izumii19
0
340
Jetpack Compose 頑張らないPreviewParameterProvider
785263a3fda3ca9334daeac85c32927f?s=48 horie23
0
110
Reactive Microservices with Spring Boot and JHipster - Spring I/O 2022
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
1
270
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
0
1.7k
Monadic Java
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
4
270
LOWYAの信頼性向上とNew Relic
F95bdf0d9003fa506a9f7448335da1af?s=48 kazumax55
4
370
Viteはいいぞ/Vite is Good
309384d4f7b37d3532fd81800d356bcf?s=48 dojineko
1
110
You CANt teach an old dog new tricks
Bd5b8981a308c94b642befb656d8cf8f?s=48 michaelbukachi
0
120
SRE bridge the gap: Feature development to Core API / 機能開発チームとコアAPIチームの架け橋としてのSRE
5520f7e791c2f63da603f6b089b07c6f?s=48 kenzan100
1
460
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
130
Reactでアプリケーションを構築する多様化
2917a3c430817eb71086f8973c06ebba?s=48 sakito
4
3.5k

Featured

See All Featured
Reflections from 52 weeks, 52 projects
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
337
17k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.3k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
289
48k
Thoughts on Productivity
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
43
2.2k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
39k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.9k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
212
7.5k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
33k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
57
3.8k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.2k

Transcript

  1. レガシーエンジニアが モダンなJSに触れてみた 2019.07.22

  2. 自己紹介 • 氏名　　　　　　　水越　拓矢 • 会社名　　　　　　(株)クリエーション・ビュー • 主な開発言語　　　PHP JavaScript Java Perl

    • エンジニア歴　　　８年くらい • 趣味　　　　　　　散歩、料理、開発、お酒

  3. そもそもレガシーていつから?

  4. 今回は、ES2015より前とさせて下さい

  5. もっと言うと、ちょっと前までIE8対応してい たエンジニアだと思って下さい

  6. 最近のクライアントサイドには華がある。 Qiitaでもよくトレンドに上がり、 JSのフレームワークを使ってアプリの作成などな ど、非常に盛り上がっている。

  7. 折角なので私も 今更ながら 作ってみた。

  8. アプリの概要 • Vue + Vue Router + Vuex + Firebase

    のタイピングアプリ • 作業期間は3週間くらい • サーバレス • SPA • PWAアプリ

  9. アプリ紹介 Typo(β)版 https://typo-60d72.firebaseapp.com/#/

  10. net work図

  11. パッと触ってみた感想 • 開発時に、特にやりにくい感じはしなかった。 • ES2015以降の構文も、多言語で同じような機能があった 為、割とすんなり理解が出来た。

  12. 調子に乗った私は 折角なのでAtomic Designにて ソースを組み直してみました。

  13. 結論を言うと、やらかしました

  14. 無駄なAtomを作りすぎました

  15. TypoStartButton.vue TypoRankingButton.vue TypoTrainingButton.vue TypoSettingButton.vue

  16. Atomic Designの説明を調べてみると、 再利用可能なデザインパターンを確立し、それらのパ ターンの中に入れる実際のコンテンツを正確に反映する システムを作成する。 と記載されています。

  17. はい、全く再利用可能ではございません

  18. こうして紛い物のAtomが 大量生産されていきました

  19. しかし、Atomが50ファイル超えてあたりで流 石に気づきました。 あれ、Atom全く再利用してなくね？

  20. はい、全く再利用しておりません

  21. 気づいたのが発表二日前なので 現在、絶賛修正対応中でございます

  22. まとめ • LTでタイピングソフトの発表はやるべきでは無い(尺的に) • ES2015年以降の構文は思ったよりもしっくりくる • UI設計に関しては、色々勉強が必要 • 早くIEから解放されたい

  23. ご静聴ありがとうございました