環境構築 – ﾉﾘｰｰｰﾝ’s Blog

備忘録です。

環境・前提

下記の環境・前提で開発しています。

Mac OS Monterey 12.1
Google Chrome 101.0.4951.54（Official Build）（arm64）
VSCode
Git管理

免責

仕事としてのWebサイト制作業務経験は多くなく、初学者です。

ドメイン名・サーバの確認

※ドメイン名とサーバがどのようにローカル環境に関わってくるか

ディレクトリを作成

デスクトップやDocumentsの中など、任意の場所にプロジェクトフォルダを作成します。

ネーミングは[projectname_frontend]などのようにしています。

例：

NPO法人Xのフロント作成の場合　… npox_frontend
株式会社Yのバックエンド作成の場合　… y_backend

VSCodeで開く

VSCodeを起動し、⌘+Oから作成したプロジェクトフォルダを選択。

New Fileを選択したらindex.htmlを作成します。

作成したhtml内で半角!を入力し、tabキーを押下するとhtmlのフォーマットが出てくるはずです。

あるいはHTMLテンプレートのBoilerplateを使っても良いと思います。

https://html5boilerplate.com/

langをjaに変更、title入力など現時点でわかる箇所を入力し、保存（⌘+S）。

全体の骨組みだけ先にマークアップしておきます。

VSCodeの場合は（htmlファイル内で）下記画像の状態でEnterキーを押すとHTMLに変換してくれます。省エネ！

ざっくり枠組み

<div id="wrap" class="st-wrap">
  <header id="header" class="sp-header">
     <h1 class="sp-header-logo">
       <a href="">
         <img src="" alt="" />
       </a>
     </h1>
     <p>test view</p>
  </header>

  <main id="container" class="sp-container"></main>

  <div class="sp-pagetop js-scrolltop" style="display: none"></div>

  <footer id="footer" class="sp-footer"></footer>
</div>

ちなみに保存したプロジェクトを素早くブラウザで確認するためのプラグインがあります。下記にまとめましたので、気になる方はぜひ。

https://nolyc.net/programming/vscode-live-server/

git管理

チームで分業したりしているとgit管理が必要になります。そうでなくても、一通りコーディングを終えた後にやっぱり前のバージョンに戻したい！という時があるので、私はどのプロジェクトでもgit管理はしておくことにしています。

会社ではbacklogを使用していますが、個人の方であればgithub（非公開）で管理するなどすれば良いと思います。

githubでのやり方は下記にまとめました。

https://nolyc.net/programming/git-connect-localtoremote/

上記記事ではSourceTreeを使用したGit管理方法を記載していますが、何もSourceTreeを使用せずともGit管理はVSCode上でできます。

https://code.visualstudio.com/docs/editor/versioncontrol

ここでは詳しい操作は省きますが、気になる方はググってみてください。

私が行った手順は以下の通りです。

VSCode上でのGit初期化

赤のアンダーラインが実行コードです

VSCode上で⌘ + jでターミナルを開き
cd ディレクトリパス（パスはVSCodeのフォルダ名を選択しOption + ⌘ ＋Cで取得できる）で該当ディレクトリに移動
gitを初期化(git init)
ブランチ名を変更（git branch）
現在のワークツリーの内容を全てindexに追加（git add *）
コミット（git commit -m ‘first commit’）

GitHubへのリモートリポジトリへのpush方法は先ほど紹介した記事「[git]すでに作成したフォルダをgit管理してリモートと紐付け」にも書きました。

以降、随時アップデートしていく予定です。

いつもお世話になっております。仕事でVue.jsを使うことになったのですが、当方、Vue.jsどころか Nuxt.jsもjavascript も全然使ったことのない、デザイナー上がりのディレクターです。こりゃやばいぞ…！ということで、備忘録も兼ねてしたためておくことにしました。結構焦ってます。

Nuxt.jsによるVue.js開発環境

当方の環境は下記の通り。

MacOS Big Sur
バージョン11.2.3(20D91)
チップ　Apple M1
メモリ16GB

早速、環境を構築していきます。

