概要
macOS Catalina におけるフロントエンドの開発環境作成
Catalinaからbashからzshが標準になったため、zshでの環境構築方法を記載
※ バージョンは全て2020年6月30日時点のものです
新しいものが入っていても基本的には問題ないはず
brew
Mac用のパッケージ管理ソフト
$ /bin/bash -c"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"coreutils
GNUコマンドを使用する
$ brew install coreutils
jq
JSONを成形、絞り込みを行う
$ brew install jq
$ echo‘[{“hoge”: “hoge”, “fuga”: “fuga"}]’ | jq
xz
圧縮、解凍
$ brew install xz
$ xz -z hoge
$ xz -d hoge.xz
wget
ファイルのダウンロード
$ brew install wget
$ wget -r http://………/download.zip
確認
上記でインストールしたパッケージが表示されることを確認
$ brew list
nvm
Node.jsのバージョン管理ツール
nvmのGitHubを参照して最新バージョンをインストールする
https://github.com/nvm-sh/nvm#install-script
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
$ vim ~/.zshrc
vimが起動するので~/.zhrcに下記を追加
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"[-s "$NVM_DIR/nvm.sh"]&& \."$NVM_DIR/nvm.sh"ターミナルを再起動
$ nvm --version0.35.3
Node.js
JavaScript実行環境
$ nvm ls-remote --lts | grep Latest
v4.9.1 (Latest LTS: Argon)
v6.17.1 (Latest LTS: Boron)
v8.17.0 (Latest LTS: Carbon)
v10.21.0 (Latest LTS: Dubnium)
v12.18.1 (Latest LTS: Erbium)
お好きなバージョンをインストール
基本的には最新で良いと思います。
$ nvm install v12.18.1
$ node -vv12.18.1
npm
JavaScriptのパッケージ管理システム
yarn
npmと同じくパッケージ管理システム
今回はyarnを使用する
$ npm install-g yarn
serverless
Serverless Application(AWS, Azure, GCPなど)を構成管理デプロイするためのツール
$ npm install-g serverless
npmのライブラリを確認
$ npm ls--depth=0 -g/Users/[ユーザー名]/.nvm/versions/node/v12.18.1/lib
├── npm@6.14.5
├── serverless@1.74.1
└── yarn@1.22.4
Nuxt.js
vueのフレームワークの1つ
Routerの記述をする必要がなくなってめっちゃ便利
// プロジェクトを作成したいフォルダに移動
$ cd***/***$ yarn create nuxt-app <my-project>
上記コマンドを入力すると対話型のインストーラーが起動します
入力内容は下記を参考に自分に適したものを選択してください
? Project name: (my-project)
? Programming language: (Use arrow keys)
> TypeScript
? Package manager: (Use arrow keys)
> Yarn
? UI framework: (Use arrow keys)
> Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
◉ Axios
◉ Progressive Web App (PWA)
◯ Content
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
◉ ESLint
◉ Prettier
◯ Lint staged files
◯ StyleLint
? Testing framework: (Use arrow keys)
> None
? Rendering mode: (Use arrow keys)
> Single Page App
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
? Development tools:
◉ jsconfig.json (Recommended for VS Code)
◯ Semantic Pull Requests
インストールが完了したら下記のコマンドを実行
$ cd<my-project>
$ yarn dev
? Are you interested in participation? (Y/n)
n
http://localhost:3000/
アクセスしてVueのアイコンが表示されれば構築完了
あとはかっこいいWebサイトを作ってください！