みなさんはじめまして。まめといいます。
Web開発完全初心者です。
この度、0からNext.jsを勉強し、Webアプリの開発に挑戦してみたので、その過程などを記録しようと思います。
なお実際に制作したものは、 #3-制作物 にリンクを貼っています。
1. 自己紹介
改めまして、まめです。
高専の本科でC, Java, processing, pythonなどに軽く触れた後、新卒でIT企業に入社し、3年半ほど社内SEとして勤務していました。
それからはちょっと色々あって、3年ほど海外の飲食店で働いていました。
就職してからは、多少スクリプトを書いたりスプレッドシートで計算を自動化したりする機会があったものの、プログラミングとはほぼ無縁の生活をしていました。
そんな状態から、改めてプログラミングの勉強をしようと思い、先月末からNext.jsの勉強及び個人開発を始めました。
そして半月ほど費やした現在、レベルは低いものの、ブログもどきのサイトが出来上がったので、公開がてら記事を作成してみました。
なお、この挑戦を始める前、Web開発に関する知識は以下のレベルでした。
- 数年前にprogateでHTML, CSS, JavaScriptの基礎を勉強したことがある
- Vue.jsにほんの少し触れたことがある
- Twitterもどきを作ろうとして、モチベが続かずに途中で匙を投げた
- Nuxt.js, Next.jsに関しては名前を知っている程度
- バックエンドはRDBやSQLのちょっとした知識がある程度でほぼ素人同然
2. 開発過程
前章で述べたように、HTMLやJSに関する最低限の知識は仕入れていたので、そこを出発点として開発を始めました。
なお、開発にあたりあえてAIは使用していません。今回はWebアプリ開発と同様にNext.jsの学習そのものを目的としていたことと、何も知識がない状態でAIが何となく動くものを作っても、制作物の良し悪しが自分では判断できないからです。
2-1. 開発するものを決める
前回Vue.jsの勉強をしていた時は、学習を経た上で作りたいものが特になく、途中で開発に飽きるという経験をしました。そこで、どんなものを作るかという目標を第一に定めました。
いくつか案はありましたが、SNSやブログのように個人が何らかの投稿をできるサイトだと作るものがイメージしやすいと思い、「夢を投稿するサイト」を最初の目標にしました。
2-2. 使用する言語の選定
単にWeb開発といえども、今日では使用する言語やフレームワークの選択肢が幅広いです。
軽く調べたところ、今はNext.jsが主流ということで、とりあえずはその流行に乗ることにしました。
結局触ってみないことには向き不向きもわからないため、もし向いてないと思えば、その時に別の言語へ乗り換える方針にしました。
一応、Next.jsは初心者にとって学習コストが高いという評価をする方もちらほら見受けられましたが、フロントエンドとバックエンドを両方実装できるというのは大きなメリットだと思います。
2-3. ReactとNext.jsの学習
Next.jsはReactベースのフレームワークということですが、私はReactにも触れたことがありません。
そこで、両方を一気に勉強することになりました。
幸いなことに、運営元のVercelがハンズオンを公開してくれているので、そこでReactとApp Routerのコースを受けました。内容はかなり充実しており、これだけで簡単なアプリを作成するための知識は揃うと思います。
2-4. Webアプリ開発
基礎を抑えたら、あとは実践あるのみです。
前述のApp Routerのコースでハンズオン的にWebアプリを制作し、基本的な機能を一通り実装しているため、それをなぞるように自身のWebアプリを作成しました。
"ハンズオンをなぞる"とはいえ、コースの教材として元々実装されていた細かい部分を自身で再現したり、自分の作りたいものに合わせてカスタマイズしたりするのは簡単ではありません。追加で情報を仕入れながら、何とか動くものを作れるようになりました。
3. 制作物
こちらのリンクで公開しています。
事前の連絡なしで利用していただいて大丈夫です。
3-1. 概要
Your Own Fiction という名前の、夢を投稿するサイトです。なお、ここでいう夢は目指す方の夢ではなく、夜見る方の夢です。
Own がウインクしている顔っぽく見えて可愛かったので、ところどころ Ow⋀ に置き換えています(wもωに換えようとして忘れていました)。
閲覧だけならアカウントなしで利用可能です。投稿するにはUsername & Passwordによる登録およびログインが必要になります。
3-2. 実態
Next.jsのApp Routerを使用して開発したアプリを、Vercel + Supabaseでデプロイしています。
コードをGitHubにアップしてVercelと連携させるだけでいい感じにデプロイしてくれるので感動しました。変更点も、mainブランチにマージするだけで勝手に反映してくれます。
Supabase(データベース)も、Vercelのダッシュボードから作成 & 連携できます。
やり方はハンズオンで解説されています。
3-3. 実装した機能
現状では最低限のUIとアイコンしか配置しておらず、どこを押せばどの操作ができるかという説明は用意できていません。ユーザーアンフレンドリーですみません...
実装済み機能の一覧としては以下の通りです。
- アカウント認証 (登録、ログイン、ログアウト)
- 記事(投稿)の新規作成、編集、削除
- 記事の表示、検索
- パスワードの変更
3-4. ブラッシュアップしたい箇所
まだまだハンズオンで扱った内容を全て反映できているわけではありませんし、未実装の機能もあります。
今後も開発を続けていくなら、以下のことに取り組みたいと思っています。
- より精密なエラーハンドリング
- サーバ側でのアクセスログ集積
- ポップアップやダイアログの追加
- Suspense(ストリーミング?)の導入
- 機能追加
- 記事のブックマーク
- 他アカウントのフォロー
4. その他詳細
その他、開発に関する小話はこちらにまとめておきます。
4-1. なぜ夢なのか
少し前から「こういうのを形にしたら面白そうだな」という思いつきをストックしており、その中でも「夢の投稿」であればブログの形式で実装しやすそうだと感じ、トップバッターとして制作してみました。
ユーザーから見ても、夢はそれ自体が荒唐無稽で面白いので、わざわざ内容を1から考える必要がなく、覚えている内容を書くだけであれば投稿のハードルも低いのではないかと考えています。
ただ単にくだらない夢を見て楽しむでもいいですし、他人の夢からインスピレーションを得て別の創作活動に活かすといった使い方もしてもらえたらと思っています。
(もちろん、機能がもっと充実してアクティブユーザーが増えたらの話ですけど...)
4-2. Reactの学習
HTML, CSS, JavaScriptに関する基礎知識があれば、前述のハンズオンでつまずくことはないと思います。
また、開発時によほど細かい仕様まで突き詰めようとしない限り、追加で勉強する必要はほとんどありません。
今回はNext.jsを取り扱うにあたり、そのベースとなっているReactがどんなものなのかを知っていれば十分です。
何か引っかかることがある時に、その都度調べればOKだと考えています。
4-3. Next.jsの学習
ハンズオンを一通りこなせば、Next.jsを利用したWeb開発において、最低限必要な知識と実装が推奨される要素は理解できます。
ただし、App Routerのコースは関連するモジュール?パッケージ?の仕様変更や各自の作業環境の違いにより、最初から最後まで解説されている通りに進まない可能性があります。私は2点つまずきました。
1点目は、Chapter1でpnpmのv11以降を使用してセットアップを行う場合、デモアプリ作成時に以下のエラーが表示されることです。
https://nextjs.org/learn/dashboard-app/getting-started#creating-a-new-project
[WARN] The "pnpm" field in package.json is no longer read by pnpm.
package.json内にあるpnpm用のフィールドが読み込まれなくなっているため、該当箇所を pnpm-workspace.yaml に移行させないといけません。
関連する公式のドキュメントを貼っておきます。
2点目は、Chapter6でデータベースのSeedingを実行する際、ブラウザのロードが数分経っても終わらなかった=Seeding完了のメッセージが表示されなかったことです。軽く調べてみましたが、原因は不明のままです。
https://nextjs.org/learn/dashboard-app/setting-up-your-database#seed-your-database
何回か同じ操作をしていたら、完全ではないにせよDBにサンプルのデータが登録されたので、重複したデータを削除して次の操作に移りました。
問題を解消できなかったのはモヤモヤしますが、Seeding以外でもDBにデータを登録する方法はありますし、以降の学習にはそこまで大きな影響がなかったので追求はしていません。
4-4. 開発に関して
使用した主要なライブラリやフレームワークは以下の通りです。
- デザイン(CSS) : Tailwind CSS
- 各種アイコン : Heroicons
- 認証 : auth.js v5, bcrypt
- DB連携 : Postgres.js
- データ検証 : Zod
基本的にハンズオンで触れたモノを踏襲する形で各機能を実装したため、全く理解できないという部分はなかったです。TailwindでサクッとUIを整えたり、フロントエンドとバックエンドを同時に開発したりできることは素晴らしいです。
ただauth.jsに関しては、設定ファイル、関数実行ファイル、ユーザーの入力フォーム、プロキシなど関係するファイルが多く、自分の望む挙動を実現するだけでもちょっと苦労しました。
5. 感想
とりあえず動くものを作成してみた結果、Next.jsは決して初心者でも手をつけやすいフレームワークとは断言できませんが、その分単体でカバーできる範囲が広く、複数の言語やフレームワークを勉強して組み合わせる必要がないのは大きなアドバンテージだと思います。デザイン、フロントエンド、バックエンドをそれぞれ専門でやるのではなく、一人ないしは少人数でアプリを組み上げるのであれば、Next.jsは有力な選択肢だと感じました。
開発全体的な話だと、今まさに利用しているQiitaをはじめ、普段何気なく利用しているSNSやWebサービスなど、商用で公開されているサービスのクオリティがいかに高いかを実感しました。
なんとなくこう動いているんだろうなと予測することは容易ですが、いざ自分で作ってみようと考えると、なかなか思い通りにはいかないですね。
とはいえ、今回の挑戦で全く知識がなかった状態から基本を抑えるまでには成長できたので、いつかは個人で、もしくは誰かと共同でサービスをリリースできたらいいなーとは思ったりします。いつになるんでしょうね。
6. 最後に
本編とは直接関係ないですが、実は現在離職中で、今後どんなことをしようか模索しています。
取り組むといいことや、勉強するといいテーマなどがあれば是非とも教えていただきたいです。
逆に、私のようにNext.jsに触れたばかりでわからないことがある方、ハンズオンに登場するレベルの内容であれば回答できますので気軽にお尋ねください。一緒に頑張りましょう。
それでは、最後までご覧いただきありがとうございました。