Node.jsはVue.jsの稼働に必要なJavaScript実行環境、

Vue.jsはJavaScriptフレームワーク、

Nuxt.jsはVue.jsでの開発に必要な機能を盛り込んだフレームワーク

という認識です。

いずれにせよNode.jsがないと始まらないっぽいのでNode.jsの環境を整えていくことにしました。

ここのサイトを参照→MacにNode.jsをインストール

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

順番としては

Homebrewのインストール
nodebrewのインストール
Node.jsのインストール

としていけばいいのね…？と思ったら、anyenvとnodenvを使ってプロジェクト毎（フォルダ毎）にNodeのバージョンを指定して実行する方法もあるとのこと。

Homebrewのインストール
anyenvのインストール
nodenvのインストール
Node.jsのインストール

https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f

そんなん便利な方を使った方がええですやん、ということで今回は下の記事を参照して進めました。nodistを使うという手もあるようなのですが、この辺は宗教みたいなもんです、と弊社エンジニアが申しておりましたので、ひとまずは目を引かれたanyenvとnodenvを採用し、今後色々試してみたいと思います。

Homebrewのインストール

Homebrewとは

Homebrewは、Mac用のパッケージマネジャです。ツールのインストールなどをするのに便利なものなのですが、今回はanyenvをインストールするために（nodenvも？）このHomebrewをインストールします。まどろっこしいな！と思いつつも、これがなかったらもっと大変なんだろうなと想像し拝みながらインストールします。開発者の方々に足を向けて寝れませんね！まあ地球は丸いからどこ向いても足向けて寝ることにはなるのかな。

Homebrewのインストール手順

https://brew.sh/index_ja.html

サイトに貼ってあるスクリプトをMacのターミナル上で実行します。コピペしてEnterです。

すると何やらカリカリ始まります。（初心者丸出しの語彙力）

Next steps:
- Add Homebrew to your PATH in /Users/n.okawa/.zprofile:
&nbsp; &nbsp; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/n.okawa/.zprofile
&nbsp; &nbsp; eval "$(/opt/homebrew/bin/brew shellenv)"
- Run `brew help` to get started
- Further documentation:&nbsp;
&nbsp; &nbsp; https://docs.brew.sh

とあります。

ほうほうNext stepsがあるのねと思いつつもこちとら初心者。具体的に何を打ち込めば良いのかまるでわかりません。

よく見るとこの記載の前に、

Warning: /opt/homebrew/bin is not in your PATH.

とあります。

PATHを追加しなきゃならんわけですね。PATHの通し方についてはこちらを参考にしました。

https://qiita.com/HORIZONium/items/b608f46c900ce527dbc9

そもそもパスを通すって何よ？という方はこちらをご覧ください。個人的にめっちゃ分かりやすくて感動しました。

https://qiita.com/Naggi-Goishi/items/2c49ea50602ea80bf015

さて、パスを通す上で場所が本当にWarningで指し示された場所で良いのか、試しに以下を実行します。

MacBook-Air:bin username$ /opt/homebrew/bin/brew -v

すると…おお！どうやらこの場所にHomebrewがあることは間違いなさそうです。

MacBook-Air: /opt/homebrew/bin/brew -v
Homebrew 3.1.8
Homebrew/homebrew-core (git revision af940f86e4; last commit 2021-05-21)

ではいよいよパスを通します。

MacBook-Air: export PATH="$PATH:/opt/homebrew/bin/"

通ったか確認

MacBook-Air: printenv PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin/

パスが加わってますね！ではbrewコマンドがHOMEから実行できるか、もういっちょ試してみましょう。

brew -v

というのはHomebrewのバージョン確認です。

brew -v
Homebrew 3.1.8
Homebrew/homebrew-core (git revision af940f86e4; last commit 2021-05-21)

やったあやったあ。

anyenvをインストール

では今しがたインストールしたHomebrewを使って、anyenvをインストールしましょう。

＄ brew install anyenv

anyenvのインストールが完了しました。

スクショ　brew install anyenv

こちらを初期化します。すると…

＄ anyenv init
# Load anyenv automatically by adding
# the following to ~/.zshrc:

