javascriptフレームワークの環境構築

この記事では主にHomebrewを使用した環境構築方法になります。

node.jsの環境構築

# node.jsのバージョン管理のためのnodebrewをインストール
$ brew install nodebrew

# nodebrewのバージョン確認
$ nodebrew -v

# node.jsのインストール
$ nodebrew install-binary stable


## 下記のようなエラーが出た時は、、、、
Fetching: https://nodejs.org/dist/v20.3.0/node-v20.3.0-darwin-arm64.tar.gz
Warning: Failed to create the file
Warning: /Users/username/.nodebrew/src/v20.3.0/node-v20.3.0-darwin-arm64.tar.gz
Warning: : No such file or directory

# エラーの場合は下記のコードを実行後に最インストール
$ mkdir -p ~/.nodebrew/src

# インストール確認
$ nodebrew ls

$ node -v

Vue.jsの環境構築

# vueのインストール
$ npm install vue@3

#Vue.jsを用いた新しいプロジェクトを作成
$ npm init vue@3

#この時、以下のように表示されたら y を入力して追加のパッケージをインストールしましょう。
$ npm init vue@3
Need to install the following packages:
  create-vue@3.7.0
Ok to proceed? (y)

# プロジェクト設定が必要（各プロジェクトごとに変更する。以下は筆者の場合）

    Project name: … プロジェクト名
    Add TypeScript? … No
    Add JSX Support? … No
    Add Vue Router for Single Page Application development? … No
    Add Pinia for state management? … No
    Add Vitest for Unit Testing? … No
    Add an End-to-End Testing Solution? › No
    Add ESLint for code quality? … Yes
    Add Prettier for code formatting? … Yes

# 下記のコマンドをそれぞれ実行
$ cd frontend
$ npm install

# npm run 系のコマンドは、 package.json に記述されたコマンドを実行するコマンドです。
# npm run format は、コードのフォーマットを行うコマンドです。
$ npm run format
$ npm run dev

# 以下コマンドでサーバー実行
npm run dev

ボーナスチャプター

ruby on railsの環境構築

• 筆者が現在取り組んでいるプロジェクトでバックエンドをrailsをしようするので、環境構築手順をついでにメモしておく
• rbenvをしようするのでそのインストールも済ませておく

# rubyのインストール（バージョンはプロジェクトに応じて）
$ rbenv install 3.1.4

# インストールできるバージョンの確認ができる
$ rbenv install -l

#バージョンを固定する
$ rbenv local 3.1.4

# rubyのバージョン確認
$ ruby -v

もしもrubyのバージョンが切り替わらない時はpathが通ってない可能性がある。
rdenvのrubyではなくてシステムでデフォルトで入っているrubyが呼ばれているかも、、

# 確認方法(/usr/bin/rubyの場合はシステムデフォのrubyが呼ばれている)
which ruby

.zshrcのファイルを変更して対応しました
export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"
eval "$(rbenv init -)"
# 変更を反映
$ source ~/.zshrc

これでうまくいったようです。

Railsのインストール

さてここからRailsをインストールしていくわけですが、その前にRailsのことを少しおさらいしましょう

[参考文献]： Gemfile?bundler?Rails開発するなら理解しておきたいgem管理の基礎知識

ターミナル

# gemのインストール
$ gem install bundler -v "2.3.15"

# gemfileの作成
$ bundle init

Gemfile

# railsのインストールしたいバージョンを指定
source 'https://rubygems.org'

gem 'rails', '~> 7.0.5'

ターミナル

# bundleのインストール先を指定（まとめやすくするため）
$ bundle config set path '.bundle'

# Bundle complete!が出れば成功
$ bundle install

インストールした Gem をコマンドで使用する際は、bundle exec を付ける必要があるので注意してください。

[参考文献]： bundle execって必要なの?

$ bundle exec rails -v

# 筆者はフロントエンドは Vue.js を使用しているため、Rails の役割は API サーバーとしてのみ使用します。そのため--api オプションを付けて実行しています。
$ bundle exec rails new アプリ名 --api --skip-bundle --skip-test


# Rails プロジェクトに必要な Gem のインストール
$ cd backend
$ bundle install

# サーバー起動
$ bundle exec rails s

自分用のメモみたいなものなので書き方が雑になりました。