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?

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

0
Last updated at Posted at 2026-09-06

こんにちは、ゆゆです。

今回も、一か月の振り返りをしていきます。
8月はお盆休みがあり、他の月と比べると稼働日数が少ない月でした。僕自身もお盆休みを利用して栃木に旅行へ行き、人生初めて日光東照宮を訪れました。有名な「三猿」や「眠り猫」を見ることができ、いい気分転換になりました。

そんな8月ですが、仕事や自主学習について振り返るとともに、前回の記事で掲げた目標についても振り返っていきます。

仕事

8月は担当した案件が少ない月でした。
何件か担当してはいましたが、主な実装作業は7月に終わっており、素材の差し替え作業がほとんどでした。

しっかりと携わった案件では、ドラッグなどのマウス操作で商品を360度閲覧できる、シミュレーションコンテンツの実装を担当しました。
マウス操作によるインタラクションの実装は初めてで、マウスカーソルの位置取得や、拡大表示時の座標計算などに苦戦する場面が多くありました。そのため、多くの部分でAIに助けを借りながら実装しました。

JavaScriptでの実装は、まだわからないことが多くAIを使いながら実装を進めています。そのため、理解負債が積み上がっていることに焦りを覚えてもいます。
一方で、一朝一夕には解決できない課題でもあるので、地道に頑張りたいです。

自主学習

これまでと同様、案件作業がない時間は自主学習を進めていました。特に8月は、自主学習の時間が多かったです。

8月から、新たにThree.jsの学習をはじめました。
きっかけは上司から学習を勧められたことです。私が所属している会社は3DCG制作を強みとしており、今後3DCGを活用したさまざまなコンテンツを実装していく中で、Three.jsの知識が役立つとのアドバイスを受け、学習を進めています。

Three.jsは、学生時代に使用していたTouchDesignerというソフトと、3D描画の基本的な考え方が似ており、勉強していて非常に楽しいです。
TouchDesignerでは、SOPで3Dオブジェクトを用意し、Camera COMPとLight COMPを配置した上で、Render TOPでレンダリングします。Three.jsはこの一連の流れをコードを書いて実装するイメージです(TouchDesignerを触ったことのある人しか伝わらない内容で申し訳ないです)。
そのため、それほど理解に苦しむことなく学習を進められています。