eval "$(anyenv init -)"

訳：

anyenvを自動でロードするには
以下の記述を　~/.zshrc: に記載してね

eval “$(anyenv init -)”

と書いてありますね。

というわけで下記を実行。

echo 'eval "$(anyenv init -)"' >> ~/.zshrc

ターミナルでファイルに追記する際の記述はこのようになっています。

$ echo “追記する文字列” >> ファイル名

参照：echoコマンドの詳細まとめました【Linuxコマンド集】

今回は記述に””(ダブルクオーテーション)があったので、全体を”(シングルクオーテーション)で囲いました。

ターミナルを再起動します。すると…

/Users/xxx/.zshrc:1: command not found: anyenv
$

ぴえん🥺

困ったら公式だ！ということで公式をチェケラ

https://github.com/anyenv/anyenv

You’ll see a warning if you don’t have manifest directory.

echoコマンドの詳細まとめました【Linuxコマンド集】

$ brew -v
zsh: command not found: brew

echoコマンドの詳細まとめました【Linuxコマンド集】

$ printenv PATH
PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

ぴえん🥺再起動したらさっき通したはずのパスが消えている…！

echoコマンドの詳細まとめました【Linuxコマンド集】

https://teratail.com/questions/159895

「PATHを通した後にターミナルを再起動すると、PATHが通っていない」…私じゃないですか。

新しいMacを使っている人やアプデをした人はbashでなくzsh が採用されたために、使い方を気をつけなければならんっちゅーわけですね。

というわけでエラー文言を元にググって解決法を発見。

【zsh, bash】macでPATHを通す方法 – not found と出てしまったら

https://qiita.com/k3ntar0/items/eb8cdbd8eba9da388def

ターミナルを開いた際、メニューバーにzshの記載があるため、私のデフォルトシェルはzshであることがわかりました。

ターミナルの設定ファイルが存在しない場合はシェルに応じた設定ファイルを作成してください。
– bashの場合 .bash_profile
– zshの場合 .zshrc

ひとまずホームディレクトリにて下記を実行し、.zshrcがあるかを確認します。

n.okawa@makkunoMacBook-Pro ~ % ls -a
.			.zsh_history		Downloads
..			.zsh_sessions		Library
.CFUserTextEncoding	.zshrc			Movies
.DS_Store		Applications		Music
.Trash			Creative Cloud Files	Pictures
.cups			Desktop			Public
.vscode			Documents
n.okawa@makkunoMacBook-Pro ~ % open ~/.zshrc

あった！

次に下記を実行。

$ touch .zshrc

.zshrcがテキストエディタで開くので、追記します。

私の場合は、先ほどanyenvのインストールを試みた際に入力した下記が記載されていました。

eval "$(anyenv init -)"

この下に、追加したかったパスの命令を書きます。

eval "$(anyenv init -)"
export PATH="$PATH:/opt/homebrew/bin/"

⌘＋Sで保存し、再びターミナルへ戻り、追記した内容を下記で反映させます。

$ source ~/.zshrc

するとどうでしょう。待ち焦がれていた（？）Warningが…！Finally！！

ここでやっと、途中になっていたこちらの記事の「マニフェストディレクトリを作る」に戻れます。

https://qiita.com/kyosuke5_20/items/eece817eb283fc9d214f

途中check outするかってきたので「y（もろちんちん！）」で承諾してます。

何やねんもろちんちんて。

