Webフロントエンド初心者はNext.jsからはじめよう

## 前提

- プログラミングに関する(変数とか条件、関数などの）知識があること
- html, css, javascript, reactあたりに興味がある
- MacのPC持ってる（なかったら買ってください

## なぜNext.jsなの？

よくわからないけど始められるし、よくわからないけどデプロイできるし、知ろうとすれば多くを知れるからというのが早い話です。（説明はかなり省略してます。冗談ぬきで。）

## この記事を読むとどうなれる？

初心者でもWebフロントエンドのことが少しわかるのとNext.jsでこれ以上ないくらいシンプルなホームページが出せて数年後すごい人になれます（たぶん

## 前準備

何も触ったことない人向けだと手順はこんな感じです。

- グローバルにインストールするもの
    - `homebrew` =便利なやつ
    - `nodenv` =node.jsのバージョン管理するやつ
    - `yarn` =作るもの管理するやつ
- ローカルにインストールするもの
    - `next` `react` `react-dom` =Next.js用
- ページつくる
- 実行する
- 感想文書いてコメント欄に投稿する

## グローバルにインストールするもの

### homebrew

まずは `Command + space` とかでMacのSpotlight検索を出してください。こういうの。

![スクリーンショット 2019-12-28 22.00.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/026b0966-cb00-95f1-dcf1-44b586a8b938.png)

`terminal` って入力したらいつものやつが出てきます。

![スクリーンショット 2019-12-28 22.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/1881904a-28a3-5959-9489-947a6f22375b.png)

![スクリーンショット 2019-12-28 22.25.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/10f19375-fed9-3c56-f712-30c43bf06bba.png)

ここまできたら、[homebrewのインストール手順](https://brew.sh/index_ja)にしたがってインストールしてください。
右のをコピペするだけ(20191228時点)。 `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"` 

`brew --version` みたいな　`brew` コマンドが使えればOKです。僕は `which xxx` とか `xxx --version` を使うことが多い。

下の画像みたいなのになったらコマンドがインストールされていないかパスが通ってないです。「パス」はあとで説明します。

![スクリーンショット 2019-12-28 22.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/068c4a0e-73c5-1378-bc67-80acaeda3375.png)

### nodenv

Node.jsっていうjavascript実行してくれるやつがいるんですが、いろんなバージョンがあります。バージョンによってひねくれた性格のやつがいます。なのでどのバージョンを使って開発するか明確にした方がいいです。明確にしておかないと後悔します。理由はそのうちわかるかもしれません。

[nodenvのインストール方法](https://github.com/nodenv/nodenv#installation)はこれです。まずはさっきインストールした `brew` コマンドを使って `brew install nodenv` とすろと `nodenv` コマンドが使えるようになります。

ただし、 `node` `npm` `npx` あたりの本来使いたいコマンドが使えません。理由はパスが通ってないからです。

#### パスについて

パスが通ってないというのは、Terminalさんが例えば「nodeどこにいるのかわからない」って言ってる、っていうことです

Terminalさんは `PATH` っていうグローバル変数に入ってるディレクトリを探す習性があります。

`echo $PATH` ってやるとTerminalがどこを探して「nodeない」って言ってるのかがわかります。

ちなみに `nodenv` は `~/.nodenv` っていうディレクトリにインストールされてます。なんでそれがわかるのか？ **ログを見ればわかります** ちなみにエンジニアになりたてのころは **ログはみましたか？** と何度も煽られました。煽られ続けたおかげで成長できた気がする。さて本題に戻ろう。

`~/.nodenv/shims` ディレクトリに `node` コマンドやら `npm` `npx` あたりがいると思うので、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` とか使ってるかもしれませんし。

知らなくても大丈夫なんで何それ？っていう人は忘れても大丈夫です。知らなくて困ることはたぶんないでしょう。最悪のケースでも軽く煽られる程度で済みます（たぶん

### node.jsのインストール

それでは `nodenv install --list` と打ってみてください。

![スクリーンショット 2019-12-28 23.10.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/de5b053d-1478-d948-e7ca-0e9499fc111e.png)

これはnodenvでインストールできるnodeのバージョンの一覧です。とりあえず頭が偶数のやつ選ぶといいです。 `12.13.1` とかにしますか。その場合、 `nodenv install 12.13.1` を実行しましょう。終わったら `nodenv global 12.13.1` も実行します。それぞれ特定のバージョンのインストールと、基本的に使うバージョンの指定をしてます。

`node --version` とやったときに、下みたいになってればOKです。

![スクリーンショット 2019-12-28 23.13.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/25be877e-f955-a3ac-48ec-e95480a50dee.png)

こうなっていないあなた。もしかすると、すでにnodeをインストールしたことがある&&僕の書いた文章を読まずにPATHを設定して間違えたというレアケースの可能性がありますよ。PATHの設定確認してみてください。

### yarn

`yarn` は、今回作ろうとしているやつのマネージャーみたいなやつです。監督みたいなやつ。具体的にはライブラリをバージョン指定でインストールしたりインストールしたライブラリを使ってうまいこといろいろやってくれたりします。最初はそれくらいの認識でいいです。

インストール方法は[ここ](https://yarnpkg.com/ja/docs/install#mac-stable)に書いてありますが、これもnodenvのように `brew install yarn --ignore-dependencies` とすればいいです。この手順では `nvm` のようなもの(nodenv)を使っているので `--ignore-dependencies` を付けていますが、たぶんなくても大丈夫です。

終わったら `yarn --version` などで動作確認しましょう。

## ローカルにインストールするもの

まず `グローバル` `ローカル` というのを説明すると、今から作ろうとしているプロジェクト内のみで使うものが `ローカル` で、それより外の範囲を `グローバル` と考えてください。上の手順では、Mac全体を通して使うことが多いものをインストールしました。

今回はNext.jsを使ってページを作ります。

### Next.js, Reactのインストール

まずは `mkdir hello-next` でディレクトリを作って、 `cd hello-next` で作ったディレクトリに移動します。

次に `yarn init -y` で、プロジェクトを初期化します。 `ls` コマンドを実行すると、 `package.json` というのが作成されていることがわかります。

それでは、実際にライブラリをインストールします。[Next.jsのインストール](https://nextjs.org/docs/getting-started#setup)はここを参考にすればよいのですが、今回は `npm` の代わりに `yarn` を使うので、 `yarn add next react react-dom` を実行します。そうすると、 `package.json` に `dependencies` という項目が追加され、 `yarn.lock` ファイルと　`node_modules` ディレクトリが作成されます。

何が起こったかというと、今回使うライブラリ `next` `react` `react-dom` の3つのライブラリと、それらが依存しているライブラリが `node_modules` というディレクトリの下にインストールされ、その全てのバージョンが `yarn.lock` というファイルに記録されます。

あとは、Next.jsを起動するためのコマンドを `package.json` に追加します。Visual Studio Codeなどのエディタを使って、 `package.json` を開き、次のような設定を追加します。

```
  "scripts": {
    "dev": "next"
  }
```

これを追加することで、 `yarn dev` で `next` を実行することができるようになります。これで、Next.jsを使えるようになりました。

## ページをつくる

`mkdir pages` コマンドで `pages` ディレクトリを作り、 `index.jsx` というファイルを作りましょう。これが、ページに何を表示するかを書き込むファイルになります。

`index.jsx` ファイルの中は、まずは次のようにします。

```
export default () => <h1>Hello Next.js!</h1>
```

## 実行する

そして、 `yarn dev` コマンドを実行します。

`http://localhost:3000` というURLにアクセスすると、上で作ったページが表示されます。

## あとがき

実はこの記事を書いた後に、プログラミングの勉強したいという人に教えてみたんですが、やっぱりわからないことだらけのようです。

理由は簡単で、こんな分量が少ない記事なのに、知らない単語（覚えること）が超大量にあります。

- Terminalって何？
    - コマンドって何？
    - `ls` `cd` `mkdir` `rm` `vi` `less` `cat` `which` って何？
    - 引数って何？
- nodeって何？
    - javascriptって何？
- そもそもhtmlって何？
- ...

みたいなところから始まり、かなり様々な疑問が湧いてくると思います。

ただ、個人的に一番大事だと思っていることがあります。僕も元々は何もわからない初心者だったので、今となっては何がわからなかったかがわかるんですが、最初は何がわからないかすらわからない状態です。質問したくても何を質問していいかわからない。

だから、初心者こそ一度全体を眺めることができるようになることは非常に大事です。Next.jsは開発用にサーバーを立ち上げることができるし、そこにアクセスして作った画面を表示することができる、いわばほぼ開発の全体を眺めることができるライブラリです。なので初心者にもってこいだと思いました。

なので、ひととおり上の作業を終えたら、少し遊んでみることも大事ですが、どこがわからなかったのか、わからない単語や概念について必ず調べるように心がけてください。どこでつまづいたのかがわかれば、人に質問することができます。そうすると、成長が早くなると思います。

この記事も完璧というわけではないので、もしよければ、どんな方でも思ったことがあれば感想を書いていただいて大丈夫です。

読んでいただいてありがとうございました！