0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

0
Posted at

こんにちは、ゆゆです。

気付けば入社から半年が経ちました。入社当初は新しい環境にドギマギしていましたが、今ではだいぶ慣れてきました。あっという間という感覚もある一方で、「まだ半年しか経っていないのか」という感覚もあり、なんだか不思議な気持ちです。

さて、9月の振り返りをしていきます。前回の振り返りで決めた目標についても振り返っていきます。

仕事について

今月は、Three.jsを活用した案件に携わっていました。Three.jsは8月から学習を進めており、今回その成果を発揮するかたちとなりました。

制作したコンテンツは2つあり、ひとつはデジタル模型、もうひとつはハンドトラッキングを使用したインタラクティブな教育コンテンツです。

デジタル模型

前者のデジタル模型は、教育や建築業界など様々な場面で使用される、3Dモデル閲覧コンテンツです。今回私が制作したコンテンツでは、

  • マウス操作で対象物をさまざまな角度から観察できる機能(OrbitControlsを使用)
  • 一部の外装をシースルー化し、対象物の内部構造を閲覧できる機能
  • モデルにラベルを付与し、ラベルをクリックすることで説明モーダルを表示する機能

などの機能を実装しました。
8月に学んだことを生かしながら実装を進めることができ、楽しかったです。
また、カメラモーションの実装やHDRを使用したライティング設定など、新しい技術や実装方法に触れることもできました。

ハンドトラッキングを使用したインタラクティブコンテンツ

もうひとつのコンテンツは、落下実験をデジタルで体験できる教育コンテンツです。Googleが提供するMediaPipeというライブラリを使用してハンドトラッキングを実装し、オブジェクトを持ち上げて落とすという体験を実装しました。

ただ、このコンテンツはAIに実装を任せていました。というのも、もともと同じチームの社員がAIに作らせたコンテンツをもとに、機能やデザインの整理・ブラッシュアップをするかたちで進めるものだったためです。また、上司からもAIを活用しながら進めるよう指示を受けていました。そのため、プログラムの詳細を理解しているわけではないです。

MediaPipe自体は学生の頃に使ったことがあったので、実装にはそこまで苦労しませんでした。ただ、その時はプリセットのようなものを使っていたため、MediaPipeの導入方法やその仕組みまでは理解できていませんでした。
今回初めて導入段階から実装する機会をもらったので、改めて勉強しようと思います(この案件では期限が厳しくてその時間を取れませんでした)。

自主学習について

今月は学習に対するモチベーションが下がっており(言い訳)、そこまで多くの時間を割けませんでした。
その理由としては、上司との面談で「今の時代、AIの躍進によりプログラミングの多くを任せることができるがために、自分がどれだけスキルを身に付けたのか評価しづらい」と言われ、具体的な評価をしてもらえなかったことに落胆したからです。

しばらくモチベが下がっていたのですが、そんな中、なんとそのAIに

  • 「仕事で役立つか」ではなく「触って面白いか」
  • 「評価されるために」ではなく「自分の中に残しておきたいものか」
  • 「今すぐ役立つか」ではなく「今後できるようになりたいと思えることか」

で判断しろと励まされ(AIにそれを相談するのも矛盾していますが)、月の後半から少しずつ再開していました。

今月読んだ参考書

  • 『エンジニアなら知っておきたいFigmaのキホン ハンズオンで学ぶWeb開発の仕組みと機能』読了

先月の目標にて掲げていたFigmaの参考書を無事読み終えることができました。

以下、簡単なレビューですが、Figmaの基本的な使い方を図を用いながら丁寧に解説しています。使う際に心掛けるべきことや、知っておきたいデザインの基本的な概念についても説明されています。Figmaをこれから初めて触るという方や、デザイナーではないものの、仕事でFigmaを使う機会がある方にお勧めの一冊です。

一方で、この本はデザイナーではなく、あくまでもエンジニアがFigmaを使用したデザインシステム構築の基礎を学ぶことを主な目的としています。そのため、この一冊で何かクリエイティブなコンテンツが制作できるようになる、といったいわゆる「デザイン書」ではない点にはご注意ください。

ページの下部にこの本の購入リンクを載せていますので、参考にどうぞ。

先月の目標の振り返りと新たな目標の設定

先月の振り返りでは、以下の2つの目標を設定しました。

  1. Figmaの参考書を最後まで進め、自主制作のデザインをひとつ作る(続投)
  2. Three.jsを活用したWebページを1つ制作し、配列・オブジェクト・関数・DOM操作など、これまで学習したJavaScriptの基礎を実装の中で活用する

達成度については、以下の通りです。

  • 目標1:参考書読了。自主制作のデザインは現在制作中
  • 目標2:AIを使いながらも、仕事でThree.jsを使用したコンテンツを複数制作

目標1については自主制作がまだ途中ではありますが、全体として見れば、おおむね目標を達成できたのではないかと思っています。

10月は、以下の2つの目標を設定します。

  1. Three.jsの学習で制作したサンプルと、そのコード解説をまとめたWebサイトの制作を進める
  2. UIデザインについての勉強を進める

1つ目の目標については、9月の目標で達成できなかった自主制作の続投です。以前から、Three.jsの学習で制作したサンプルをまとめた紹介サイトの制作を考えており、現在Figma Makeを使いながらデザインの草案を考えています。
10月中の完成は難しいと考えているため、まずは制作を進めつつ、その途中経過をQiitaの記事にまとめることを目標とします。

2つ目は、新たに取り組む目標です。
これから携わる案件でデザインを担当する予定であり、そのための勉強として始めようと考えています。
これまでも何度かUIデザインを考える機会はあったのですが、基本的には自分のお粗末な感性に頼っていました。そのため、今回は基礎から学んでみようと考えています。参考書を購入しているので、それを読み進めつつ、Figmaを使ってサンプルの制作も行ってみたいと思います。

全体の振り返り

「成長」を「さまざまなコンテンツやその機能を実装できる」という観点で見ると、まだそこまで成長できていないと感じています。

9月に担当した案件でも、実装作業の半分近くをAIに頼っており、知識やスキルが自分の中で蓄積された実感はあまり得られませんでした。仕事のモチベーションが下がっていたこともあり、AIが出力したコードをそのままコピペし、内容を十分に読まないことも多々ありました。

その分、AIの使い方には慣れてきたのかなと思います。今後はプロンプトの書き方についても、改めて学習すべきかとも考えています。

また、これまで学習した内容、特に今回でいえばThree.jsを仕事で活かすことができたのは非常に嬉しかったです。
上司からチェックバックや無茶な要望がきた際にも、どこを修正・追加すべきか迷うことがなくなりました。また、AIが出力したコードについても、学習した範囲であればある程度理解できるようになっていました。

先月立てた目標も達成することができました。実装力はまだまだですが、一歩ずつ前に進めていると信じています。

最後に

本記事では2026年9月の振り返りをしました。
ここまで読んでくださり、ありがとうございます。

今回紹介したコンテンツは作業量が非常に多く、入社半年にして、かなりの時間残業をすることになりました。プライベートの時間が削られることは自分にとって大きなストレスで、心身共に疲弊しました。
その点、うまくAIを使えるとより効率的に働けるのだと思います。ただ一方で、今の段階からAIに頼りすぎてしまうと、エンジニアとして必要な知識や実装力が十分に身につかない可能性もあり、そのバランスは悩ましいです。

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

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?