🤖

環境構築（決定版）

2023/09/16に公開

Firebase

はじめに

自分がmacを使っているので、基本的にはmacユーザー向けに書いています。
windowsでも同じことはできるので、windowsの方は都度調べていただけると幸いです。
すでに環境構築が終わっている方は読み飛ばしてください。

ターミナルの設定

パスを通す作業があるので、ついでにターミナルを便利にしちゃいましょう。
まずはdotfilesというディレクトリの中に.zshrcファイルを作ります。
以下のコマンドをターミナルで実行していってください。
コピペでOKです。

mkdir -p ~/dotfiles/.zsh
cd ~/dotfiles/.zsh
touch .zshrc
ln -sv ~/dotfiles/.zsh/.zshrc ~/
ln -sv ~/dotfiles/.zsh ~/

finderを開いて、⌘ + shift + .で不可視ファイルを表示しましょう
ホームディレクトリに.zshrcファイルがあれば成功です。
.zshrcファイルを開いて、以下の内容をコピペしてください。

# Enable Powerlevel10k instant prompt. Should stay close to the top of ~/.zshrc.
# Initialization code that may require console input (password prompts, [y/n]
# confirmations, etc.) must go above this block; everything else may go below.
if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi
### Added by Zinit's installer
if [[ ! -f $HOME/.local/share/zinit/zinit.git/zinit.zsh ]]; then
    print -P "%F{33} %F{220}Installing %F{33}ZDHARMA-CONTINUUM%F{220} Initiative Plugin Manager (%F{33}zdharma-continuum/zinit%F{220})…%f"
    command mkdir -p "$HOME/.local/share/zinit" && command chmod g-rwX "$HOME/.local/share/zinit"
    command git clone https://github.com/zdharma-continuum/zinit "$HOME/.local/share/zinit/zinit.git" && \
        print -P "%F{33} %F{34}Installation successful.%f%b" || \
        print -P "%F{160} The clone has failed.%f%b"
fi
source "$HOME/.local/share/zinit/zinit.git/zinit.zsh"
autoload -Uz _zinit
(( ${+_comps} )) && _comps[zinit]=_zinit
### End of Zinit's installer chunk
# エイリアス
alias v='vim'
alias ls="gls --color=auto"
# git のカラー表示
git config --global color.ui auto
# ヒストリ (履歴) を保存、数を増やす
HISTFILE=~/.zsh_history
HISTSIZE=100000
SAVEHIST=100000
# 同時に起動した zsh の間でヒストリを共有する
setopt share_history
 
# 直前と同じコマンドの場合はヒストリに追加しない
setopt hist_ignore_dups
 
# 同じコマンドをヒストリに残さない
setopt hist_ignore_all_dups
 
# スペースから始まるコマンド行はヒストリに残さない
setopt hist_ignore_space
 
# ヒストリに保存するときに余分なスペースを削除する
setopt hist_reduce_blanks
# キーバインディングを emacs 風にする
bindkey -d
bindkey -e
# [TAB]補完機能
autoload -Uz compinit && compinit
# [TAB]連続補完
zstyle ':completion:*:default' menu select=1
# 小文字入力時に大文字を含めた補完をする
zstyle ':completion:*' matcher-list 'm:{[:lower:]}={[:upper:]}'
# ホームディレクトリ以外では、cd の後に ls -la を自動で行う。
chpwd() {
    if [[ $(pwd) != $HOME ]]; then;
        ls -la
    fi
}
# Load powerlevel10k theme
zinit ice depth"1" # git clone depth
zinit light romkatv/powerlevel10k
# To customize prompt, run `p10k configure` or edit ~/.p10k.zsh.
[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh
# Ctrl + R でコマンド履歴の検索
zinit load zdharma-continuum/history-search-multi-word
# 入力補完
zinit light zsh-users/zsh-autosuggestions
zinit light zdharma-continuum/fast-syntax-highlighting

ターミナルを再起動すると、いい感じになっているはずです。

homebrewのインストール

公式サイトにあるスクリプトをターミナルで実行します。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストール後はbrew -vでバージョン確認できるはずです。

nodebrewのインストール

homebrewを使ってインストールします。以下をターミナルで実行してください。

brew install nodebrew

nodebrew -vでバージョンが確認できれば成功です。

Node.jsのインストール

安定版をインストールします。

nodebrew install-binary stable

以下のコマンドでインストールされたバージョンが確認できます。

nodebrew ls

バージョンを有効化しましょう。useのあとは表示されたバージョンを入れてください。

nodebrew use v18.17.1

最後に、nodeコマンドを使えるようにするためにパスを通します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc

ターミナルを再起動して、node -vでバージョンが表示されたら成功です。

Firebase CLIのインストール

以下のコマンドでインストールします。

npm install -g firebase-tools

バージョンを確認します。

firebase --version

ここでcommand not foundが出た場合、パスが通っていないので手動で追加する必要があります。
まず、Firebase CLIのインストール場所を調べます。

which firebase

もしwhichコマンドで場所がわからない場合、以下のコマンドで探せます。

npm config get prefix

このコマンドの出力に/binを追加したものが、通常はFirebase CLI等がインストールされるディレクトリです。
ホームディレクトリの末尾に以下を追加します。

#firebase
export PATH=$PATH:/your/path/to/firebase

ただし、/your/path/to/firebaseの部分は先程調べたパスに変更してください。
ターミナルを再起動して、firebase --versionでバージョンが表示されれば成功です。
最後に、ログインできたら完了です。

firebase login

ngrokのインストール

今回はhomebrewでインストールします。

brew install ngrok

自動的にパスが通っているはずです。
ターミナルを再起動して、ngrok versionでバージョンを確認してみましょう。
次に、公式サイトでアカウントを登録しましょう。
登録後に出てくるガイドに従っていけば大丈夫です。

VS Codeの構築

概要

基本コードを書いている時のモチベーションは

いかに読みやすいか (可読性)
いかに早く書けるか (速度性）
いかにミスが少ないか (正確性)
に限ります。コード及び仕様の理解以外に脳のリソースを使いたくないので便利な拡張機能をピックアップしました

GitHub Copilot

まず最初はチート機能「Github Copilot」を導入しましょう！(有料だが気にするな、俺が保証する)

ここの試すボタンを押す
次に VS Code を開いて拡張機能を追加します
左側の四角のやつで検索できるんですな

をインストールしましょう
AIの力でコーディングを予測変換してくれます！

Japanese Language Pack for Visual Studio Code

日本語拡張機能です

こいつをインストールしましょう、ここからが旅の始まり

Material Icon Theme

アイコンをきゃわきゃわにしてくれる！！これで視認性抜群！！

Path Autocomplete

パスを補完するぜ！！打ち間違いはこれで防げる！！

各言語の拡張機能

HTML・CSS

Live Server

自分が書いているページをサーバー立てて見れるようにする

JavaScript

JavaScript (ES6) code snippets

JS(ES6)に色がついてみやすくなる！ハッカーみたいでかっこいいね！！

Vue

Vue Language Features (Volar)

Vueを書く上でめちゃくちゃ便利です、インストールしよう

はじめに

ターミナルの設定

homebrewのインストール

nodebrewのインストール

Node.jsのインストール

Firebase CLIのインストール

ngrokのインストール

VS Codeの構築

概要

各言語の拡張機能

HTML・CSS

JavaScript

Vue

Discussion