フロントエンドエンジニアとして働き始める前に勉強した事
今回学習した理由
私は今までWebアプリケーションの開発を行なうソフトウェアエンジニアとして、いわゆるバックエンド・フロントエンドの区切りなく開発に関わらせて頂きました。
しかし、この度転職をしまして、次の会社ではフロントエンドエンニアとして働かせて頂ける事となりました。
そこで、フロントエンドエンジニアとして実際に働き始める前にフロントエンドエンジニアが求められる事項に関して網羅的に学習をしておきたいと思ったのがきっかけです。
学習した事の概要
Developer RoadmapsのFrontend Developerに沿ってフロントエンド知識全般の補填を行いました。(※今回は私が今まであまり注力を置いて学習してこなかった事項を重点的に学習しました)
あくまでも各項目の入門的な事項を学んだのでより深い知識は今後の業務＋学習でつけていければと考えています。
- そもそもフロントエンドエンジニアて何するの？
- HTML/CSS
- CSS設計
- SEO
- アクセシビリティ
- デザイン基本
- CSS PROCESSORS
- Build Tools
- Modern CSS
- State Management
- テスト
- WebComponents
- CSS Frameworks
- フロントエンドパフォーマンス
- PWA
- GraphQL
- SSR
- SSG
- Desktop App
- Web Assembly
- NoCode・LowCode
そもそもフロントエンドエンジニアて何するの？
下記の本の特集１(フロントエンド エンジニアとしての基礎と準備)を読む事で、改めてフロントエンドエンジニアの仕事範囲・求められるスキル・理想像等を理解する事ができました。
HTML / CSS
基本的なHTMLとCSSを下記の本を参考に改めて体系的に学習しました。
CSS設計
下記の本や記事を参考にOOCSS、BEM 、SMACSSといった基本的なCSS設計の学習を行いました。
SEO
下記の本を読み、SEOの基礎的な考え方を学びました。
アクセシビリティ
個人的な経験としまして、今までウェブアクセシビリティを強く意識して開発したことはありませんでした。
下記の記事や本を読むことでアクセシビリティがなぜ必要なのか、また何を基準にどのようにアクセシビリティにアプローチしていくべきか学ぶ事ができました。
デザイン基本
オブジェクト指向UIデザインを読むまでは、デザインに関して業務では大きく関与せず、自身の個人プロジェクトでは他のサイトを参考にしたり、フィーリング？で開発していた節がありました。
しかし、オブジェクト指向UIデザインを読む事でデザインに関して具体的に意識するポイント等をより理論的に理解する事ができました。
また、ノンデザイナーズ・デザインブックを読む事で実際にUIのデザインを行う際に軸にするポイント等が理解する事ができました。
結果的に、私自身ウェブデザインやUI/UXの開発に大してより興味が深まりました。
CSS PROCESSORS
Sassは以前にも使用した事はありましたが、最近はあまり使用する機会がなかったので、公式ドキュメントを改めて読み直して知識の補填を行いました。
Build Tools
Frontend Developerに記載されているBuild Toolsの内npm/Yarn/Prettier/ESlint辺は日頃から使用する機会が多くありました。
今回はやや古い記事(最近ではあまり使われないツールも含む)ですが、下記の記事を読み改めてJS周りBuild Toolsの概要(それぞれの役割)に関して学習しました。
Modern CSS
今までの業務ではstyled-componentsを使用する事が多かったです。その為公式ドキュメントを通して、styled-componentsの今まで使用していなかった用法の学習、またEmotion、CSS Modulesに関して学習を行いました。
State Management
Reduxは以前から使用したことがありましたが、Recoilは名前を知っていてQiitaの記事等で概要を見たことがある程度でしたので、この機に公式のドキュメントに目を通しました。
また、デモレベルですが使用してみました。
その他State Managementに関して参考になる下記の記事を拝読しました。
テスト
下記の3つは一通り業務で使用した事がありましたが、最近enzymeをあまり使用していなかったので、復習し直しました。
WebComponents
正直Webcomponentsという名前だけは聞いたことがある程度の理解しかありませんでしたが、下記の記事等を読むことでWebComponentsの基本的な考え方等を理解することができました。
CSS Frameworks
BootstrapやMaterialUIは触ったことがありましたが、Tailwind CSSとChakraUIは触ったことがなかったので入門しました。
フロントエンドパフォーマンス
やや被る部分もありましたが、個人的に非常に関心の高い分野だったので両方とも拝読させて頂きました。
なぜパフォーマンスを気にする必要があるのかから始まり、ブラウザでWebサイトが表示されるまでの基本的な処理、その各処理事にパフォーマンスを改善する方法等を理解する事ができました。
Progressive WebApps(PWA)
下記の記事や動画を参考にPWAの概要から理解し、以前作成したReactのアプリをPWA化することで理解を深めました。
GraphQL
以前から業務でGraphQLとApolloを使用していましたので、今回はドキュメントをざっと読み直すに留めました。
個人的に両者共に公式のドキュメントがとても理解しやすく学習しやすいと感じました。
SSR(Server Side Rendering)
下記の本はタイトル通りBFFに関しての本なのですが、SSR(Server Side Rendering)にも触れられており、とても参考になりました。
SSG(Static Site Generation)
以前個人のブログをGatsbyで作成しましたが、SSGの概要に関して改めて下記の記事を読んで復習しました。
Desktop App
Electronでデスクトップアプリを作成する為に公式のドキュメントにざっくりと目を通し、下記のYoutubeのチュートリアルをやってみました。
ElectronではWebの技術(HTML, CSS, JS)を使用するので、Webアプリを開発する要領で開発する事ができ、個人的にすんなりと開発を行うことが出来ると感じました。
Web Assembly(WASM)
改めて基本概念の学習を行い、Rustを使用して実際に簡単なチュートリアルを行いました。
No Code・Low Code
ノーコードとローコードに関してそれぞれの特徴等から学び、実際にいくつかのサービスを使用してみました。
【翻訳】外注したら約400万円かかるシステムを、コーディングなしで自前でつくったお話
参考
Discussion
非常に広い領域の内容がまとまっていて参考になりました！
自分も参考にさせていただこうかと思います！
アクセシビリティのガイドラインについては2016年版のものがありましたのでそちらのほうがよりソースとして正確性があるかなと思いましたのでもしよろしければご確認下さい！ また、下記の記事がリンク切れ？のようなのでもし記事のリンクがあれば見てみたいので確認していただけるとありがたいです！
コメント頂きましてありがとうございます。
アクセシビリティのリンクを2016版に変更させて頂きました🙇♂️
下記の記事のリンクで宜しいでしょうか？Markdownでうまくリンクが表示されていないようでした🙇♂️
ご指摘頂きありがとうございます。
【翻訳】外注したら約400万円かかるシステムを、コーディングなしで自前でつくったお話