Column

開発に向けて、基礎を固めて準備をした— QuinQueインターン最初の2週間

QuinQueの長期インターンに参加して、最初の2週間が過ぎました。配属されたのは開発案件管理ツールの開発です。これは、「IT開発のビジネスマッチングプラットフォーム」を利用するにあたり、案件通知メールを取りこぼさず、申請から確約(紹介確定)までを社内で一気通貫に管理するための内製ツールです。

私はもともと理学療法士として働いていて、そこからIT・DXの世界へキャリアを移そうとしています。きっかけは、起業や経営に興味を持ち、Webマーケティングを学んで実践する中で、その面白さに惹かれたことでした。自分の長所を活かして楽しく働き、ビジネスに貢献することで、日本を少しでも豊かにし、家族や周囲の人を幸せにしたい—そんな想いも背中を押してくれています。

ご縁をいただいて実務やインターンに参加させていただく中で、Web・IT・AIの面白さにあらためて触れています。機会をくださった代表や社員の皆様に感謝しています。個人開発でAIエージェントを使って制作物を作った経験はありましたが、チームで役割を分担しながら実務として一つのプロダクトを作るのは初めてで、純粋にワクワクしていました。

とはいえ、IT開発の実務経験はほぼ未経験でNext.jsの知識もなかったため、最初の2週間は学習が中心になりました。この記事では、その2週間で取り組んだことと、そこから学んだことを振り返ります。

目次

この2週間の全体像

最初の2週間は、大きく分けて次のような流れで進みました。

  1. 開発環境を整える — Next.jsのインストール、GitHubの使い方
  2. 用語と概念を学ぶ — Next.js / Vercel / Supabase / リポジトリ / CI など
  3. 学んだことを相互レビューし、小さく制作物を作ってみる

