フロントエンド・JavaScriptキャッチアップ

JavaScriptの世界から4−5年ほど離れていたので、キャッチアップ時に参照した資料をまとめました。

 

 

リクルートテクノロジーズの新人研修資料がかなり良くまとまっていました。ここからキーワードをピックアップしつつ、深堀すべきところを別途見ていく形でキャッチアップしました。

https://speakerdeck.com/rtechkouhou/rtc-frontend-development

https://speakerdeck.com/rtechkouhou/javascript-bootcamp-2018

 

• SPA(Single Page Application) リクルート研修資料で十分
• SSR(Server Side Rendering), BFF(Backend For Frontend) https://speakerdeck.com/yosuke_furukawa/ssrfalsehua
• Isomorphic
• PRPL(Push, Render, Pre-cache, Lazy-load) https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja
• PWA(Progressive Web Apps) とAMP(Accelerated Mobile Pages) https://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445
• Atomic Design
• (ざっくり理解) https://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/
• (ざっくり理解)https://qiita.com/rhirayamaaan/items/7f990e146ec01f2e7e08
• https://app.codegrid.net/entry/2017-atomic-design-1
• (時間があれば読みたい)http://atomicdesign.bradfrost.com/table-of-contents/

    

 

• EcmaScriptについて
• 関数宣言について https://qiita.com/raccy/items/aac3b8e3981564bbd1fa#fn6
• ジェネレータについて https://qiita.com/kura07/items/d1a57ea64ef5c3de8528
• ショートハンド
• ツール周りについて
• flow(型チェッカー) https://qiita.com/kiida/items/ea758e4d80053663e12a
• React + Redux https://qiita.com/mpyw/items/a816c6380219b1d5a3bf
• React Universal Component https://github.com/faceyspacey/react-universal-component
• lighthouse(Webアプリ品質調査ツール)

 

• Firebase hosting(静的・動的アプリ向けCDN) https://firebase.google.com/docs/hosting/?hl=ja
• GraphQL https://githubengineering.com/the-github-graphql-api/
• HTTP2 https://blog.redbox.ne.jp/http2-cdn.html