一方で、勉強の進め方には少し苦労しました。これまでは、参考書を読みながらサンプルをひたすら制作するという方法で進めていたのですが、Three.jsについての参考書はほとんどありませんでした。
O'Reilly社の『初めてのThree.js 第2版』など、何冊か販売されてはいるのですが、どの本も発行年が2016年などと古いものが多く、学習に適した一冊を見つけることができませんでした。
(一応、O'Reilly社の参考書のリンクを共有しておきます。)

そこで、ICS Mediaが提供する『Three.js入門サイト』というサイトを参考にしながら、自分でサンプルを作成して学習を進めました。

このサイトはThree.jsの基礎から応用までをしっかりとまとめられており、Three.jsの初学者に非常にお勧めできる教材です。サンプルコードも多く掲載されており、Three.jsを体系的に学習することができます。

僕はこのサイトの内容を参考にしつつ、サンプルコードを自ら制作しながら学習を進めました。
掲載されているサンプルを使用せずに自作した理由は、各機能を実装するために必要な「最小限のコード」を知りたかったからです。

例えば、このサイトの入門編のサンプルは、ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介するものになっています。ただ、僕は「ライブラリのセットアップから3D画面への表示」という最低限のコードをまずは学習したいと思いました。そこで、テーマごとに最小のサンプルを自作していきました。

下の画像が、僕が自作したサンプルです。インタラクションやアニメーションは付けず、立方体の表示の未実装しました。
image02.png

ただ、それだけでは面白くないので、最小単位のコードを作成しつつ、次第に各サンプルにインタラクションをつけるようになりました。
下の画像はTHREE.InstancedMesh()を使って立方体を大量に複製したサンプルですが、立方体の数や散らばり範囲を自由に変更できるようになっています。
こちらがサンプルのソースコードです。Actionで実際にデモを触ることができます。
https://github.com/yu0002nakka/qiita_reflect_Aug

image_sample02.png

今後、こうしたサンプルを何かしらの形で公開したいと考えています。

自主制作

今月はあまり進めていません。プライベートでは『PALWORLD(パルワールド)』というゲームにドはまりしてしまい、自主制作に時間を割割けませんでした。ほんと面白い。

Xserverを契約したにも関わらず、しばらく放置しているので、そろそろ自分のブログを更新したいと考えています(日記サイトを作ろうと思っているのですが、何も手を付けていません)。

一方で、最近業務時間の隙間を縫って、エディタソフトの制作を進めています。
業務のタスク管理のメモにObsidianというMarkdown形式のエディタソフトを利用しているのですが、UIが好みではなく、若干使いづらさを感じていました。似たソフトにNotionがありますが、こちらはデータがクラウドへ自動的に保存されるため、会社で使用の許可が下りないのです。

そこで、自分で制作してみようと思い立ち、Tiptapというライブラリを使用しながらちまちまと制作しています。
Tiptapは、リッチテキストエディタを構築するためのライブラリで、見出しや太字、リストなどの編集機能を柔軟に組み込めるのが特徴です。
まだ制作途中ではありますが、実装を進める中で共有できそうなことがあれば、また記事にしたいと思います!

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

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

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

目標の達成度についてですが、

  • 目標1(Figma): 未達成。全く手を付けていません
  • 目標2(CSS): 未達成。こちらも全く手を付けていません
  • 目標3(JavaScript): JavaScriptの問題演習には取り組めませんでした。ただし、業務時間内にThree.jsやTiptapなどをとおして、JavaScriptに触れる機会は継続して確保することができました

結果として、先月設定した目標については、ほとんど達成できませんでした。
その反省も踏まえ、9月は以下の2つを新たな目標に設定します。

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

二つ目の目標についてAIに相談してみたところ、

Three.jsは、ある程度ライブラリ側が処理を担ってくれます。Three.jsを書いている=JavaScriptの基礎力が上がっている、とは必ずしも言えません。

という厳しいアドバイスを受けました。
そこで、Three.jsのライブラリだけで完結する簡単なコンテンツ制作だけに終わらせず、ユーザー操作の実装やオブジェクトやクラスを使用したデータや処理の管理など、これまでに学習してきた基礎知識を意識しながら制作を進めたいと思います。
また、制作や学習の中で得た知識を整理し、Qiitaの記事を1、2本投稿できたら理想です。

考えていること

私の所属チームは、「AIを使いこなすためには、まず基礎知識をしっかりと身に付けるべき!」というスタンスを取っており、僕の成長計画にもその考えが反映されています。これには僕も賛同しており、入社以降、HTMLやCSS、JavaScriptなどを基礎から勉強してきました。

ところが、最近上司との面談でこれまでの僕の成長具合や成果について聞く機会がありました。その際、
「昨今AIコーディングが主流になりつつある中で、どこまで本人が理解できていて、どれほどのスキルが身についているのか判断が難しい」
という話があり、評価については濁されてしまいした。

今やプログラミング未経験者でもAIを使えばアプリやゲームを作成できるほど、AIは進化しています。そのため、完成した成果物だけを見て、それが本人の力で実装されたものなのか、それともAIの力を多く借りて作られたものなのかの判断が難しくなっていることは理解できます。

確かに、これまで担当した案件で全くAIを使わなかったわけではありません。ただ、これまで自分なりに基礎から勉強し、少しづつ積み上げてきた成果が、AIによって見えづらくなっているようなに感じ、正直不満が募りました。
また、今自分が学んでいることは、今後仕事していく上で本当に必要なことなのか、と不安に感じています。

ただ、僕はコーディングが好きですし、自分にとっての強みだと考えています。不安や不満はありますが、自分の「好き」を信じて、今できることを着実に続けていこうと思います。

さいごに

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

最近趣味のゲームやジム通いに時間を多く取っています。勉強や自主制作をやりたいという気持ちはあるのですが、時間が足りません(泣)。ある意味充実している日々を送れていると言えるかもしれませんが、やりたいことに対し時間をうまく使えていないとも感じています。9月は、プライベートの時間の使い方を少し見直しながら、趣味と勉強・創作をうまく両立できるようになりたいです。

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

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?