なんとなくNext.jsで自己紹介サイトを作ってみた。Part.1（環境構築編）

前置き

みなさん初めまして、だらけと申します。
現在、某専門学校に通っています。

まずは私のnoteを見てくださってありがとうございます。
これから、やったことなどをゆる〜くアウトプットしていければと思っておりますので、興味がございましたら見ていってください。

なので何か不備がありましたら、生暖かい目で見ながら教えていただけると幸いです💦

それでは、前置きはさておいて本題に入っていきます。

使ってる機材、環境

PC
MacBookAir (M1)

テキストエディタ
VScode

バージョン管理システム
Git

環境構築

①VScodeをダウンロード

※なぜVScodeにしたのかというと、多種多様な拡張機能がある・GitHubと連携することができるからです。

②VScodeに日本語化の拡張機能を入れて、VScodeを再起動

バージョンによっては、VScodeだと下の方に「日本語の拡張機能をインストールしますか？」というふうに出てきます。(多分)

③Gitをインストール

まずGitをインストールするために、Homebrewというパッケージマネージャーをインストールします。(他にも色々やり方がありますが、今回はこれでいきます)

下のコマンドをターミナルに貼り付け、実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

パスワードを入力するとインストールが始まります。
途中でPress RETURN to continueみたいなのが出てきたら、Enterで大丈夫です。

M1でなければ、これでHomebrewが使えるようになりますが、M1を搭載したMacBookなどを使用している場合は、pathを追加する必要があります。

インストールが終わる前に下記のようにターミナルに出てくるので、

==> Next steps:
-Add Homebrew to your PATH in /Users/ユーザ名/.zprofile:
    echo ‘eval “$(/opt/homebrew/bin/brew shellenv)”‘ >> /Users/ユーザ名/.zprofile
    eval “$(/opt/homebrew/bin/brew shellenv)”
-Run 'brew help' to get started
-Further documentation:
    https://docs.brew.sh

自分自身のターミナルの下記の部分をコピーして、ターミナルで実行してください。

echo ‘eval “$(/opt/homebrew/bin/brew shellenv)”‘ >> /Users/ユーザ名/.zprofile

後は、Homebrewが使えるかどうか

brew help

や

brew --version

などで試してみてください。

Homebrewのインストールが終わったら、後はGitを入れるだけです！
下記のコマンドを実行してみてください。
(一応公式サイトの説明貼っておきます)

brew install git

ついでに、git-guiも入れておくといいかもです

brew install git-gui

④nvmをインストール

nvmとはNode Version Managerの略語で、簡単に言ってしまえばNode.jsのバージョン管理ツールです

とりあえず細かい話は置いといて、下記のコマンドを使ってnvmをインストールしましょう

brew install nvm

正常にインストールが終了すると、$HOMEで下記コマンドでディレクトリを作成

mkdir ~/.nvm

して、

vi ~/.zshrc

で、.zshrcの中に入って下記のものを追記してください

export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

そして、ターミナルを再起動するとパスが通るようになります。

後は、

nvm ls-remote

で最新バージョンを確認し、

nvm install v(任意のバージョン)

でインストール！

最後に、下記のコマンドで先ほど打った任意のバージョンがインストールされているか確認します

node -v

これで任意のバージョンの数字と同じものが出てたら無事終了です！！

後書き

というわけで今回は環境構築編でしたが、いかがでしたか？(記事のテンプレ)
このような記事を書くこと自体初めてだったので、これで合ってるのか？感はありますがこれから何とかしていくので許してください💦

次回は、もうちょっと詳しい話に入れるかなと思ってます！
それでは今回はこれで失礼しますm(__)m
書き忘れていた物があったので追記します。7/14

Twitter→@darake_nai