Next.js 未経験者が社内システムのフロントエンド開発をするまで

フロントエンド アドベントカレンダー2023

はじめに

この記事は BBSakura Networks Advent Calendar 2023 の 15 日目の記事です。

こんにちは、BBSakura Networks のシステム管理部に所属している澁谷です。普段は BBIX から委託されているシステムなどの開発・運用をメインに業務しています。

今回は新卒かつ Next.js 未経験者の私が、どのように Next.js に触れはじめてフロントエンド開発をしているのかお話ししようと思います。 私自身、学生時代は情報系に属してはいたものの、研究活動で先代が書いた C++ のコードを見よう見まねで真似したり他の言語も軽く触れる程度で入社前は浅く狭くの経験値でした。

はじめての Next.js

きっかけ

私は入社後の各部署を回る研修を終え、7 月に社内システムを開発する現在の部署へ配属になりました。配属後、フロントエンドかバックエンドのどちらから始めたいか問われフロントエンドの開発を選択しました。

学生時代の就活で行なった短期のインターンシップで HTML/CSS で軽い開発をした時に、コーディング後の完成物がわかりやすく目で見られることを魅力に感じていて、楽しく始められそうと思ったことが理由です。加えて、バックエンドの開発経験がなく不安に思っていたこともあります（そういえば情報系の学部を選択したのも、大学一年生の情報の授業で HTML/CSS を触って楽しかったことが理由の 1 つでした）。

ここではじめて Next.js と出会いました。

Next.js とは

ご存じだと思いますが、Next.js は React ベースの web フレームワークです。Next.js には以下のような機能と特徴があります。

  • Routing

    • A file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.

  • Rendering

    • Client-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering on the server with Next.js. Streaming on Edge and Node.js runtimes.

  • Data Fetching

    • Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.

  • Styling

    • Support for your preferred styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS

  • Optimizations

    • Image, Fonts, and Script Optimizations to improve your application's Core Web Vitals and User Experience.

  • TypeScript

    • Improved support for TypeScript, with better type checking and more efficient compilation, as well as custom TypeScript Plugin and type checker.

私が勉強を始めた 2023 年 7 月時点では、Next.js 13 が最新でした。後述 しますが、Next.js 13.4 からルーティングの種類に App Router が加わるなど大きく機能が変化する箇所がありました。利用して良いか不安だったので質問したところ、「新しい機能はぜひ使って！」という返答をいただきました。個人利用でなく会社という組織でも保守的にならず新しい機能をどんどん使っていくんだ！と感じたことをよく覚えています。

以降では、Next.js 13 の利用を前提に述べています。

勉強方法

私は、Next.js だけでなく React、TypeScript も未経験でした。そのため、実際に手を動かしながら勉強していくのが良いだろうと思い、先輩が教えてくださったチュートリアルを一から始めました。

各チュートリアル終了後時点でぼんやり理解し始めたので、実際に開発するフェーズに入っていきました。研修後の初仕事として、以前まで SQL や API を叩いて取得していた DB をブラウザ上で簡単に検索できるシステムの開発をすることになったので、以降はその開発を通してわからないことは調べつつ慣れていった形になります。

そのなかで、苦労した点や素直に感じた点などを初心者の目線からまとめていこうと思います。

Next.js 13 の壁

ルーティング

初心者にとってこれだけはすぐに抑えなければ！と感じたのはルーティングです。ルーティングにおいては、Next.js 13.4 から App Router が追加され既存の Page Router を加えた二種類からプロジェクトの作成時、設定できるようになりました。ディレクトリ構成と URL のパスの関係が変化したというのがわかりやすい説明かなと思います。

極論ドキュメントにすべて書いてあるのですが、英語で読むのに疲れてしまう＆日本語でもすぐに理解できるほどの知識がないため、慣れるのに苦労しました。チュートリアルでも片方しか経験しておらず、調べながらコーディングしているとどちらのルーティングを利用しているのか混同してしまい、無駄な時間を要してしまうことが多々ありました。

Page Router では pages ディレクトリ配下にディレクトリやファイルを追加することでルーティングされます。App Router ではルーティングに利用するファイルは page というファイル名である必要があります（表 1）。

