前提
- プログラミングに関する(変数とか条件、関数などの）知識があること - html, css, javascript, reactあたりに興味がある
- MacのPC持ってる（なかったら買ってください
だいたい3つくらいの記事にすると思います。基本的なところだけで。
なぜNext.jsなの？
よくわからないけど始められるし、よくわからないけどデプロイできるし、知ろうとすれば多くを知れるからというのが早い話です。（説明はかなり省略してます。冗談ぬきで。）
この記事を読むとどうなれる？
初心者でもWebフロントエンドのことが少しわかるのとNext.jsでこれ以上ないくらいシンプルなホームページが出せて数年後すごい人になれます（たぶん
前準備
何も触ったことない人向けだと手順はこんな感じです。
- グローバルにインストールするもの
homebrew=便利なやつnodenv=node.jsのバージョン管理するやつyarn=作るもの管理するやつ
- ローカルにインストールするもの
nextreactreact-dom=Next.js用
- ページつくる
- 実行する
- 感想文書いてコメント欄に投稿する
今回は、使うやつらをグローバルにインストールするところだけまずやります
グローバルにインストールするもの
homebrew
まずは Command + spaceとかでMacのSpotlight検索を出してください。こういうの。
terminalって入力したらいつものやつが出てきます。
ここまできたら、homebrewのインストール手順にしたがってインストールしてください。
右のをコピペするだけ(20191228時点)。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew --versionみたいな brewコマンドが使えればOKです。僕は which xxxとか xxx --versionを使うことが多い。
下の画像みたいなのになったらコマンドがインストールされていないかパスが通ってないです。「パス」はあとで説明します。
nodenv
Node.jsっていうjavascript実行してくれるやつがいるんですが、いろんなバージョンがあります。バージョンによってひねくれた性格のやつがいます。なのでどのバージョンを使って開発するか明確にした方がいいです。明確にしておかないと後悔します。理由はそのうちわかるかもしれません。
nodenvのインストール方法はこれですが、さっきインストールした brewコマンドを使って brew install nodenvってやるだけだとまだ nodenvコマンド使えません。
理由はパスが通ってないからです。僕はもう nodenv入ってるんで使えますがみなさんはこんな状態になったはず。
パスについて
パスが通ってないというのは、Terminalさんが「nodenvどこにいるのかわからない」って言ってる、っていうことです
Terminalさんは PATHっていうグローバル変数に入ってるディレクトリを探す習性があります。
echo $PATHってやるとTerminalがどこを探して「nodenvない」って言ってるのかがわかります。
ちなみに nodenvは ~/.nodenvっていうディレクトリにインストールされてます。なんでそれがわかるのか？ ログを見ればわかりますちなみにエンジニアになりたてのころは ログはみましたか？と何度も煽られました。煽られ続けたおかげで成長できた気がする。さて本題に戻ろう。
~/.nodenv/shimsディレクトリに nodeコマンドやら npmnpxあたりがいると思うので、Terminalに ~/.nodenv/shimsディレクトリも探してもらわないといけません。
ということで、Terminalがbashだったら ~/.bashrc zshだったら ~/.zshrcとかっていうファイルに PATH="$HOME/.nodenv/shims:$PATH"を追加しましょう。 $HOMEっていうのは ~と同じです。たぶんどっちでもいいです。 先生どうやって追加したらいいかわかりませんとりあえず脳死して echo 'PATH="$HOME/.nodenv/shims:$PATH"' >> ~/.bashrcを実行するといいと思います。
時間がある人は vi ~/.bashrcとかやってみましょう。最初はどうやって入力するのかわからないと思います。そのあと人によってはカーソル動かす方法がわからないかもしれません。次にどうやって入力を終わるのかわからないかもしれません。最後にどうやって保存するのか、終了するのかがわからないと思います。考えても答えは出ないので絶対すぐに調べてください。
.bashrcとか .zshrcはTerminal開くたびに実行されるスクリプトです。でも今回は新しい行を追加したばっかりなのでまだTerminalに反映されてません。
反映するためにはTerminalを再起動するか、もしくはそのまま source ~/.bashrcとかをやりましょう。読み込むファイルとかは適宜読み替えてください。知ってる人は ~/.bash_profileとか ~/.zprofileとか使ってるかもしれませんし。
知らなくても大丈夫なんで何それ？っていう人は忘れても大丈夫です。知らなくて困ることはたぶんないでしょう。最悪のケースでも軽く煽られる程度で済みます（たぶん
それでは nodenv install --listと打ってみてください。
これはnodenvでインストールできるnodeのバージョンの一覧です。とりあえず頭が偶数のやつ選ぶといいです。 12.13.1とかにしますか。その場合、 nodenv install 12.13.1を実行しましょう。終わったら nodenv global 12.13.1も実行します。それぞれ特定のバージョンのインストールと、基本的に使うバージョンの指定をしてます。
node --versionとやったときに、下みたいになってればOKです。
こうなっていないあなた。もしかすると、すでにnodeをインストールしたことがある&&僕の書いた文章を読まずにPATHを設定して間違えたというレアケースの可能性がありますよ。PATHの設定確認してみてください。
yarn
yarnは、今回作ろうとしているやつのマネージャーみたいなやつです。監督みたいなやつ。具体的にはライブラリをバージョン指定でインストールしたりインストールしたライブラリを使ってうまいこといろいろやってくれたりします。最初はそれくらいの認識でいいです。
インストール方法はここに書いてありますが、これもnodenvのように brew install yarn --ignore-dependenciesとすればいいです。この手順では nvmのようなもの(nodenv)を使っているので --ignore-dependenciesを付けていますが、たぶんなくても大丈夫です。
終わったら yarn --versionなどで動作確認しましょう。
#1はいかがでしたか？
今回はグローバルにインストールするものをインストールしました。知らない人はこれだけでもかなり大変だと思うので分けました（僕が記事を書くのが大変なだけですすみません
次の#2ではローカルにインストールするものから説明して、実際にページを作って実行するところまでをやろうと思います。
#3はもう少し詳しくかけるところがあったら、補足する感じで知識を深められたらなと思います。