今はコーダーだけど、フロントエンドになりたい！
コーダーとしてWeb制作に従事している時でも準備はできます。
少しづつ小さな実績を増やして経験としたいところです。
できるポイントとしては以下の4つかなと思います。
やってみて欲しいこと
Jqueryで記述しているところをJSで記述してみよう！
Web制作で使用されるjsの動きはだいたいJqueryを使用しているところが多いですが、新規作成の案件などであれば、JSで記述してみる。
例えば、
タブ切り替え、アコーディオン、ハンバーガーメニューなどJqueryを使用するシーンは多くあると思います。
実際のReactやVueの案件ではJSの基本のgetElementByIdとか使用して直接DOMを操作するようなことはあまりしませんが、それでもJSの記述に慣れるということではとても有効です。
どんどんJSを記述する機会を増やしてJSに慣れよう！
既存サイトの修正、追加案件の場合には、そのサイトに合わせる必要もあると思うので要注意です。
CSSのプロになろう！
CSSを極めることは後々エンジニアとして活動する際にとても大きな武器となってくれます。
何度もお伝えしていますが、エンジニアからスタートした人等はCSSの勉強はあまりしていない＆重要視していないことが多いので圧倒的にできない人が多いです。
開発現場だと素のCSSやSCSSをそのまま使用することはあまりなく、Tailwind CSSとかライブラリーを使用するところも多いので、完全にCSSを理解していなくてもなんとなくで実装できたりします。
ですが、案件によってはしっかりとした独自デザインを採用していてライブラリーのパターンに当てはまらないデザインを実装しないといけない案件もあります。
そういう案件に入れると最高です。
他の人では再現できないデザイン的要素をしっかり実装できる要員として重宝されます。
また経験浅くJS知見では劣るけど、CSSだけは負けないという自負があれば、チームへの貢献度も感じることができます。
面倒なデザインを積極的に実装してみよう！ → CSS経験値を増やしておこう！
WebサイトにJSで実装した要素を組み入れてみよう！
JS（SPA）を取り入れる最大のメリットは
ページのロードを発生せずに表示内容を切り替えることができること
です！
WordPressだけで実装していると、例えばカテゴリー別アーカイブ、タグ別アーカイブなど絞り込みしたい時、必ずページロードが発生しますよね？
そこをJSで実装したりするとページのロードが発生しないで実装することができます。
ページ遷移がないので表示に切り替えが早いことが最大のメリットです！
検索ページや、アーカイブページの表示切り替え、その他ちょっとしたアプリなどは気軽に組み込むことができます！
こちら、私が書いた記事ですが、どのようにしてReactアプリをWordPressの１ページに組み込めば良いのか。
解説してみました。
記事の内容は超簡単なもので例にしてみましたが、もっと凝った何かを作って下さい（笑）
ぜひ参考にしてチャレンジしてみて下さい。
JSで組み込みした箇所のソースは<div id=”app”></div>としか排出されないので、そこだけは要注意です。
SEO対策で、どうしてもソースにコード（テキスト）を出さないといけないような箇所にはあまり向かないかもしれません。。
ヘッドレスCMSにチャレンジしてみよう！
WordPressとAstroとか、最近流行っていますよね！
ヘッドレスCMSを実装するととても良いフロントエンドの経験となります。
先ほどのReactアプリでもHTTPリクエストでgetを使用してデータを取得してみました。
フロントエンドの主な仕事はHTTPリクエストを使用してデータを取得し、そのデータを加工し表示すること。
データを新規作成、取得、更新、削除することです。
そのうちの取得しかできませんが、HTTPリクエストに触れる良い機会です！
Astro.jsだと中の記述はVueもReactも選択できるので、いろいろ試してヘッドレスCMSにチャレンジしてもらいたいです。
フロントエンドへの勉強するなら
ここからはフロントエンドになる為に勉強するなら。。
という意味で書きたいと思います。
ポイントは１つ！
フロントエンドになりたいからと言って、React、Vueだけの勉強でおしまいにしないこと。
アプリには必ずバックエンド、DB、フロントエンドが必ずあります。
それらを知ることが重要です。
なので、勉強するならバックエンド、DB、フロントエンドを一貫して学ぶことが重要だと思います。
もしスクールを利用したいと思うなら、、
Reactだけを単発で教えてくれるところではなく、、バックエンド、DB設計、フロントエンド一貫して教えてくれるところを選ぶと良いと思います。
バックエンド、DB設計は一度自信でアプリ開発した際に一回でもやっておいて知識として身についけているだけでも、全然違います。
正直フロントだけの知識だけではやっていけないところも多いし、フロントだけでは単価はそこまで上がりません。
完全なフルスタックに慣れと言うわけではなく、バックエンドの知識もあるフロントエンドを目指すことがお勧めです！
いろいろやってフロントエンドまでの道を開こう
私はコーダーとして稼働しつつ、フロントエンドになるためにアプリ開発ができるようになれるように勉強しました。
勉強しつつ、ポートフォリオなど作成。
ヘッドレスCMSでポートフォリオを作成しました！
最初Reactはできなかったので、Vue＆WordPressでポートフォリオ作成しました！
このポートフォリオがあったおかげで、
- WordPress案件：不動産物件サイト→ 検索ページをVue組み込みしてSPA化した
- ヘッドレスCMS（Gatsby.js）の案件
上記２件担当させてもらえました。
勉強しているだけでは証明にはならないので、実際に成果物があった方が良いと思います。
ポートフォリオがあったおかげで上記案件を携わらせて頂け、上記案件をこなしたおかげで、その後フロントエンドへの道が開けました！
コーダー時代でも準備はできます！どんどん経験値を増やそう！！
