2024年を振り返る
目次
こんにちは、さかです。
今回は今年も残りわずかということで2024年を振り返ろうというでテーマでを記事をかきたいと思います。
今年は一言で「変化が多かったなあ」という1年でした。
1-3月
もともとコーダーとして業務に関わってきましたが、フロントエンドエンジニアとしてのキャリアを築いていきたいと考えるようになり、このタイミングでReactの勉強を本格的に始めました。
これまで業務では静的サイトの制作がメインだったのでプログラミング言語を使用したことが殆どなく、JavaScriptが少しわかる程度ではありました。
そのため、Reactの勉強を始めた当初は全くうまく進まず、hooksやコンパイル、コンポーネントなど新しいワードが出てきて勉強しても理解ができていないという状態が続いていました。また、React特有のHTMLとJavaScriptが混在している構成にも最初慣れず、「FE（フロントエンドエンジニア）になれるだろうか...」と挫折しそうになりました。いや、挫折したと思います笑
この進め方ではダメだと思い、これまで書店で買った教材での勉強から動画での勉強に切り替えました。
自分はUdemyとYouTubeを中心に学んでいき、YouTubeではしまぶーさんReact講座を中心に勉強しました。
参考リンク:
【Next jsで学ぶReact講座 #1】Reactを学ぶにはNext.jsから入ると効率が良い理由。Next.jsのセットアップからVercelへのデプロイまで！
しまぶーさんに動画は初学者でもわかりやすく、Reactの機能について丁寧に解説しているので理解が深まりました。YouTubeで一通り学んだら、Udemyでの学習に切り替えました。
UdemyではCodeMafiaさんのReact(v18)完全入門ガイドの教材から勉強しました。
参考リンク:
【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript
CodeMafiaさんの教材はReactの機能について、より深く解説しているのと各コースごと課題があり、実際にコーディングすることができるため、各コースごとの課題を明確化することができました。
また、Udemyの機能として不明点を質問することができるのと質問内容はオープン化されているため、他の方の質問から不明点を解消することもできます。
このような学習に切り替えたことによって理解を深めることができました。
もっと早くからこの進め方にしておけばよかったなと思いましたが、長い期間でReactを学ぶことができたため、ある意味良かったのかなと今ではポジティブに捉えています。
4-6月
一通りReactの学習もできたため、「何かアウトプット作品を作りたいな...」と考えていました。
そこで、趣味で撮っていた写真がたまっていたため「写真のポートフォリオサイトを作ろう！」と決めました。
試行錯誤をしながら制作したため、時間がかかりましたが、なんとか自分専用の写真サイトを完成することができました。
サイト制作にあたり、各機能ごとのディレクト構成やコンポーネントなど完璧にできているとは言えないです。
しかし、Reactを学び始めた頃と比べるとよくここまでできるようになったなと思っています。
また、デザインも他のWebサイトを参考にFigmaを使って制作をしました。
業務ではページデザインはデザイナーが担当なので、自分はいつもコーディングするのみですが、初めてページのデザインを考えることが楽しく、気づいたら夜遅くまでデザインについて考えてしまい、翌朝寝不足になることもありました笑
インターネット上に公開後、検索エンジンで引っかかったページリストに自分が作ったサイトが掲載されていた時はとても感動したのを覚えています。
7-9月
ポートフォリオを無事公開することができたため、「次は何をしようか...」とぼんやりと考えているとき、jamstackという技術でブログを作成したという投稿をSNSで流れてきました。
jamstackについて調べてみると、Reactの技術を採用しているNext.jsを使えば制作することができるとのことだったので、「ブログを作成しよう！」とこの期間でポートフォリオ制作に取り組みました。
実際にNext.jsを使ってみて、オプション機能の豊富さに驚きました。
サイト構成をSSRかSSGなどオプションごとに選択することができたり、画像最適化で圧縮やサイズを調整することができたりと使いやすさに驚きました。
何よりも、Server Actionを使うとサーバーサイドの処理を直接呼び出すことができ、簡単にお問い合わせフォームを制作することができることにはびっくりしました。
Next.jsの機能に感動しつつ、無事ブログサイトを完成することができました。
前回の課題としていたディレクトリ構成やコンポーネントがうまく分けられていない点がありましたが、今回はその課題を各機能やパーツごとに分けることができたのかなとは思っています。
このブログサイトの詳細については以下の記事で詳しく記載されているのでこちらも見ていただけると嬉しいです。
参考リンク:
個人サイトを作りました！
10-12月
9月中旬に部署異動に伴い、フロントエンドエンジニアとしてクライアント先に常駐することになりました。
FEとしてキャリアを築いていきたいと思っていたので、こんな早いタイミングで関わることができ、常駐が決まった時は素直にうれしかったです。
常駐先はVueを使用して開発をしているので、Vueの勉強もこのタイミングで始めました。
Reactでコンポーネントの仕組みや状態管理について勉強していたため、Vueへはスムーズに理解することができ、１ヶ月くらいで大まか理解することができました。
また、すぐに理解できた理由として、Vueは日本語ドキュメントがあり、日本人にとってすぐに理解ができたことやZennにVue・Nuxtなどについてまとめたアカウントがあり、初学者でもわかりやすく解説しているため、いつもよりも理解が早かった点があります。
参考リンク:
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.
参考リンク:
Vue.jsドキュメント
そして何よりも業務として関われていることが大きいかなと思っています。
個人で学んでいるときよりも業務に関わっている時のほうがプロジェクトを通じてすぐにフィードバックを受けたり、メンバーからの助言を受ける機会が多いので、個人で学んでいるときと比べて、学びのインプットが圧倒的に早いと感じています。
まだまだ未熟者ですが、業務を通じて成長していき、「FEです！」と胸張って名乗れるようにこれからも頑張ります。
最後に
今年はインプットすることが多く、学びの1年になりました。
来年もインプットを継続させるとともに、さまざまなことにチャレンジしていきたいと思います。
そして、このブログも続けられるように頑張りたいと思います。