Week 1:開発環境の構築とGitの基本(5/18–5/22

初週は、初回ミーティングから始まりました。 まずはNext.jsのインストールなど、開発環境のセットアップです。そして、GitHub周辺の環境と使い方を教えていただきました。clone、git add、commit、push、Pull Request、mergeなど一連の流れを、実際に手を動かしながら覚えていきました。

個人開発を通して、操作方法の名前は聞いたことがあり、AIの指示に従ってなんとなくターミナルにコマンドを打ち込んでいましたが、今回教えていただいたことで、GitHub周辺の概念や仕組み、コマンドの意味をはっきり理解し、確かめながら進めることができました。

チーム開発が初めてだったのでそれぞれのリポジトリをPull Requestしてmergeするという概念を学び、開発現場の作法などを学べました。

Week 2:用語の整理から、相互レビューと制作まで (5/25–5/29)

2週目の前半はNext.js・Vercel・Supabase・リポジトリ・CIといった概念や用語を調べて自分なりにまとめ、後半はそのまとめをもう1人のインターン参加者の相互にレビューし合い、さらに「Next.jsで何か1つ制作する」という課題にも取り組みました。調べる・整理する・人に見てもらう・作る、までを一気に通した週です。

調べていて気づいたのは、一つひとつの言葉が、ばらばらに存在しているのではなく互いにつながっているということです。ざっくり整理すると、

  • Next.js — Webアプリを作るためのフレームワーク
  • Vercel — 作ったものを公開(デプロイ)する場所
  • Supabase — データを保存するデータベースやバックエンド側の仕組み
  • リポジトリ — コードを保管し、変更の履歴を残す場所
  • CI — コードを変更したときに、自動でチェックを走らせる仕組み

という具合に、それぞれが「作る・置く・保存する・記録する・確かめる」という流れの中で役割を持っている、と見えてきました。

「まとめる」という作業は、思った以上に自分の理解度を映す鏡でした。例えば、1つの用語の意味を調べると、その説明を理解するためにさらに3つの用語を調べるという出来事の連続でした。調べてまとめるを繰り返していくうちに全体像を徐々に理解できるようになってきました。Next.jsで開発をしていく上で基盤になる知識を得ることができました。

相互レビューと、Next.jsでの初めての制作

その後は、もう1人のインターン参加者が調べたまとめを相互にレビューし合うためのまとめを Googleドキュメントでまとめる。あわせて、1ページでいいので何か一つ制作する、という課題にも取り組みました。

相互レビューでは、自分が調べきれていなかった点と自分の理解と相違がある点に着目してレビューを作成しました。相手の整理の仕方から、自分が気づいていなかった用語を調べていたり、より詳細に説明をしている点をみて、気付かされる点も多かったです。同じテーマでも整理の切り口は人によって違う、という点も面白かったです。

Next.jsで何か一つ制作するという課題では、要件定義から環境構築、VercelやSupabaseなど外部サービスとの連携など、開発の流れを一通り体験し、手を動かしながらNext.jsを使用した開発について学びました。

私は自分自身を紹介するポートフォリオサイトを制作しました。技術スタックは Next.js / TypeScript / Tailwind CSS / Supabase / Vercel で、1ページで経歴・スキル・制作物・お問い合わせまでを完結させる構成にしました。

最初は「コンポーネント」「型」といった言葉すら曖昧な状態からのスタートでした。AIエージェント(Claude Code)に頼りながらも、ただ動かすのではなく 「なぜこの実装になるのか」を一つひとつ理解すること を意識して進めました。特に、Next.js の「サーバーコンポーネントとクライアントコンポーネントの使い分け」では、動き(入力やクリック)が必要な部品だけをクライアントにすることでサイトを軽く保てる、という設計思想を学べたことが大きな収穫でした。

完成後は、コードの各所が何をしているのかを自分の言葉で説明できるよう、解説ドキュメント も作成しました。「動くものを作る」だけでなく「作成物の構成やコードを理解する」ことを目標に取り組んだこのプロセスを通じて、未経験からでも段階的に理解を積み上げていけるという手応えを得ることができました。

 制作したサイト:https://portfolio-site-project-puce.vercel.app

この2週間で学んだこと

「知っている」と「できる」は別物 

Gitのコマンドも用語の意味も、名前を聞いたことがある状態と、自分の手で一周して仕組みまで説明できる状態の間には、はっきりした距離がありました。AIの指示に従ってなんとなくコマンドを打っていた頃と、一つひとつの意味を確かめながら進める今とでは、同じ操作でも見えているものが違います。

用語は、単独ではなく関係で理解すると腑に落ちる

 Next.js・Vercel・Supabase・CIを一つずつ覚えるより、「作って・公開して・保存して・自動で確かめる」という流れの中に置いてみると、急に意味がつながりました。一つ調べると新しい用語が三つ出てくる、その繰り返しの先で、ようやく全体像が見えてきました。

「自分の言葉で説明できる」が、理解の物差しに

用語をまとめる作業も、相互レビューのためのドキュメントづくりも、制作物の解説ドキュメントづくりも、根っこは同じでした。人に説明できる形にしようとすると、分かったつもりで止まる場所が必ず出てきて、そこが自分の理解の境界線でした。説明できて初めて、理解したと言えるのだと思います。

AIに頼っても、「なぜそうなるのか」までは自分で理解する 

ポートフォリオ制作ではClaude Codeに頼りましたが、ただ動かすのではなく「なぜこの実装になるのか」を一つずつ確かめるようにしました。サーバーコンポーネントとクライアントコンポーネントの使い分けのように、設計の意図まで理解できると、AIの出力を鵜呑みにせず、自分の判断材料として使えるようになります。

理学療法の現場とは扱うものがまったく違いますが、「分からないことを一つずつ構造に分けて、順番に積み上げていく」という進め方は、案外これまでの経験と地続きだと感じています。

最後に

この2週間は、コードを書く以前の「土台」を、一つずつ確かめながら固めた期間でした。開発環境を整え、用語を自分の言葉で整理し、相互にレビューし合い、小さくても一つ制作物を作り切る—派手な成果ではありませんが、開発に参加するための足場が確かにできてきた実感があります。

ここからは、いよいよ開発案件管理ツールの開発そのものに入っていきます。この2週間で身につけた環境・ワークフロー・用語の基礎が、実際のプロダクトの中でどうつながっていくのか—その入り口に立てたことが、今いちばんの手応えです。

未経験から、本物のプロダクトに触れながら一歩ずつ理解を積み上げたい—そう考えている人にとって、QuinQueのインターンは良い環境だと思います。

目次