こんにちは、新卒一年目エンジニアの藤原です。
大学では主にメディア工学を学んでおり、プログラミング経験はあまりありませんでした。研修ではJavaをメインに学び、HTML,CSS,JavaScriptはほんの少し触れた程度です。
しかし、8月に部署に配属されて以降は、React/Next.jsを用いて社内システムのフロントエンドを開発しています。そのため、右も左も分からず、常に「分からない」が頭をよぎる毎日です。
簡単なパーツ作成から始まり、画面のデザイン取り込み、バックエンドのAPI繋ぎこみへと、担当タスクのレベルが上がる中で、直面する分からないことへの解決策を考えていると、「分からない」にも種類があると気づきました。
そこで、実務で直面した分からなさを自分なりに下記の3つに切り分けてみました。
- 知識がない分からなさ
- 輪郭が掴めない分からなさ
- 慣れていない分からなさ
この記事では、配属後にReact/Next.jsを触る中で実感した「分からない」の3種類と、その解決策を紹介します。
本文中では、実際に私が業務で直面したReact/Next.jsの事例を具体例として挙げていますが、React/Next.jsに限らない、より汎用的な「分からなさへの向き合い方」に通じる内容です。読者の皆さんの分からなさに対する理解の一助になれば幸いです。
React/Next.jsとは
先述の通り、本記事では配属後の実務で私が使用しているReact/Next.jsを例として取り上げているため、ここで簡単に紹介します。
Reactは、UI（ユーザーインターフェース）を構築するためのコンポーネントベースのJavaScriptライブラリです。画面を小さな「部品（コンポーネント）」の組み合わせとして設計・再利用できるのが特徴です。
Next.jsは、Reactを土台にしたフレームワークで、ページ遷移やデータ取得など、アプリ開発に必要な仕組みを標準で備えています。
必要に応じて、詳細な情報は公式サイトを閲覧ください。
React公式ページ
Next.js公式ページ
知識がない分からなさ
私が最初に直面したのは、知識が足りないことによる分からなさでした。ここで言う知識は、用語・書式・最低限のルールのことです。4か月の新人研修を通してプログラミングの基礎は身につけたつもりでしたが、配属直後は
- 「コンポーネントって何？」
- 「この関数は何をしている？」
- 「この値はどこから渡ってきた？」
- 「起動ってどうやるの？」
といった語彙・前提知識不足で詰まる場面が多く、いわゆる「何が分からないのかが分からない」状態でした。
ここでは例として、Reactにおける「コンポーネント」というものを取り上げて説明します。
コンポーネントとは、画面の構成要素を独立した単位として定義し、再利用できるようにする仕組みです。UIを小さく分割して組み立てることで、開発と管理がしやすくなります。
私は最初、「コンポーネントの作り方」「コンポーネントを渡す方法」「.tsxと.tsの違い」など、コードを書く前の前提の言葉が抜けていました。そのため、コードを書き始める前の段階で、時間を多く要してしまうこととなりました。
知識がない分からなさに対しての解決策
調べること
調べることは誰でもできますが、速く正確に求めた回答に辿り着くには工夫が必要です。
配属前は「エンジニアはコードを書く時間が大半」と思っていましたが、実際には調べる時間の割合が多いと感じました。そのため、業務をスムーズに進めるには「どう調べるか」を上手くなることが思っていた以上に重要だと実感しました。
調べるうえで、私が工夫していることは2つあります。
- 二次情報 → 一次情報の順で読む
技術系のサイトを読むことに慣れていないと、公式サイトは情報量が多く、読みにくく感じる人もいらっしゃるかと思います。私もそうです。そんな方は無理せずいきなり公式サイトから読むのではなく、エンジニアの方が書かれた、要点のみを絞った二次情報から探していくのも手だと思います。
二次情報から探すことで、すぐに解決するわけではありませんが、自分に合ったレベルの説明から入れるため、調べ始めのハードルが下がり、理解のとっかかりが早くなったように感じます。
まず二次情報で大枠をつかみ、そのうえで一次情報（公式サイト）で裏取りする流れが理解しやすかったです。最終的な判断は一次情報を基準にしています。
初学者の一次情報との付き合い方について述べている記事がありますので、参考までにご覧いただくと良いと思います。
tech.nri-net.com
- 検索ワードは無駄を省く
技術に関する情報は無数に転がっていますので、検索ワードが多いと、求めていない情報が引っかかる可能性が増えてしまいます。
実際に、フラグメント（<>...</>）について調べたときの例です。
悪い例
検索ワード：React/Next.js return の前に <> をつける意味とは
- 語が多く説明的すぎて、「Next.jsの基礎」「オプション引数」など意図しない話題までヒットする
- 「returnの前に」など、本質と関係ない説明語がノイズになる
良い例
検索ワード：React <>
- 実際に「<>（フラグメント）」の解説がすぐ見つかる
- 最低限の語だけに絞ることで、Reactのフラグメントそのものに関する情報が上位に出る
ポイントは、余計な単語を省きつつ技術用語を明確に指定し、短い検索語で当たりを取ってから必要に応じて絞る、という流れで調べることです。
聞くこと
私が気づいたのは、自分が半日かけて悩むことでも、先輩はたった30秒で解決することばかりということです。
恥ずかしさや遠慮はあっても、必要な時は相談した方が結果的に早いと痛感しました。気軽に聞けるのは新人の特権です。直接話せるときは対面で、忙しそうなら連絡ツールで要点だけ（何を試した／どこで詰まった）を添えて短く聞くようにしています。
誤解がないよう補足すると、何でもすぐ聞けばよいわけではありません。自分で仮説を立ててあたりをつける時間も同じくらい重要です。私は自分で考える時間を20-25分と設定し、それでも進捗がなければ聞くようにしています。
知識がないゆえにどうすればいいのか分からず、あたふたしている時間は勿体ないです。私は、作業が停滞しないようにすることを意識しています！
輪郭が掴めない分からなさ
次に直面したのは、輪郭が掴めない分からなさです。輪郭が掴めないとは、関数の処理内容や記法の意味は読めるが、「どこで／いつ／なぜ使うか」が不明の状態です。自分で調べることで関数や記法そのものは理解できても、使いどころや使い分け、ファイルをまたいだ処理の判別が曖昧になり、開発時に迷子になりました。
輪郭が掴めない分からなさに対しての解決策
図に落とし込んで考えること
コードを読んで、頭の中で処理の流れを想像したり、ファイル同士の関係性を整理するには限界があると感じ、図解するようにしました。
ポイント
- 使ったツール ： PowerPoint/Figma
- コツ ： 箱 = ファイルや層、矢印 = ファイルの繋がり
具体的には、次のような簡易図から書き始めました。
画面描画処理の例 ：
このように図にすることで得られた効果としては、
- どこで何の処理をしているのかが一目で把握しやすくなる
- どのファイルから書き始めればいいかが明確になり、悩む時間が減る
結果として、「どこで／いつ／なぜ使うか」の霧が晴れて、開発時に迷子になることが減りました。
慣れていない分からなさ
最後は、慣れていないことからくる分からなさです。知識不足や輪郭が掴めないこととは違い、「知っているのに、手が止まる」という状態です。知識が増えれば自然と手が動くようになると思っていました。しかし、React/Next.jsを使用した開発を続ける中で感じたのは、一度経験したはずの内容でも、次回以降もスムーズに書けないということです。
例としては次のようなものです。
- 同じエラーに遭遇し、「前もこのエラー見たんだよなー」と思うが、解決手順を思い出せない
- importする内容やpropsの渡し方など、毎回微妙に検索して確認している
- 理解しているはずの処理でも、順番に迷う
「何が分からないのかが分からない」という知識がない分からなさとは違い、ここで扱うのは、以前に経験があり、解決方法の調べ方も分かっていて、メモを見返せば解決できるタイプです。私はこれを慣れていない分からなさと分類しました。
慣れていない分からなさに対しての解決策
メモを取ること
対策は至ってシンプルなものとなっています。
慣れていない分からなさは、形を変えて繰り返しやってきます。「思い出す助け」ではなく「次回すぐ再現できる仕組み」としてメモを取るようにしました。
そもそもなぜ、1回目に問題に当たった際にメモを取らなかったのか、というお話ですが、自分の記憶力を過大評価していました。このエラー文が出たときはこの操作をすれば解決すると、苦労して分かったというのに、一度分かれば、次からは問題ないだろうと考えていました。記憶は抜けていくものです。メモを取りましょう！
メモを取るうえで私が工夫した点は次の3つです。
項目で分ける（分類の固定化）
分類例 ：[React/Next.js]/[HTML,CSS]/[バックエンド]/[DB]
できる限り細かく項目分けすることで、見返す際に見つけやすくなります。1つのツールに集約する
Slackの自分用チャンネルまたはDM自分宛てに、スレッドで追記していくと、縦に積み上がる履歴ができて後から探しやすいです。
Slackはキーワード検索が使いやすく、あとから探したいメモをすぐ見つけられました。参考リンクも必ず残す
自分の文字のみのメモだと、時間を空けて見返したときに、内容を理解できないことがあります。そのため、参考となった記事のリンクも残しておくことで振り返りやすいかと思います。
メモの例 ：
現在は新人として、この1年で蓄積したメモを基に実装していますが、今後の課題として、フレームワークのバージョンアップによってメモした内容が非推奨になることや、後からより最適な実装方法が見つかることもあるかと思います。そのため、メモに基づいて実装したあと、レビューでより適切な方法を教えていただいた場合にはメモを更新する。また、メモを見返して日付が古いものについてはAIに投げ、最新の情報であることを確認し、必要に応じてメモをアップデートしていくことも重要です。
知識不足や概念理解は、調べれば比較的すぐ解消できます。しかし、慣れていない分からなさは時間をかけていくしかないと思います。その分、慣れてくると開発スピードや思考が速くなり、「手が自然にうごく」ようになると思います。私もタスクを数こなし、慣れていきたいです。
さいごに
本記事では、配属後すぐにReact/Next.jsを触って経験した「分からない」の3種類を紹介しました。
私が伝えたいのは、分からないには種類があること、種類に応じた解決をすることが大切ということです。
私は分からなさを
- 知識がない分からなさ
- 輪郭が掴めない分からなさ
- 慣れていない分からなさ
の3種類に分けて解決策を考えました。
人によって分からなさの切り分け方は様々だと思います。自分が直面している分からなさが、どのような分からなさなのか種類分けしてみることで、解消する糸口が見えて来ると思います。
この記事が、皆さんの「分からない」をほどく手助けに少しでもなればうれしいです。最後まで読んでいただき、ありがとうございました。
