create-next-appで訊かれていること
前提
Next.js v13.4.3 での話です。
後述の回答の指針は、あくまで執筆者個人の一意見です。参考までにどうぞ。
はじめに
フロントエンド開発に入門じゃい。Reactじゃい。Next.jsじゃい。
と息巻いて、とりあえずcreate-next-app
を叩いたら
$ npx create-next-app my-next-app
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
✔ What import alias would you like configured? … @/*
えーと・・・?
訊かれていること
✔ Would you like to use TypeScript with this project?
このプロジェクトでTypeScriptを使いたいですか?
TypeScriptとは
JavaScriptに型の機能を導入したプログラミング言語。
チーム開発するならJavaScriptではなく、TypeScriptが主流みたい。
JavaScriptと比べると日本語の情報が少ない(=学習がやや大変)。
回答の指針
以下がよいかと思います。
JavaScriptわかる | TypeScriptも勉強したい | Reactわかる | 回答 |
---|---|---|---|
Yes | Yes | Yes | ⇒Yes |
Yes | Yes | No | ⇒No |
Yes | No | - | ⇒No |
No | - | - | ⇒No |
✔ Would you like to use ESLint with this project?
このプロジェクトでESLintを使いたいですか?
ESLintとは
作成したコードを機械的にレビューしてくれるツール(静的解析ツール)。
また、作成したコードを整形(フォーマット)してくれる機能も有する。
回答の指針
使用するのが大半っぽいし、あって困ることないので。
回答 |
---|
⇒Yes |
✔ Would you like to use Tailwind CSS with this project?
このプロジェクトでTailwind CSSを使いたいですか?
Tailwind CSSとは
最近流行ってるCSSフレームワーク。
HTMLタグのclass属性に定義されたの値を記入してスタイル設定を行える。
学習コストはやや高めの印象。設定ファイルも増える。
回答の指針
以下がよいかと思います。
CSSわかる | Tailwind CSSも勉強したい | 回答 |
---|---|---|
Yes | Yes | ⇒Yes |
Yes | No | ⇒No |
No | - | ⇒No |
src/
directory with this project?
✔ Would you like to use このプロジェクトでsrc/
ディレクトリを使いたいですか?
src/
ディレクトリとは
Next.jsプロジェクト直下に配置するディレクトリ。使っても使わなくてもいい。
ある程度の規模のプロジェクトになるとソースコードのファイルが大量にできるので、専用の置き場としてsrc/
ディレクトリを用意するのが慣例。
my-next-app
|-- node_modules # 外部パッケージ置き場
|-- pages # jsx/tsxファイル置き場(この配下がURLと対応する=ルーティングされる)
|-- public # 静的ファイル置き場
`-- styles # cssファイル置き場
my-next-app
|-- node_modules # 外部パッケージ置き場
|-- public # 静的ファイル置き場
`-- src
|-- pages # jsx/tsxファイル置き場(この配下がURLと対応する=ルーティングされる)
`-- styles # cssファイル置き場
回答の指針
以下がよいかと思います。
WEBアプリを作るぞ | 回答 |
---|---|
Yes | ⇒Yes |
No(Hello Worldぐらいしかしないよ) | ⇒No |
✔ Use App Router (recommended)?
App Routerを使いたいですか?(推奨)
App Routerとは
2023/05/05に安定版としてリリースされた、Next.jsの新しいルーティング機能。
今まではPages Routerというルーティング機能だったんだけど、新しいのができた。
recommendedとあるように、Next.jsは今後App Routerを推していくみたいです。
回答の指針
本記事の執筆時点(2023/05/25)は、かなり情報が少ないです。
Next.js初学者なら、まずはPages Routerを理解したほうがよいと思います。
回答 |
---|
⇒No |
✔ Would you like to customize the default import alias?
デフォルトのインポートエイリアスをカスタマイズしたいですか?
インポートエイリアスとは
JavaScript/TypeScriptのモジュール(=ファイル)から、他のモジュールを読み込むことをインポートといいます。
// 他のモジュール SamplePageMain.jsx を読み込む
import { SamplePageMain } from "../../../commponents/mains/SamplePageMain"
このインポートの読み込み元モジュールは相対パスで記載するのが基本なのですが、プロジェクトのディレクトリ階層が深くなると、参照が分かり辛くなります。例で言うと../../../
の部分が分かり辛いですよね。
これを解消するのがインポートエイリアスという機能です。デフォルトでは@/
がソースコードのルートディレクトリを示します。
先の例をインポートエイリアスを使って書き換えると以下になります。
// 他のモジュール SamplePageMain.jsx を読み込む
import { SamplePageMain } from "@/commponents/mains/SamplePageMain"
回答の指針
質問は、インポートエイリアスのデフォルト値@/
を変更したいか?ということ。
初学者にはどうでもいいところなので、もちろん。
回答 |
---|
⇒No |
✔ What import alias would you like configured?
設定したいインポートエイリアスは何ですか?
直前の質問をYesと答えちゃいましたね
初学者は、インポートエイリアス変えたい意図はないでしょう。
おすすめされるものは何でもYesと答えたい人なんですね。
回答の指針
何も考えずEnterを押せば、結局デフォルトの値が設定されるようになってます。
感想
create-next-app
って初学者向けの勉強用ツールではなくて、簡単にNext.jsプロジェクトのひな型を用意できるツールなんですよね。
なので、勉強のためにNext.jsを触ってみたいなっていう人がとりあえずで実行すると、最初に躓くポイントじゃないかな。と思いました。
少なくとも私は冒頭の通り、 えーと・・・? となった。
Discussion