4
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?

日本CTO協会24卒Advent Calendar 2024

Day 1

フロントエンド初級者なりの狭く深く技術を深掘りする方法

Last updated at Posted at 2024-11-30

日本CTO協会24卒 Advent Calendar

日本CTO協会24卒初のAdvent Calendar記念すべき初日です。日本CTO協会24卒では毎月1回輪読会を開催しています。

輪読会では読んでみたい本や議論したい本をピックアップし、講義形式で説明しながら疑問点があったら質問や議論をするというようなスタイルです(1回1時間〜1時間半くらい)。Advent Calendar最終日に輪読会を振り返る記事が投稿予定なので、お楽しみに。

初日ということで色々語りましたが、実は私は日本CTO協会に(まだ)加入していないです。日本CTO協会24卒には若手エンジニアLT会で知り合ったyuhi君が招待してくれました。どこかでちゃんと加入します。多分。

はじめに

新卒1年目でwebフロントエンドの開発をしています。入社間もないころ、「新卒はいきなり全部を知ろうとせずにまずは狭く深くやっていけ」みたいなことを言われた経験はエンジニアに限らず皆さんあると思います。

その理論はわかっていたとしても、じゃあ実際の業務を通してでどうやって狭く深く、つまり何かしらの技術に対して狭く深く知識をつけていけばいいのか?と特に経験のない人は思うのではないでしょうか。

この記事では、業務を通じてどうやって技術に対して深堀りをしていけばよいのか、私なりに考えて見つけた方法を共有していきます。

対象読者

新卒入社前もしくは新卒1,2年目のエンジニア
初心者からどうやって技術の深堀りをしていけばよいのかわからない方

入社時の私の経験値

プログラミング経験は2年ほど。独学で主にPythonをやっていて、プログラミングがどういうものかはわかっていてなんとなく書ける程度。

Webフロントエンドの経験は内定者インターンでちょこっとやった。TypeScript/Reactの基礎を勉強して、ちょっとロジックが複雑な機能は書けないけど簡単なコンポーネントなら自力で書けるくらい。

深掘りする方法

何かしらのタスクが与えられたとします。ここでは「モーダルを作成する」というタスクを例にしてみましょう。

モーダルの作り方をネットで調べたり、プロジェクト内の既存のコンポーネントに似た実装がないかを調べたりして、どんな流れで作れば良いのかがイメージできた状態とします。

この状態で「Perplexity AIにモーダルを作る際の注意点を聞く」ということをします(実際にコードを書き始めてある程度形ができてからでもいいですし、書き始める前でもよいです)。

image.png

すると、このようにリンク付きで色々列挙してくれます(画像は一部)。AIに聞かなくても普通にブラウザで検索するでもいいのですが、色んな角度から注意点とリンクをまとめて提示してくれるので個人的にはAIに聞く方が好きです。

これを見ると、「モーダルの外にフォーカスが移らないようにしないといけないのか」、「スクロールバーの挙動も考えないといけないのか」などなど、一回作ったことある人なら知ってるけど、最初はわからないようなことを色々教えてくれます。

AIが列挙してくれた注意点を参照のリンク先の記事を読んで、その中で疑問点があったら検索して…というように繰り返していくと、「モーダル」という一機能を実現するために必要な技術を深く知ることができます。また調べていくと

  • divだけで作る
  • dialogで作る
  • popover属性を使う
  • ライブラリを使用する
  • divだけで作る場合、a11yの観点で何を意識しないといけないのか

というように、複数の実装方法や周辺知識を知ることができます。

これを色んなタスクごとにやっていくと、狭く深い知識がどこかで繋がり、広くて深い知識になっていきます。この方法で私はフロントエンドにちょっとずつ詳しくなっていきました。

この方法の副産物として、お気に入りの企業の技術ブログが見つかるというのがあります。私はhttps://ics.media/ がお気に入りです。こういった技術ブログの中から業務に関係ないけど気になる記事があったら読んでみて、その中でまた気になる箇所があったら調べて…というように業務起点ではない技術の深堀りができるようになります。

以上のようにして、私は業務を通して狭く深く技術を深堀りしていっています。

番外編:普段のキャッチアップ

日常的にはXでキャッチアップしています。フロントエンド界隈の有名な方を片っ端からフォローして、流れてきた記事をchromeのタブで開いておき時間があるときに読んでみる、ということをしています。面白い記事があったら社内のフロントエンドの知見共有チャンネルに投稿しています。

あとは、ZennやQiitaでReactなどのカテゴリで調べて最近話題の記事を読むということもちょこちょこしています。最初は「業務で関連しそうなもの」というように明確な目的を持って調べていましたが、それだと知識が広がりにくいので上記のキャッチアップをして少しずつ自分の知識領域を広げていってます。

おわりに

この記事ではPerplexity AIを使った初心者なりの技術の深堀り方法を紹介しました。みなさんもぜひ試してみてください!他にも良い知識の広げ方・深め方があれば教えてください!

4
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
4
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?