（表 1） URL とルーティングの関係
URL App Router Page Router
http://ドメイン/books /app/books/page.tsx /pages/books.tsx
http://ドメイン/books/title /app/books/title/page.tsx /pages/books/title.tsx
http://ドメイン/books/1 /app/books/[number]/page.tsx /pages/books/[number].tsx

モックサーバーの構築

モックサーバーという単語もこの開発ではじめて触れました。モックサーバーとは、ローカル環境から API が使用できない時に実際のデータに変わるモックデータを返すサーバーのことです。この仕組みもよくわからず、先輩に何度も説明させてしまいました。。。m( )m

MSW（Mock Service Worker） を利用すると良いだろうというアドバイス＆口コミから、MSW の準備を始めました。しかし、Next.js 13 は MSW をサポートしていませんでした（少なくとも 2023 年 8 月ごろまでは）。どうにか利用できないかと、MSW のテストコードを動かそうと babel コンパイラを利用すると、Next.js のコンパイラと競合してしまい。。。調査を続けても同じように導入に苦労している記事しか見つけられず、MSW の公式 X で Next.js にサポートを呼びかけている のをようやく発見し、他の手段を取ることにしました。

現在調べ直すと、サポートしていない状況は続いているもののどうにか動かせている人はいるようです。しかし、私は以下の方法で解決できたのでご紹介します。

App Router の Route Handlers 機能を使用して、json-server でモックサーバーを建てテストデータを取得する実装です。この時、Next.js 本体は localhost:3000、モックサーバーは localhost:4000 など別々にローカルサーバーを立てる必要があります。返したいモックデータは単純なデータでしたし、軽く試した後に検証環境でもテストできるので機能としては十分でした。

社内システムの開発

上記の経験を通して、Next.js に多少は慣れたかなと思います。またシステムを動かすための VM を構築したりコーディングだけではない作業もはじめて経験し、どうにか初仕事のシステムがリリースできました。開発したシステムを利用した同期から「すごく便利！助かっている！」と言ってもらえてとっても嬉しかったです。ユーザーが身近な人でリアクション ＆ FB をすぐにいただけるのは、社内システム開発の魅力なのかなと感じます。

また、社内外問わず開発時には、ユーザーの目線に立って機能や使い方を考えていくことが必要だと思います。開発前のリクエストとヒアリングはありますが、開発における技術的なことだけではなく、各部署の業務内容や業務実態を知っておく必要があるなと感じました（研修時に各部署を回る経験ができたのはとても良かったです）。さらに、社内にはネットワークエンジニアが多いので、ネットワークの知識も必要になってくるなと思っています。

現在は Go 言語を使用したバックエンド開発にも取り組んでいます。Next.js と同様に勉強＋実際の業務でようやく慣れてきたと感じているところです。Go 言語の勉強時間はあまり取ることができず、すぐに既存プロジェクトにジョインする形でした。そのなかで効率よく勉強するために、すでに Go 言語の勉強をしていた新卒の同期にアドバイスをいただき以下の内容に取り組みました。

列挙すると多く見えますが、サッとドキュメントを読んで自分にとって難しそうに感じた範囲のみ手を動かした形になります。

配属から今までの期間でフロントエンド開発・バックエンド開発に取り組むことができており、何も知らなかった頃に比べるとシステムエンジニアとして成長できていると感じています。入社前ワクワクして想像していた通りの仕事ができていて嬉しいです（できない自分にもどかしさを感じることの方がまだ多くありますが）。

おわりに

このブログを書くために公式ドキュメントを見直していると、Next.js 14 がリリースされていました。高速化がメインで新しい API の追加はないそうですが、開発スピード早すぎませんか。。。すごい。このように新しい技術は絶えず生まれているので、良いものはすぐ吸収できるようにアンテナを張って勉強していきたいと思います。

以上、Next.js 未経験者の私が社内システムのフロントエンド開発をするまでのお話でした。 私の感想が多く含まれた記事になりますが、少しでも役に立てればと思います。読んでいただきありがとうございました！