React.js, Next.js の勉強

2022-06-05Hack Util Apps 開発記録

Next.js で Web サービスを作るということはまずは Next.js から勉強しないといけません。

Next.js を勉強するとなるとまずはその元となる React.js から勉強しないといけません。

てことで、僕の開発は React.js の勉強から始まりました。

初回から:

React

React.js 自体は前から聞いたことがあるものの何をするものなのか全く分かっていませんでした。

では、どうやって勉強しようかと思って公式サイトとかの紹介を見ていたら、チュートリアルサイトがあるのを見つけました。公式のチュートリアルがあるのに使わないわけにはいかない!ということでまずはチュートリアルにそって三目ならべのアプリを作ってみました。

http://apps.probmkr.com:5001

このアプリは、ちゃんとチュートリアルの最後に書かれている補充のタスクまで完了した完成系みたいなものです。

このチュートリアル自体は数日で完成しました。確か今年のゴールデンウィーク(2022/4/29)日までには終わってたと思います。

製作中の出来事については、もうほぼ忘れたし、あんまりなんなくできたと思うので割愛します。

ただ、一つだけいいなと思ったことがあります。それは、 Next.js も似た感じですが、 React.js のプロジェクトは

npx create-react-app my-app

というコマンドを打つだけで、 my-app というディレクトリが勝手に作られ、その中にテンプレートが生成されることですね。

package.json の中の script も勝手に設定してくれるんですよしかも。

Next.js

さあ、本題の Next.js の勉強に入りました。

実は Next.js を本格的に勉強し始めたのはゴールデンウィークが終わる頃(2022/5/6ごろ)だったんです。

なぜなら、ゴールデンウィーク中は Twitter や Discrod でのボイチャにはまり込んで何もやってなかったからです。

この二つのせいで相当な時間を無駄にしました。皆さんも常に自分が時間の無駄をしていないか確認することをお勧めします。でないと人生の大部分をドブに捨てますよ。

さて、勉強を始めたのだが、実は Next.js の勉強自体はゴールデンウィーク三日目くらいから始めていました。ですが、ボイチャしながらの作業で全く集中していなかったため 1/3 程度の知識しか入っていませんでした。

なので、結局後ほど勉強し直すことになってしまいました。

Next.js の場合も公式チュートリアルがありました。英語で書かれていたのでより理解に時間がかかってしまいましたね。

ですが、根気強く読んで半分程度は理解しました。あとは、実際にコードを打って覚えました。やはりチュートリアルのいいところは自分でコードを打って理解できるところですね。

今回はあくまでも開発記録なので、 Next.js のチュートリアルの進め方については説明しませんが、日本語でやりたいという方はこちらのサイト1を参考にしてみてはいかがでしょうか。

まあ、元の記事を読むのがお勧めですが。やっぱり英語は大事ですね。

次回予告

次回は実際に自分の新しいプロジェクトが始まります!

今度こそ Hack Util Apps 作成開始です!

最後まで読んでいただき、ありがとうございました。

次回:

脚注

  1. 私は中身を読んだことはないので正確な記事かどうかは知りません。もしもその記事が悪かったりして、私に書いて欲しいなんてことがあればコメントくれれば考えてみます。