フロントエンドエンジニアとして働き始める前に勉強した事

# 今回学習した理由

私は今までWebアプリケーションの開発を行なうソフトウェアエンジニアとして、いわゆるバックエンド・フロントエンドの区切りなく開発に関わらせて頂きました。

しかし、この度転職をしまして、次の会社ではフロントエンドエンニアとして働かせて頂ける事となりました。

そこで、フロントエンドエンジニアとして実際に働き始める前に求められる事項に関して網羅的に学習をしておきたいと思ったのがきっかけです。

# 学習した事の概要

[Developer Roadmaps](https://roadmap.sh/)の[Frontend Developer](https://roadmap.sh/frontend)に沿ってフロントエンド知識全般の補填を行いました。(※今回は私が今まであまり注力を置いて学習してこなかった事項を重点的に学習しました)

あくまでも各項目の入門的な事項を学んだのでより深い知識は今後の業務＋学習でつけていければと考えています。

- [そもそもフロントエンドエンジニアて何するの？](#そもそもフロントエンドエンジニアて何するの)
- [HTML/CSS](#html--css)
- [CSS設計](#css設計)
- [SEO](#seo)
- [アクセシビリティ](#アクセシビリティ)
- [デザイン基本](#デザイン基本)
- [CSS PROCESSORS](#css-processors)
- [Build Tools](#build-tools)
- [Modern CSS](#modern-css)
- [State Management](#state-management)
- [テスト](#テスト)
- [WebComponents](#webcomponents)
- [CSS Frameworks](#css-frameworks)
- [フロントエンドパフォーマンス](#フロントエンドパフォーマンス)
- [PWA](#progressive-webapps(pws))
- [GraphQL](#graphql)
- [SSR](#ssr(server-side-rendering))
- [SSG](#ssg(static-site-generation))
- [Desktop App](#desktop-app)
- [Web Assembly](#web-assembly(wasm))
- [NoCode・LowCode](#no-code・low-code)
 
# そもそもフロントエンドエンジニアて何するの？

下記の本の特集１(フロントエンド エンジニアとしての基礎と準備)を読む事で、改めてフロントエンドエンジニアの仕事範囲・求められるスキル・理想像等を理解する事ができました。

https://www.amazon.co.jp/dp/B00ME9TTMA


# HTML / CSS

基本的なHTMLとCSSを下記の本を参考に改めて体系的に学習しました。

https://www.amazon.co.jp/dp/B0176GNY26/ref=cm_sw_em_r_mt_dp_7R8M8JP0HBW2JH1KKTQC

# CSS設計

下記の本や記事を参考に`OOCSS`、`BEM` 、`SMACSS`といった基本的なCSS設計の学習を行いました。

https://www.amazon.co.jp/CSS%E8%A8%AD%E8%A8%88%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89-%EF%BD%9E%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC%EF%BC%8B%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E9%9B%86-%E5%8D%8A%E7%94%B0-%E6%83%87%E5%BF%97-ebook/dp/B0856YMH7L

https://snipcart.com/blog/organize-css-modular-architecture

https://css-tricks.com/bem-101

# SEO

下記の本を読み、SEOの基礎的な考え方を学びました。

https://www.amazon.co.jp/dp/B00WG2KY0Q/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

# アクセシビリティ

個人的な経験としまして、今までウェブアクセシビリティを強く意識して開発したことはありませんでした。

下記の記事や本を読むことでアクセシビリティがなぜ必要なのか、また何を基準にどのようにアクセシビリティにアプローチしていくべきか学ぶ事ができました。

https://www.amazon.co.jp/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8B%E3%83%B3%E3%82%B0Web%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%96%E3%83%AB%E3%81%AA%E8%A8%AD%E8%A8%88%E3%82%84%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E5%88%B6%E4%BD%9C%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AD%E3%83%BC%E3%83%81-%E5%A4%AA%E7%94%B0%E8%89%AF%E5%85%B8/dp/4862462650

https://uxmilk.jp/84998

https://a11y-guidelines.ameba.design/

https://waic.jp/docs/jis2010/accessibility-plan-guidelines/201308/

# デザイン基本

`オブジェクト指向UIデザイン`を読むまでは、デザインに関して業務では大きく関与せず、自身の個人プロジェクトでは他のサイトを参考にしたり、フィーリング？で開発していた節がありました。

しかし、オブジェクト指向UIデザインを読む事でデザインに関して具体的に意識するポイント等をより理論的に理解する事ができました。

また、ノンデザイナーズ・デザインブックを読む事で実際にUIのデザインを行う際に軸にするポイント等が理解する事ができました。

結果的に、私自身ウェブデザインやUI/UXの開発に大してより興味が深まりました。

https://www.amazon.co.jp/dp/B0893RK6WC/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

https://www.amazon.co.jp/dp/B01LW1BC2L/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

# CSS PROCESSORS

Sassは以前にも使用した事はありましたが、最近はあまり使用する機会がなかったので、公式ドキュメントを改めて読み直して知識の補填を行いました。

https://sass-lang.com/

https://postcss.org/

# Build Tools

[Frontend Developer](https://roadmap.sh/frontend)に記載されているBuild Toolsの内npm/Yarn/Prettier/ESlint辺は日頃から使用する機会が多くありました。

今回はやや古い記事(最近ではあまり使われないツールも含む)ですが、下記の記事を読み改めてJS周りBuild Toolsの概要(それぞれの役割)に関して学習しました。

https://www.freecodecamp.org/news/making-sense-of-front-end-build-tools-3a1b3a87043b/

# Modern CSS

今までの業務ではstyled-componentsを使用する事が多かったです。その為公式ドキュメントを通して、styled-componentsの今まで使用していなかった用法の学習、またEmotion、CSS Modulesに関して学習を行いました。

https://styled-components.com/

https://emotion.sh/docs/introduction

https://github.com/css-modules/css-modules

https://www.javascriptstuff.com/css-modules-by-example/

# State Management

Reduxは以前から使用したことがありましたが、Recoilは名前を知っていてQiitaの記事等で概要を見たことがある程度でしたので、この機に公式のドキュメントに目を通しました。
また、デモレベルですが使用してみました。

その他State Managementに関して参考になる下記の記事を拝読しました。

https://recoiljs.org/

https://leerob.io/blog/react-state-management#past

https://azu.github.io/slide/2016/react-meetup/large-scale-javascript.html

https://techlog.voyagegroup.com/entry/2017/08/31/102915

https://enappd.com/blog/difference-between-redux-and-flux/106/


# テスト

下記の3つは一通り業務で使用した事がありましたが、最近enzymeをあまり使用していなかったので、復習し直しました。

https://jestjs.io/

https://enzymejs.github.io/enzyme/

https://testing-library.com/docs/react-testing-library/intro/

# WebComponents

正直Webcomponentsという名前だけは聞いたことがある程度の理解しかありませんでしたが、下記の記事等を読むことでWebComponentsの基本的な考え方等を理解することができました。

https://dev.to/steveblue/it-s-not-about-web-components-vs-react-5137

https://nulab.com/ja/blog/cacoo/web-components/

# CSS Frameworks

BootstrapやMaterialUIは触ったことがありましたが、Tailwind CSSとChakraUIは触ったことがなかったので入門しました。

https://tailwindcss.com/

https://chakra-ui.com/

# フロントエンドパフォーマンス

やや被る部分もありましたが、個人的に非常に関心の高い分野だったので両方とも拝読させて頂きました。

なぜパフォーマンスを気にする必要があるのかから始まり、ブラウザでWebサイトが表示されるまでの基本的な処理、その各処理事にパフォーマンスを改善する方法等を理解する事ができました。

https://www.amazon.co.jp/Web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-%E3%83%8F%E3%82%A4%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-%E4%B9%85%E4%BF%9D%E7%94%B0-%E5%85%89%E5%89%87/dp/4774189677

https://www.amazon.co.jp/Web%E3%83%9A%E3%83%BC%E3%82%B8%E9%80%9F%E5%BA%A6%E6%94%B9%E5%96%84%E3%82%AC%E3%82%A4%E3%83%89-%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%95%E3%81%AF%E3%80%8C%E9%80%9F%E3%81%95%E3%80%8D%E3%81%8B%E3%82%89%E5%A7%8B%E3%81%BE%E3%82%8B-WEB-PRESS-plus/dp/477419400X

# Progressive WebApps(PWA)

下記の記事や動画を参考にPWAの概要から理解し、以前作成したReactのアプリをPWA化することで理解を深めました。

https://www.netguru.com/codestories/pwa-ios

https://www.codica.com/blog/how-to-create-pwa-with-react/

https://web.dev/pwa-checklist/

https://www.youtube.com/watch?v=sFsRylCQblw

# GraphQL

以前から業務でGraphQLとApolloを使用していましたので、今回はドキュメントをざっと読み直すに留めました。

個人的に両者共に公式のドキュメントがとても理解しやすく学習しやすいと感じました。

https://graphql.org/

https://www.apollographql.com/docs/

# SSR(Server Side Rendering)

下記の本はタイトル通りBFFに関しての本なのですが、SSR(Server Side Rendering)にも触れられており、とても参考になりました。

https://www.amazon.co.jp/dp/B07J2W6374

# SSG(Static Site Generation)

以前個人のブログをGatsbyで作成しましたが、SSGの概要に関して改めて下記の記事を読んで復習しました。

https://www.cloudflare.com/learning/performance/static-site-generator

# Desktop App

Electronでデスクトップアプリを作成する為に公式のドキュメントにざっくりと目を通し、下記のYoutubeのチュートリアルをやってみました。

ElectronではWebの技術(HTML, CSS, JS)を使用するので、Webアプリを開発する要領で開発する事ができ、個人的にすんなりと開発を行うことが出来ると感じました。

https://www.electronjs.org/

https://www.electronforge.io

https://www.youtube.com/watch?v=3yqDxhR2XxE

# Web Assembly(WASM)

改めて基本概念の学習を行い、Rustを使用して実際に簡単なチュートリアルを行いました。

https://developer.mozilla.org/en-US/docs/WebAssembly

https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6

https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm

https://qiita.com/umamichi/items/c62d18b7ed81fdba63c2

https://qiita.com/kawamou/items/7c56827e1e9a4795c026

# No Code・Low Code

ノーコードとローコードに関してそれぞれの特徴等から学び、実際にいくつかのサービスを使用してみました。

https://qiita.com/kento_gm/items/34c46a9bc6b3017c9345

https://note.com/__shinji__/n/ncdf02e005abb

https://mendix.buildsystem.jp/mx-blog-understand-no-code-vs-low-code-development-tools/

https://medium.com/@rrhoover/the-rise-of-no-code-e733d7c0944d

# 参考

https://roadmap.sh/frontend

https://github.com/stevekinney/frontend-architecture-topics