新卒フロントエンジニアの備忘録【７月編】

Posted at 2026-08-01

こんにちは、ゆゆです。
今回も月の振り返りをしていきたいと思います。

過去の振り返り記事は私のアカウントページから読むことができます。
ゆゆのアカウントページ

また、今回からNoteにも投稿します。
noteには月の振り返りの他に、日常や仕事で感じたことを記事として投稿していく予定です。Qiitaには引き続き、月末の振り返りや技術記事を投稿していきます。

仕事について

入社してから4か月が経ち、実案件にもだんだんと携わるようになってきました。そのような中、今月特に印象に残っているのが「Figma」での作業です。

入社してから何度か耳にしていたのですが、今回初めて使うこととなりました。上司から「勉強しておいて」と言われていたのですが、それをガン無視してHTML/ CSSの勉強や自主制作ばかり進めていたので、事前知識がほぼ0の状態で実案件に使うこととなってしまいました。

特に、

・オートレイアウトの仕組み
・Figmaにおけるコンポーネントとバリアントの概念

この二つの扱いが難しく、余白などの細かい調整に苦戦しました。

その後、実案件が落ち着いてから、改めてFigmaの勉強をし始めました。現在、以下の参考書を使いながら学習を進めています。

Figmaの無料版を利用しながら、基本の使い方を1冊で網羅している本となります。少し分厚いですが、さくさく進めることができるので初学者におすすめです。

Figmaは特にAIサービスがすごいです。「Figma Make」というAIサービスが提供されているのですが、プロンプトを書くだけで高品質なWebデザインを出力してくれます。デザインが苦手な自分にとって、アイデア出しや自主制作の補助として活用できそうだと感じています。

HTML / CSS / JavaScriptについては、引き続き学習を進めています。

HTMLとCSSは、AIなしでもかなり使えるようになってきました。ただ、まだまだ経験が少なく、レイアウトやデザインに関するの細かい指摘を受けることが多いです。

あたりの指摘が多い印象です。これまでは、指摘を受ける度にすぐに直していたのですが、経験を積むことを目的として、今後は振り返りができるようにメモに残しておこうかなと考えています。

JavaScriptはまだまだ慣れておらず、引き続き学習を進めています。
納期との兼ね合いで、どうしてもAIにコードを出力させているのですが、その内容のすべてを把握できておらず、上司からの質問にも答えられないという状況が続いています。AIが出力したコードを把握できることを目標に頑張っています。

前述しましたが、今月はFigmaの学習がメインでした。

その他にも、CSS設計について、以下の参考書を用いながら勉強していました。

この本は先月の振り返りでも紹介したのですが、CSS設計の概要をざっくりとかつ丁寧に説明されており、CSS設計の入門書的な1冊です。

ただ、私はこの本の内容のすべてを理解できませんでした。
BEMやOOCSS、SMACSSなどの基本的な概念は何となく理解できるのですが、それをいざ実践しようとすると、なかなか難しい。

こうした点から、知識よりも経験の方が比重の大きい分野だなぁと感じており、なかなか実践に活かしづらいのです。現在は別の参考書も使いながら、引き続き学習を進めています。もし、CSS設計のおすすめの勉強法があれば教えてくださいm(_ _"m)

勉強の合間に息抜きとして、ちまちまと進めています。
今月は自分のブログを少し改良しました。ヘッダーとサイドメニューを追加したのですが、リンク先をまだ設定していないため、SNSアイコンなどがただの飾りとなっています。
今後、引き続き更新予定です。

時間が足りない。1日が48時間にならないかなと、毎日考えています。

最近、自分のスキル不足、知識不足に漠然とした焦りや不安を感じています。その要因は様々で、

などなど。愚痴を言っても状況は変わらないのですが、どうしても不安や焦りが消えない。こうしたネガティブな気持ちとどのように折り合いをつけるかが、最近の悩みです。

今回から来月の目標を書いていこうと思います。多すぎても自分を苦しめるだけなので、最大３つまで。

1. Figmaの参考書を最後まで進め、自主制作のデザインを一つ作る。
2. CSS設計における自分自身なりのスタイルガイドを決める。
3. JS challengeやpaizaなどのサービスを活用しながら、JavaScriptの問題に週4日、1日1問以上取り組む。（＝習慣化を目指す）

今回は、7月の振り返りをしました。
振り返りは今後も続けていきますので、ぜひ読んでいただけると幸いです。