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検索を出してください。こういうの。

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 コマンドが使えるようになります。

ただし、 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 と打ってみてください。

これは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 などで動作確認しましょう。

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

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

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

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

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

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

それでは、実際にライブラリをインストールします。Next.jsのインストールはここを参考にすればよいのですが、今回は 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は開発用にサーバーを立ち上げることができるし、そこにアクセスして作った画面を表示することができる、いわばほぼ開発の全体を眺めることができるライブラリです。なので初心者にもってこいだと思いました。

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

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

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