$ source ~/.zshrc       
ANYENV_DEFINITION_ROOT(/Users/xxx/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init
$ anyenv install --init
Manifest directory doesn't exist: /Users/xxx/.config/anyenv/anyenv-install
Do you want to checkout ? [y/N]: y
Cloning https://github.com/anyenv/anyenv-install.git master to /Users/xxx/.config/anyenv/anyenv-install...
Cloning into '/Users/xxx/.config/anyenv/anyenv-install'...
remote: Enumerating objects: 62, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 62 (delta 1), reused 1 (delta 0), pack-reused 57
Receiving objects: 100% (62/62), 10.52 KiB | 2.63 MiB/s, done.
Resolving deltas: 100% (8/8), done.

Completed!

Completed!!の記載を信じてドキドキしながらターミナルを再起動…

Last login: Fri May 21 15:16:17 on ttys000
＄ .zshrc:1: command not found: anyenv

Ouch!! あ、でもbrewコマンドは使えるようになってる…

色々調べてみると、同じ症状で「zsh: command not found」表示が出る人々は多い模様。

HOMEでls -aを実行してみると、ファイル群の中には.anyenvが。

http://blog.10rane.com/2014/08/19/install-anyenv/

上の記事を参考にしていると、anyenvのパスも通さなきゃダメっぽい？ということに気づく。そんな訳でファイル.zshrcを開き

$ open .zshrc

下記を追加。

export PATH="$HOME/.anyenv/bin:$PATH"

全部でこの3行が記載されたファイルとなりました。

export PATH="$PATH:/opt/homebrew/bin/"
export PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"

保存後はお決まり、エディタを閉じてターミナルにて下記を実行し、変更を適用します。

source ~/.zshrc

再びターミナルを終了して開くと…やった！エラー消えた！

.zshrcに記載するパスの書き方がいまいちわかっていなかったのですが、再び下記を実行してPATH一覧をみてみると、homebrewのパスは最後に、anyenvのパスは最初に追加されていますね。

$ printenv PATH     
/Users/xxx/.anyenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin/

つまり

export PATH="$PATH:/xxx/yyy/zzz/"

の形では最後に、

export PATH="$HOME/.xxx/yyy:$PATH"

の形では最初にパスが加えられます。

さてさて、やっと第三段階に入れます。

nodenvのインストール

さあ、入れたてホヤホヤのanyenvを使う時がやっとやって参りましたYO！

$ anyenv install nodenv

$ anyenv install nodenv
/var/folders/4f/2th8vsqs47d8s72sn6ffv14m0000gp/T/nodenv.20210521213024.25472 ~
Cloning https://github.com/nodenv/nodenv.git master to nodenv...
Cloning into 'nodenv'...
remote: Enumerating objects: 4021, done.
remote: Counting objects: 100% (18/18), done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 4021 (delta 5), reused 4 (delta 1), pack-reused 4003
Receiving objects: 100% (4021/4021), 732.74 KiB | 6.72 MiB/s, done.
Resolving deltas: 100% (2636/2636), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/node-build.git master to node-build...
Cloning into 'node-build'...
remote: Enumerating objects: 20477, done.
remote: Counting objects: 100% (253/253), done.
remote: Compressing objects: 100% (154/154), done.
remote: Total 20477 (delta 92), reused 172 (delta 81), pack-reused 20224
Receiving objects: 100% (20477/20477), 3.65 MiB | 3.79 MiB/s, done.
Resolving deltas: 100% (12994/12994), done.
~
~/.anyenv/envs/nodenv/plugins ~
Cloning https://github.com/nodenv/nodenv-vars.git master to nodenv-vars...
Cloning into 'nodenv-vars'...
remote: Enumerating objects: 211, done.
remote: Total 211 (delta 0), reused 0 (delta 0), pack-reused 211
Receiving objects: 100% (211/211), 31.82 KiB | 5.30 MiB/s, done.
Resolving deltas: 100% (76/76), done.
~

Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.

おっ今度はスムーズに行きました。

Please reload your profile (exec $SHELL -l) or open a new session.とありますね。

exec $SHELL -l

言われるがままexec $SHELL -lを実行してみました。I’m a nodenv’s bitch…

printenv PATHで確認。

PATH=/Users/ｘｘｘ/.anyenv/envs/nodenv/shims:/Users/ｘｘｘ/.anyenv/envs/nodenv/bin:/Users/xxx/.anyenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/xxx/.anyenv/bin:/opt/homebrew/bin/:/opt/homebrew/bin/

あ、今度は最初にパスが通ってますね。

同じ轍は踏むまいともう一度ターミナルを再起動しパスを確認してみましたが、今回は手動でファイルに上書きしなくても大丈夫そうです。

node.jsのインストール

はあ。ここまで長かった。

やっとnode.jsのインストールに参ります。

$ nodenv install -l

とすればインストールできる最新のnode.jsが確認できるのですが（めっちゃある）、実は最新バージョンが表示されないこともあるそうです。

それを防ぐためには、anyenv-updateプラグインをインストールし、最新のNodeバージョンが取ってこれるよう準備しておく必要があります。下記を実行。

mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

こちら参考。

mkdir
ディレクトリを作成する
書式：mkdir [オプション] [ディレクトリのパス]

-p・・・途中のディレクトリを含めて作成する

gushernobindsme/これから学ぶmacOSターミナル.md

mkdir -p $(anyenv root)/plugins で.anyenv のルートにpluginsディレクトリを作成しました。

これで.anyenvに移動し、中のファイルを確認すると、

＄ cd .anyenv
.anyenv ＄ ls -a
.	..	envs	plugins

. .. envs plugins計4つのディレクトリが確認できました。このpluginsディレクトリにプラグインをクローンしてきます。

.anyenv $ git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
Cloning into '/Users/ｘｘｘ/.anyenv/plugins/anyenv-update'...
remote: Enumerating objects: 87, done.
remote: Total 87 (delta 0), reused 0 (delta 0), pack-reused 87
Receiving objects: 100% (87/87), 13.33 KiB | 3.33 MiB/s, done.
Resolving deltas: 100% (33/33), done.

ヨシャこれでプラグインのインストールは完了。最後にanyenv updateを実行すれば、最新のNodeバージョンを取ってこれるようになります。

＄ anyenv update
Skipping 'anyenv'; not git repo
Updating 'anyenv/anyenv-update'...
Updating 'nodenv'...
Updating 'nodenv/node-build'...
Updating 'nodenv/nodenv-vars'...
Updating 'anyenv manifest directory'...

更新されました！

先ほども確認したNode.jsのバージョン一覧を見てみます。

$ nodenv install -l

欲しいバージョンをインストールするには下記のように書けば良いのですが、

nodenv install {バージョン番号}

私、何を思ったのか、何も考えず最後に表示された数字で実行しちゃったんですよね。

敢えなく撃沈。

あまり古いバージョンだと、　It no longer receives bug fixes or security updatesというわけでサポート対象外、インストールさえできないようですね。

気を取り直してもう一度。先ほどのリストから見ると16.2.0が最新のようです。その下はよくわからない。

念には念を、ということで、node.jsの公式サイトにて最新バージョンも確認してみました（目視ｗ）

これで安心してインストールできるってもんです（涙目）

~ % nodenv install 16.2.0            
Downloading node-v16.2.0-darwin-arm64.tar.gz...
-> https://nodejs.org/dist/v16.2.0/node-v16.2.0-darwin-arm64.tar.gz
Installing node-v16.2.0-darwin-arm64...
Installed node-v16.2.0-darwin-arm64 to /Users/ｘｘｘ/.anyenv/envs/nodenv/versions/16.2.0

はいお疲れ様でした。

さらに念には念を入れて、今入っているnodeのバージョンを確認しておきましょう。

$ nodenv whence npm
16.2.0

イエス！！！

nodenv global -16.2.0でコンピューターのデフォルトを指定し、node -vとすれば…

$ nodenv global 
$ node -v
<strong>v16.2.0
</strong>

ほあああ！

アンインストールするには

今お使いのnodeバージョンが何かしらの都合が悪くなりアンインストールしたくなったときは、~/.anyenv/envs/nodenv/versions内にあるディレクトリを削除すれば良いとのこと。

Tag: 環境構築

[Vue.js]Viteを導入してみる

プロジェクト作成

前提

ほか参考

Webサイト制作　開発環境構築（Local環境）の流れ

環境・前提

免責

ディレクトリを作成

git管理

VSCode上でのGit初期化

[Mac] Nuxt.jsによるVue.js開発環境その①Node.jsをインストール（anyenv + nodenv）

Homebrewのインストール

Homebrewとは

Homebrewのインストール手順

anyenvをインストール

nodenvのインストール

node.jsのインストール

アンインストールするには