どうもこんにちは。

今回は、RailsではなくVue.jsについて調べてみました。言語は違いますが、同じフレームワークのRailsと自分の感覚を比較してみようと思います。合わせて環境構築もしてみたので、参考になればと...

以下のサイトを参考にしています。

Vue.jsってなに？

JavaScriptフレームワークの一つです。

ユーザーから見えている部分をシンプルかつ高速に処理することができるフレームワークです。画面描画に対する新しい考え方とデータ管理の仕組みが、それを実現しています。また、チーム開発において作業の分担がしやすくなる形式のファイルを扱えるなど、開発を効率化できるのも特徴です。

HTMLやJSのコーディングが苦手な人には向いているかも？と思いました。自分の場合、バックエンドよりもフロントエンドのコーディングが苦手なので、Vue.jsを使ってフロントの勉強をするのも一つの手なのかなと思いました。

仮想DOM

Vue.jsには仮想DOMという概念があり、JavaScriptオブジェクトを使って差分のみをDOMに反映する処理をおこなっています。

JSでフレームワークを使用せずに画面遷移を実装するとしたら、DOMを書き換える必要があるようなのですが、これが必要なくなるようですね。

Railsと比較して、画面遷移はRailsの方がやりやすそうです。（config/route.rbにパスを記述すれば良いだけなので。）

シングルページアプリケーションの開発に向いている

と思ったら、Railsとは違って画面遷移しないアプリケーションの開発に向いているようですね！

確かにRailsは画面遷移するたびに、サーバと通信してレンダリングしますが、Vue.jsを使用することでサーバを介さずに簡単に画面切替ができるようです。DBを使用してアプリ開発する場合にはAjaxを使用する方向になるのでしょうか？

DBの接続は？

Railsと違って、Vue.jsはDBの接続に対する機能が用意されていないので、少々難易度が高いようです。

Vue.js + Railsで実装できる？

調べていて初めて知ったことなのですが、フロントはVue.js、バッグエンドはRailsというように分けて実装することもできるようです。

これによって、DBへの接続も簡単にできるようになりそうですね。

Let's 環境構築

手順

1. ディレクトリ作成

mkdir vuejs_test
cd vuejs_test

2. vue createコマンドでvue-appプロジェクトを作成

docker run --rm -v ${PWD}:/app -w /app node:14-alpine sh -c "npm install -g @vue/cli && vue create -d vue-app"

3. vue-appディレクトリへ移動

cd vue-app

4. Dockerfile作成

touch Dockerfile

以下のコードをコピペします。

# ベースイメージ
FROM node:14-alpine

# 作業ディレクトリの設定
WORKDIR /app

# パッケージファイルをコピー
COPY package*.json ./

# 依存関係のインストール
RUN npm install

# アプリケーションのソースをコピー
COPY . .

# 開発サーバーのポートを公開
EXPOSE 8080

# アプリケーションの起動
CMD ["npm", "run", "serve"]

5. docker-compose.yml作成

vuejs_testディレクトリに戻ります。

cd ..
touch docker-compose.yml

以下のコードをコピペします。

version: '3.8'
services:
  vue-app:
    build: ./vue-app
    ports:
      - "8080:8080"
    volumes:
      - ./vue-app:/app
    stdin_open: true
    tty: true

6. ビルド

docker-compose build

7. 環境起動

docker-compose up

http://localhost:8080にアクセスすることで、HelloWorld画面が表示されます。

ソースコード