はじめに

こんにちは！◤●ㅅ●◥ﾉ
初心者でもわかりやすいものを勧めてもらったので読んでみました！

全部で340pくらいで、
１日に1,2時間くらいのペースで読んで１週間で読み終わりました。

内容はフロントエンドの技術についてさらっと全体を学んで、それに加えて
・「エンジニアとして知っておくべきこと」
・「どの分野にフォーカスしてスキルアップをするか」
という２点を中心に教えてくれる内容でした

自分は読むにあたって
・フロントエンドにはどのような技術があるのかを知ること
・その上で興味を持つ分野を探す
の２つを目的に読んでみました

読んで学びとなったところをまとめてみました

学び〜フロントエンド開発の基本

フロント開発とは

フロントエンド-ユーザーがみたり操作したりする画面の部分
フロントエンドの開発者⇨フロントエンドエンジニア

フロントエンドエンジニアのスキル

・コンテンツマネジメントシステムの使い方、連携の仕方
・ HTML,CSS ,JavaScriptの代替言語の知識
・ソフトウェアテストへの理解、テストコードの書き方
・ Webアクセシビリティへの理解など

フロントエンドの中心の言語

HTML
・タグに囲まれた部分で表現をする
・Webページ上のコンテンツに対し以下のタグで構造上の役割を意味付けできる
CSS
・Webページの見た目を制御する
JavaScript
・ユーザーの操作に応じた動作を追加するなど高機能なWebページを実現できる

学び〜フロントエンド開発の技術

JavaScriptのフレームワーク

プロジェクトの骨格
フレームワークを利用することで,JavaScriptからCSSを記述することが容易になる
比較的静的なWebサイトの制作でもJavaScriptフレームワークを利用する場面がある

代表例
React
　JSXと呼ばれるJavaScriptをHTMLのように書ける構文
Vue.js
　単一ファイルコンポーネントという独自のファイル形式が使用される
Svelte
　ReactやVue.jsに比べるとやや後発のフレームワーク
　ソースコードを簡潔に書ける

フレームワークのトレンドを追う

・npmtrends
・State of JavaScript

CSSのフレームワーク

クラス名をつけただけで、ボタンの見た目を作れる

メリット
工数の削減
デザインを活用、実装の工数の削減
一貫したデザインを構築できる

デメリット
デザインのカスタマイズの幅の限界

代表例
Bootstrap
　単体でデザインが完結している
Tailwind CSS
　ユーティリティファーストな設計のCSSフレームワーク
MUI
　Material Designというデザインシステムをもとにした
　React向けUIフレームワーク
Vuetify
　Vue.js向けのUIフレームワーク

CSSのトレンド

State of CSS
CSSの利用に関する開発者へのアンケートをまとめたサイト

まとめ

フロントエンドの基本についてわかりやすく書いてあって自分的にはとても良かったです。
また、技術を知るという点について基本的なHTMLやCSS、JavaScriptやそれを拡張して使いやすくするフレームワークについてしれたのが良かったと思いました。
フレームワークはReactが聞いたことはあるけど、触ったことがほぼないので今後はReactについて興味を持って学んでいきたいかなって思いました。
まとめとしては書いてないですが、開発の流れや役割なども解説してくれたり、開発環境の構築、体験、標準仕様の歴史なども簡単に教えてくれるので興味を持った方はぜひ読んでみてください！
ここまで読んでいただき、ありがとうございました！
ではまた〜　◤●ㅅ●◥ﾉ"