20210109のvue.jsに関する記事は8件です。

投稿日：2021-01-09T22:27:10+09:00

【初めてのチーム開発②】Dockerで環境構築するまで

前回からの続きです。
Docker+Rails+Vue+MySQLの開発環境を作ったので、その備忘録。
(※本記事は適宜編集します。)

手順

前準備

Dockerfile作成 (Rails, Vue)

docker-compose.yml作成

プロジェクト作成

動作確認

GitHubにpush

1. 前準備

・作業用ブランチ作成
$ git branch (→developブランチにいることを確認)
$ git checkout -b feature/docker-test

[この時点でのブランチの構造]
main
develop
 └── feature/docker-test   <- New!
・バージョン確認etc.
$ docker -v
Docker version 19.03.8, build afacb8b
$ docker-compose -v
docker-compose version 1.25.4, build 8d51620a
・最終的なディレクトリ構成はこちら。【参考】
[project_name]
├── api
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── docker-compose.yml
└── front
    ├── Dockerfile
    ├── ...
2. Dockerfile作成

RailsとVueのDockerfileをそれぞれ作成していきます。

まずはディレクトリを作成。
(現在のディレクトリ： project_name)
$ mkdir api front
$ ls
api front
2.1 Rails

RailsのDockerfileを作ります。
$ touch api/Dockerfile
api/Dockerfile
FROM ruby:2.7.1

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs \
   && rm -rf /var/lib/apt/lists/* 

RUN mkdir /app
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
このDockerfileは「Railsを含むGemfile」を別途必要とします。
そこでapi下にGemfile, および空のGemfile.lockを作成します。
$ touch api/Gemfile
$ touch api/Gemfile.lock
api/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6.0.3'
2.2 Vue

次にVueのDockerfileを作ります。
$ touch front/Dockerfile
front/Dockerfile
FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update && npm install -g @vue/cli
3. docker-compose.yml作成

次に、プロジェクトディレクトリ下にdocker-compose.ymlを作成します。
docker-compose.yml
version: '3'

services:
  web:
    build: ./api
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
      - '3000:3000'
    depends_on:
      - db
    volumes:
      - ./api:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql/
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
  front:
    build: ./front
    volumes:
      - ./front:/app
      - node_modules:/app/node_modules
    ports:
      - '8080:8080'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:
  node_modules:
4. プロジェクト作成

ここからが本番！
RailsプロジェクトとVueプロジェクトを順番に作っていきます。
Vueはvue-cliというものを使って、対話的に作成していきます。

4-1. Rails

Railsプロジェクト作成

まずrails newでRailsプロジェクトを作成。
apiディレクトリ下に、Railsのファイル群が作成されます。
※ 少し時間かかります。
$ docker-compose run web rails new . --force --database=mysql --api
dockerイメージ更新

Gemfileが更新されたので、buildしてdockerイメージを更新しておきます。
$ docker-compose build
database.ymlの修正

RailsのDB設定ファイルapi/config/database.ymlを修正します。
なお(password)はdocker-compose.ymlの環境変数MYSQL_ROOT_PASSWORDで指定したものを記述してください。
api/config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  - password:
  + password: (password)
  - host: localhost
  + host: db
DBの作成
$ docker-compose run web rails db:create
[追記] 上記コマンドでエラー発生→解決しました。
自分の対応
$ docker-compose run web rails db:create → Access Denied エラー
$ docker-compose down --volumes
$ docker-compose up -d
$ docker-compose run web rails db:create → Errno::ENOENT エラー
$ docker-compose down
$ docker-compose run web rails db:create → 成功
Created database 'app_development'
Created database 'app_test'
参考：https://qiita.com/fujisawatk/items/80da801c7e2ac68e4887
…原因はvolume周り？ Dockerの理解がまだまだ十分ではないですね…(^_^;)

$ docker-compose up -dをしてみて、localhost:3000にアクセスし、正常に表示されれば成功です！

4-2. Vue

vue-cliでVueプロジェクトを作成します。
コンテナ内に入り、vue-cliを使って対話的にVueプロジェクトを作成します。
※設定内容は一例です。

参考：https://qiita.com/Kyou13/items/be9cdc10c54d39cded15
$ docker-compose run front sh (←Vueコンテナでシェルを実行)
以下、設定内容です。
$ vue create .
# 現在のディレクトリ(/app)に作成するかの確認
? Generate project in current directory? (Y/n) Yes

# プリセットを使用するかどうか
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features # TypeScriptをインストールするためこちらを選択

# プロジェクトにインストールするライブラリの選択
? Check the features needed for your project:
 ◉ Choose Vue version #
 ◉ Babel
❯◉ TypeScript # TypeScriptをインストールする場合はこれを選択
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

# Vueバージョンの選択
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)

# Class styleを使用するかどうか。私はObject styleを使うため No
? Use class-style component syntax? (Y/n) No

# TypeScriptと一緒にbabelを使うか
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes

# LintとFormatterの設定に何を使うか
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

# Lintの実行タイミング
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save # 保存時にLintを実行
 ◯ Lint and fix on commit (requires Git)

# Babel, ESLintなどの設定をどこに記述するか
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files # 各設定ファイルにする
  In package.json

# 今回設定した内容をプリセットで保存するか。基本的にはプロジェクトを以降作成することはないため No
? Save this as a preset for future projects? No

# パッケージマネージャーに何を使うか
? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn
❯ Use NPM
インストール完了後、Ctrl+Dでコンテナを停止します。
またfront/Dockerfileを以下のように書き換えます。
FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update      (変更)
COPY package.json . (追加)
RUN npm install     (追加)
5. 動作確認

Rails
localhost:3000にアクセスし、「Yay! you are on Rails!」が表示されたら成功。
Vue
localhost:8080にアクセスし、

が表示されたら成功。

6. GitHubにpush
$ git status
On branch feature/docker-test
nothing to commit, working tree clean
$ git push origin feature/docker-test
参考記事

（本記事）
・DockerでRails + Vue + MySQLの環境構築をする方法【2020/09最新版】
・Docker Rails Vue.js MySQL環境構築
・開発環境をDockerに乗せる方法とメリットを3ステップで学ぶチュートリアル
・【Mac】Dockerと開発環境の作り方

（その他、チーム開発手法）
・git develop, feature branch作成からmergeするまで　(自分用メモ)
★Githubでチーム開発するためのマニュアル

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-09T22:27:10+09:00

【初めてのチーム開発②】Dockerで環境構築する

前回からの続きです。
Docker+Rails+Vue+MySQLの開発環境を作ったので、その備忘録。
(※本記事は適宜編集します。)

手順

前準備

Dockerfile作成 (Rails, Vue)

docker-compose.yml作成

プロジェクト作成

動作確認

GitHubにpush

1. 前準備

・作業用ブランチ作成
$ git branch (→developブランチにいることを確認)
$ git checkout -b feature/docker-test

[この時点でのブランチの構造]
main
develop
 └── feature/docker-test   <- New!
・バージョン確認etc.
$ docker -v
Docker version 19.03.8, build afacb8b
$ docker-compose -v
docker-compose version 1.25.4, build 8d51620a
・最終的なディレクトリ構成はこちら。【参考】
[project_name]
├── api
│   ├── Dockerfile
│   ├── Gemfile
│   └── Gemfile.lock
├── docker-compose.yml
└── front
    ├── Dockerfile
    ├── ...
2. Dockerfile作成

RailsとVueのDockerfileをそれぞれ作成していきます。

まずはディレクトリを作成。
(現在のディレクトリ： project_name)
$ mkdir api front
$ ls
api front
2.1 Rails

RailsのDockerfileを作ります。
$ touch api/Dockerfile
api/Dockerfile
FROM ruby:2.7.1

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev \        
                       nodejs \
   && rm -rf /var/lib/apt/lists/* 

RUN mkdir /app
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
このDockerfileは「Railsを含むGemfile」を別途必要とします。
そこでapi下にGemfile, および空のGemfile.lockを作成します。
$ touch api/Gemfile
$ touch api/Gemfile.lock
api/Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 6.0.3'
2.2 Vue

次にVueのDockerfileを作ります。
$ touch front/Dockerfile
front/Dockerfile
FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update && npm install -g @vue/cli
3. docker-compose.yml作成

次に、プロジェクトディレクトリ下にdocker-compose.ymlを作成します。
docker-compose.yml
version: '3'

services:
  web:
    build: ./api
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
      - '3000:3000'
    depends_on:
      - db
    volumes:
      - ./api:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - mysql_data:/var/lib/mysql/
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
  front:
    build: ./front
    volumes:
      - ./front:/app
      - node_modules:/app/node_modules
    ports:
      - '8080:8080'
    tty: true
    stdin_open: true
    command: npm run serve

volumes:
  mysql_data:
  bundle:
  node_modules:
4. プロジェクト作成

ここからが本番！
RailsプロジェクトとVueプロジェクトを順番に作っていきます。
Vueはvue-cliというものを使って、対話的に作成していきます。

4-1. Rails

Railsプロジェクト作成

まずrails newでRailsプロジェクトを作成。
apiディレクトリ下に、Railsのファイル群が作成されます。
※ 少し時間かかります。
$ docker-compose run web rails new . --force --database=mysql --api
dockerイメージ更新

Gemfileが更新されたので、buildしてdockerイメージを更新しておきます。
$ docker-compose build
database.ymlの修正

RailsのDB設定ファイルapi/config/database.ymlを修正します。
なお(password)はdocker-compose.ymlの環境変数MYSQL_ROOT_PASSWORDで指定したものを記述してください。
api/config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  - password:
  + password: (password)
  - host: localhost
  + host: db
DBの作成
$ docker-compose run web rails db:create
[追記] 上記コマンドでエラー発生→解決しました。
自分の対応
$ docker-compose run web rails db:create → Access Denied エラー
$ docker-compose down --volumes
$ docker-compose up -d
$ docker-compose run web rails db:create → Errno::ENOENT エラー
$ docker-compose down
$ docker-compose run web rails db:create → 成功
Created database 'app_development'
Created database 'app_test'
参考：https://qiita.com/fujisawatk/items/80da801c7e2ac68e4887
…原因はvolume周り？ Dockerの理解がまだまだ十分ではないですね…(^_^;)

$ docker-compose up -dをしてみて、localhost:3000にアクセスし、正常に表示されれば成功です！

4-2. Vue

vue-cliでVueプロジェクトを作成します。
コンテナ内に入り、vue-cliを使って対話的にVueプロジェクトを作成します。
※設定内容は一例です。

参考：https://qiita.com/Kyou13/items/be9cdc10c54d39cded15
$ docker-compose run front sh (←Vueコンテナでシェルを実行)
以下、設定内容です。
$ vue create .
# 現在のディレクトリ(/app)に作成するかの確認
? Generate project in current directory? (Y/n) Yes

# プリセットを使用するかどうか
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features # TypeScriptをインストールするためこちらを選択

# プロジェクトにインストールするライブラリの選択
? Check the features needed for your project:
 ◉ Choose Vue version #
 ◉ Babel
❯◉ TypeScript # TypeScriptをインストールする場合はこれを選択
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

# Vueバージョンの選択
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)

# Class styleを使用するかどうか。私はObject styleを使うため No
? Use class-style component syntax? (Y/n) No

# TypeScriptと一緒にbabelを使うか
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Yes

# LintとFormatterの設定に何を使うか
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

# Lintの実行タイミング
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save # 保存時にLintを実行
 ◯ Lint and fix on commit (requires Git)

# Babel, ESLintなどの設定をどこに記述するか
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files # 各設定ファイルにする
  In package.json

# 今回設定した内容をプリセットで保存するか。基本的にはプロジェクトを以降作成することはないため No
? Save this as a preset for future projects? No

# パッケージマネージャーに何を使うか
? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn
❯ Use NPM
インストール完了後、Ctrl+Dでコンテナを停止します。
またfront/Dockerfileを以下のように書き換えます。
FROM node:12.18.3-alpine

ENV APP_HOME /app
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME

RUN apk update      (変更)
COPY package.json . (追加)
RUN npm install     (追加)
5. 動作確認

Rails
localhost:3000にアクセスし、「Yay! you are on Rails!」が表示されたら成功。
Vue
localhost:8080にアクセスし、

が表示されたら成功。

6. GitHubにpush
$ git status
On branch feature/docker-test
nothing to commit, working tree clean
$ git push origin feature/docker-test
参考記事

（本記事）
・DockerでRails + Vue + MySQLの環境構築をする方法【2020/09最新版】
・Docker Rails Vue.js MySQL環境構築
・開発環境をDockerに乗せる方法とメリットを3ステップで学ぶチュートリアル
・【Mac】Dockerと開発環境の作り方

（その他、チーム開発手法）
・git develop, feature branch作成からmergeするまで　(自分用メモ)
★Githubでチーム開発するためのマニュアル

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-09T20:20:08+09:00

VueCLI ＋ tailwindCSS 2021

VueCLIにtailwindCSSを導入する記事の情報が古くなっていたので簡単にまとめました
間違っているところがあればご指摘ください

成果物

以下に今回作成したものを置いておきます。
https://github.com/inaridiy/vue_with_tailwind

導入方法

1 VueCLIを導入する
$npm i -g @vue/cli
2 プロジェクトを作成する
vue create my-project-with-tailwind
#質問に答える
3 tailwindCSSを導入する

最新バージョンのtailwindCSSはPostCSS8を必要としますが、Vue(Vue-loader)は残念ながらPostCSS8に対応していません。
そこで公式の記事を参考にして旧バージョン対応版をインストールします
$npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
4 PostCSSの設定をする

プロジェクトのルートにpostcss.config.jsを作成し、以下の内容を書き込んでください
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        tailwindcss,
        autoprefixer,
    ]
}
5 tailwindCSSの設定をする

まず、以下のコマンドを実行してtailwind.config.jsを作成してください
$npx tailwind init
次に以下の内容を書き込んでください
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],　//purgeの設定
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
もともと書き込んであった内容とほぼ一緒ですが、purgeの設定をしています。
これによって使用してないClassを自動で削除してくれるのでbuild時のファイルサイズがすごく小さくなります。

tailwindCSSを読み込む

src/assets/tailwind.css というtailwindを読み込むためのcssファイルを作成します。
@tailwind base;
@tailwind components;
@tailwind utilities;
次にmain.jsでCSSファイルを読み込みます
import Vue from 'vue'
import App from './App.vue'
import '@/assets/tailwind.css' //追加

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
完成

これでtailwindCSSを使える環境が整いました
レッツtailwindCSSライフ!!

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-09T17:16:44+09:00

nuxtアプリをスマホで開いたときに出る謎の余白を消したい

はじめに

どうもこんにちは高専の冬休みが終わりを迎えそうでかなり悲しい気持ちになっているげんしです。
いつになったら僕は課題に手を付けるんでしょうか？
非常に楽しみですね。

何が起こった？

前のポートフォリオがかなりダサかったので久々に作り直していて「あとはスマホ対応だ」という時にchrome dev toolでiphone Xでのページの挙動をみてみると、、

このように謎の余白が生まれていました。
絶対にここに余白ができるように書いていないのに余白ができているのですこし調べ倒してみました。
すると chromeだとbody要素に強制的にmargin 8pxが入ってしまうらしくこれが原因だということが分かりました。

調べてみると
body {
    margin: 0px;
}
というふうにすれば余白が消えるとあったので
nuxt.config.js
export default {
  css: [
    '../assets/main.css',
  ],
}
外部ファイル,main.cssを追加し試してみたところうまく消えてくれませんでした。

解決方法

上の様にnuxt.config.jsで外部ファイルを読み込めるようにしたあとに
main.css
body {
  overflow: hidden;
}
というように収まっていない部分をoverflow: hidden;で非表示にすることで解決しました。

まとめ

恥ずかしながらこの余白が消せないで1時間ほど溶かしてしまったので、この記事が僕と同じところで詰まっていしまっている人の助けになってくれると嬉しいです。

参考文献

https://qiita.com/kamorits/items/6f342da395ad57468ae3

https://qiita.com/kozakura16/items/7e83115f8ab7b00bafe3

http://www.htmq.com/css/overflow.shtml

http://bashalog.c-brains.jp/15/06/26-170500.php

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-09T16:11:01+09:00

爆音と共振でワイングラスを割るサイトを作りました

これは何？

音でグラスを壊したいという破壊衝動に駆られたため，Vue.jsの勉強も兼ねて初めて作ったサイト「爆音グラス破壊」です．

グラスを弾いた音から固有周波数を分析し，その周波数のサイン波を再生してグラスを激しく共振させ破壊します．

爆音でワイングラスを破壊できるサイトを作りました（）
スマホの音でもそこそこ震えます．
爆音をお持ちの方はワイングラス破壊してみてください https://t.co/75E7k85l8i pic.twitter.com/JQLAFQUnHv
— 電気野菜 (@YasaiDev) January 8, 2021

現状の手元環境では破壊できるだけの爆音がないので，悶々しています...助けて

使い方

https://hakai.yasaidev.work/usage

準備

スマホもしくはパソコン

割れやすそうなワイングラス

いい感じの長さのストロー

できれば爆音スピーカー (最悪スマホスピーカーでもOK)

破壊

Analysisボタンを押す (マイクの確認ダイアログがでたら許可)

もう一度Analysisボタンを押す

カウントダウン後グラスをはじいて音を出す

サイトが音を自動分析

Playボタンは破壊音を再生！

破壊の仕組み

はじめにマイクからグラスを弾いた音をFFTして，周波数のピークをとり固有周波数として求めます．

次に，その固有周波数のサイン波を生成し再生します．

結果，グラスは共振し激しく揺れて限界を超えた際破壊されてしまいます．

Tech

JS framework: Vue.js

Design Framework: Vuetify

オーディオ/描画周り: p5.js

開発周りの工夫点

Vercelの自動デプロイを導入

mainブランチにpushするたびに自動でvercelにデプロイするようにしました．といってもほとんどvercel君がやってくれたので30分で導入できたのは神です．

ちなみに，Vercel bot君はプルリクエストに対しても勝手に検証用デプロイまで行ってくれて感動しました．（神では？）

Google Analyticsの導入

興味半分でvue-gtagで導入しました．クリックなどのイベントを事細かにGA側に送信することが可能といった知見を得れて便利だなと感じた一方，実際のサイトでもこれだけ事細かに情報が収集されているのかと感じ少し恐ろしくなりました．

かっこいい？OGPの導入

かっこいいね！

クソアプリなのにSNS映えを意識したそうです．今後のアプリ開発等にも役立つ知見を得れたのでヨシです．

私のグラスは1054.7Hzで破壊できそう?
#爆音グラス破壊 https://t.co/75E7k8mVZQ
— 電気野菜 (@YasaiDev) January 7, 2021

参考: Twitter Doc

P5.jsとVue.jsの組み合わせ

ここが一番コーディングで苦労しました．多少知見がたまったのでそのうち記事にします．

P5.jsが何かというと，クリエイティブ向けコーディング（Ex.オーディオビジュアライザー，ゲームなど）に特化したライブラリです．これを活用したことで，Web Audio周りに関して抽象的に記述できたり，Audioと合わせた描画等をまとめて処理を行うことができました．

参考: Qiita: Vue.jsでp5.jsを使ってみる

参考: HIM.CO ヒム・カンパニー – なぜベストを尽くさないのか

ページの軽量化に取り組んだ

当初はNetlifyにデプロイし，速さを求めVercelにデプロイした．

また，PageSpeed Insightsを使って原因が適切なmin.jsを使わずに生のjsを使っていたことに気づき修正しました．
（これが主たる低速度の原因，もしかしたらNetlifyは悪くなかったかも知れないです）

さらに，サイズの大きいcomponentを非同期ロードすることで見かけの表示速度を早めました．

参考: 非同期コンポーネント:ロード状態のハンドリング
const AsyncComponent = () => ({
  // ロードすべきコンポーネント (Promiseであるべき)
  component: import('./MyComponent.vue'),
  // 非同期コンポーネントのロード中に使うコンポーネント
  loading: LoadingComponent,
  // ロード失敗時に使うコンポーネント
  error: ErrorComponent,
  // loading コンポーネントが表示されるまでの遅延時間。 デフォルト: 200ms
  delay: 200,
  // timeout が設定され経過すると、error コンポーネントが表示されます。
  // デフォルト: Infinity
  timeout: 3000
})
結果かなり当初よりは早くなりました．しかし，モバイル向けのスコアが低いのでもっと早めたいです.

やったけど取り消した点とか反省点

Github pagesにVue RouterのSPAサイトをデプロイした

当初はGithub Pagesに自動デプロイするようなworkflowを書いて動作させようとしましたが,Vue RouterのSPAのデフォルト設定とGithub pagesは少し相性が悪い．初学者でデプロイにハマりたくなかったのでnetlifyへと移行することを決心しました．

おそらくvueやreactなどはnetlifyやvercelのほうが脳死でデプロイできるので楽かもです．

参考: Qiita: vue-routerのgithub-pages用設定

Netlifyへデプロイした

Github workflowでGithub側でビルドしてNetlifyにデプロイする物を書きました．

参考: Qiita: GitHub Actions による GitHub Pages への自動デプロイ

こうすることでNetlify側のビルド時間制限を無視して好きなだけデプロイすることができるようにしました．

しかし，アクセスが遅い気がしたので，Vercelに移行しました．

(Pagespeed insightがモバイルで10点台)

これは後述するがp5.jsのminバージョンを使っていなかったことが大きいと思われます．このことに気づいていなかったです．

min.js を使わっていなかった

Vercelに移行後もやはりやけにページの読み込みが遅いと思ってGoogleのPageSpeed Insightsを使って確認したところP5.jsが大変ドデカサイズでありました(圧縮前5MB，説明不要でかい)．

min.jsに切り替えたら600KiBぐらいになったのでサクサクになりました．

正直npm run buildしたら勝手にmin.jsに切りかわるなどしてファイルサイズの最適化がされると思いこんでいました．反省．

Githubのブランチ名がmasterからmainになったことを忘れていた

GitHub Actions による GitHub Pages への自動デプロイを参考にworkflowを書いていたのですが，何故かpushしてもactionが動かないことがありめちゃくちゃ悩みました．

そうです，元記事ではactionのトリガーのブランチ名がmasterだったのです...泣きました．

みなさんもブランチ名が絡むもののコピペには気をつけてください．世界は変わってしまいました．

もろもろの所感

手元の音響設備ではワイングラスを破壊するほどの音量が確保できなかったのがすごく残念です．爆音をお持ちの方はグラスワインを破壊して僕に自慢してほしいです．

あと，普段はPython書いているのですがJavascript書いていると文法がごっちゃになって最近はSyntax Errorの量産機になりました．悲しいです．

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-09T13:02:29+09:00

Vue.js のディレクティブを使ってみた

初めに

最近フロントエンドに興味を持ち、Vue.jsについて勉強を始めました。
直近で学んだことのアウトプットとしての記事を投稿します。

いろいろなディレクティブ

ここからは v-for, v-bind, v-if, v-on, v-model について簡単な動作確認をしてみます。

v-for

  <div id="app">
    <ul>
      <li v-for="fluit in fluits">{{ fluit.name }}</li>
    </ul>
  </div>

var app = new Vue({
  el: "#app",
  data: {
    fluits: [
      {name: 'Peaches'},
      {name: 'Apples'},
      {name: 'Plums'}
    ]
  }
})

表示内容

v-bind

input タグ属性書き換え

  <div id="app">
    <input type="button" v-bind:value="btnValue">
  </div>

var app = new Vue({
  el: '#app',
  data: {
    btnValue: 'ボタン'
  }
})

表示内容

p タグ属性書き換え

  <div id="app">
    <p v-bind:title="message">John Smith</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Counry Prefecture 19xx～19yy'
  }
})

マウスホバー時

style 属性書き換え

  <div id="app">
    <p v-bind:style="styleObject">{{ message }}</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    styleObject: {
      margin: '100px',
      color: 'rgb(100, 50, 200)',
      fontSize: '100px',
      fontFamily: 'Playfair Display'
    }
  }
})

※font は https://fonts.google.com/ を使用

表示内容

コンポーネント

  <div id="app">
    <greeting></greeting>
  </div>

Vue.component('greeting', {
  template: '<h1>Hello Vue!</h1>'
})
var app = new Vue({
  el: '#app'
})

表示内容

v-for, v-bind, コンポーネント組み合わせ

  <fruits-list 
    v-for="favoriteFruit in favoriteFruitsList"
    v-bind:fruit="favoriteFruit">
  </fruits-list>

Vue.component('fruits-list', {
  props: ['fruit'],
  template: '<li>{{ fruit.name }}</li>'
})
var app = new Vue({
  el: "#app",
  data: {
    favoriteFruitsList: [
      {name: 'Peaches'},
      {name: 'Apples'},
      {name: 'Plums'}
    ]
  }
})

表示内容

v-if

  <div id="app">
    <p v-if="display">Hello Vue!</p>
  </div>

var app = new Vue({
  el: "#app",
  data: {
    display: true
  }
})

コンソールログ

表示内容

コンソールログにて操作(この場合画面表示なし)

v-on

  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="greetingCycle">greeting</button>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Good mornig!',
    count: 0,
    greetingList: [
      'Good mornig!',
      'Hello!',
      'Good evening!'
    ]
  },
  methods: {
    greetingCycle: function() {
      this.count = (this.count + 1) % 3;
      this.message = this.greetingList[this.count];
    }
  }
})

ボタン押下回数 0 回

ボタン押下回数 1 回

ボタン押下回数 2 回

ボタン押下回数 3 回

v-if, v-on 組み合わせ

  <div id="app">
    <input type="text" v-if="display">
    <input
      type="button"
      v-if="display"
      v-bind:value="submit"
      v-on:click="displayOnOff">
    <p v-if="completeMessage" v-bind:style="styles">{{ message }}</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'お疲れ様でした!',
    submit: '回答する',
    display: true,
    completeMessage: false,
    styles: {
      color: 'rgb(255, 255, 255)',
      backgroundColor: 'blue',
      padding: '20px'
    }
  },
  methods: {
    displayOff: function() {
      this.display = false;
      this.completeMessage = true;
    }
  }
})

ボタン押下前

ボタン押下後

v-model

  <div id="app">
    <input v-model="message" type="text" size="50">
    <p :style="fonts">{{ message }}</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    fonts: {
      fontFamily: 'Parisienne'
    }
  }
})

※:style は v-bind:style の省略記法。
※font は https://fonts.google.com/ を使用

表示内容

参考記事

日本語版 Vue.js ドキュメント
https://jp.vuejs.org/v2/guide/
MDN Web Docs JavaScript
https://developer.mozilla.org/ja/docs/Web/JavaScript

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-09T06:53:42+09:00

Railsに組み込んだvuetifyがページ遷移をすると読み込まれなくなる現象を解消した

はじめに

RailsにいよいよVuetifyを組み込み始めたが、ページ遷移をするとvuetifyのボタンが消えてしまう。ページ更新をするとボタンが表示される。そのような不具合に見舞われた。いったいなにが原因なのか。一週間ほど悩んだのちにようやくわかった。
　turbolinkの問題だった。ちょっとずつ書いていく。

hello_vue.jsをのぞく

　vue導入時にapp/javascript/packs/hello_vue.jsが作成された。さきの記事ではこいつを編集して、いいようにしていたが、まだここには続きがあった。
app/javascript/packs/hello_vue.js
// If the project is using turbolinks, install 'vue-turbolinks':
//
// yarn add vue-turbolinks
//
// Then uncomment the code block below:
そういうわけで、
$ yarn add vue-turbolinks
を実行したのち、hello_vue.jsを以下のように変更した。
app/javascript/packs/hello_vue.js
import TurbolinksAdapter from 'vue-turbolinks' //turbolinkをつかっていたので追加
import Vue from 'vue'
import Vuetify from "vuetify"; // vuetify導入のため追加
import "vuetify/dist/vuetify.min.css"; // vuetify導入のため追加
import App from '../app.vue'

Vue.use(Vuetify); // vuetify導入のため追加
const vuetify = new Vuetify(); // vuetify導入のため追加

Vue.use(TurbolinksAdapter)
document.addEventListener('turbolinks:load', () => {
    const app = new Vue({
    vuetify, // vuetify導入のため追加
      el: '#hello',
      data: {
              message: "Can you say hello?"
            },
      components: { App }
    })
  })
　
なんとかなった。

turbolinkとはなにか

　今回私を悩ませたturbolinkだが、Railsのgemfileにはちゃんと記述があった。
Gemfile
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
　ページ遷移の速度が向上するらしい。もうちょっとread.meを読んでみよう。
https://github.com/turbolinks/turbolinks

Turbolinks intercepts all clicks on <a href> links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.

　そういうことらしい。turbolinksはaタグのリンクをクリックすると、その遷移をブロックするらしい。そして、その代わりにHistory APIを利用してHTMLレスポンスを返す。History APIを使ってやるほうがはやくなるらしいね。

　しかし、それがなぜvuetifyに悪影響を及ぼしているのかがわからなかった。

　こんなときは答えのほうからみていくと話が早い。解決策としてvueが提示しているvue-turbolinksを覗こう。

vue-turbolinksとは

https://github.com/jeffreyguenther/vue-turbolinks

vue-turbolinks is a package to allow you to easily add Vue.js components to your Turbolinks & Hotwire powered apps.

　簡単に加えられるぜ！ということらしい。（Hotwireってなんだろ。まぁいいか）

　index.jsをみると思いの外シンプルだった。

https://github.com/jeffreyguenther/vue-turbolinks/blob/master/index.js
vue-turbolinks/index.js
//略
const Mixin = {
  beforeMount: function() {
    // If this is the root component, we want to cache the original element contents to replace later
    // We don't care about sub-components, just the root
    if (this === this.$root && this.$el) {
      handleVueDestruction(this);

      // cache original element
      this.$cachedHTML = this.$el.outerHTML;

      // register root hook to restore original element on destroy
      this.$once('hook:destroyed', function() {
        this.$el.outerHTML = this.$cachedHTML
      });
    }
  }
};
//略
vueがmountする前にこれらのfunctionを実行していた。キャッシュされたHTMLの内容を、現在のHTMLに置き換えていた。それだけだった。

なんとなくわかった。torbolinksはキャッシュからリンクをひっぱってくるが、本来のvueはそれをしていなかったのだ。だからvue-turbolinkを使って、キャッシュのところにHTMLを入れ込んでいたのだ。

おわりに

vueはたのしい。vuetifyはたのしい。
これからも、勉強しながら詰まったところを書いていこう。

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-09T01:39:29+09:00

初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！

皆さんこんにちは！

サイト制作って１から作ると大変ですよね。

今は、便利な世の中になっていて、ネットで検索すればテンプレートが出てきます。

例えば、BootstrapやVuetifyなどその他もろもろあると思います。

ただ、僕個人が思っていることは、BootstrapやVuetifyって他の要素にもCSSが適用されるなんて思ったことありませんか？

技術がある人はこれを回避できると思うのですが、僕にはそんな技術がないので何とかならないかなと思っていたところに「Buefy」に出会ったわけです。

Buefyの特徴はとにかく軽い、他の要素に影響をほぼ与えないというのが特徴です。

また、公式のドキュメントは日本語が対応していないものの、ソースコードが分かりやすく、Chormeの翻訳機能を使えばどうってことないです。

これらの特徴から、最近Buefyを愛用しています。

今回は、Buefyの「モーダルウィンドウ」をご紹介したいと思います。

モーダルウィンドウも１から自分で作ると、作れくなくはないものの時間はかかりますよね？

ただ、Buefyを使えばソースコードをコピペするだけで実装することができます！！

びっくりするくらい簡単です！！！

それでは、導入から実装までの順序を一緒に見ていきましょう！

Buefyのインストール
npm i Buefy
yarn
Buefyのインストールを終えたら、main.jsに以下の設定を加えます。
main.js
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)
これで、Buefyの下準備は整いました！

あとは公式ドキュメントからソースコードをコピペするだけ！！

ソースコードコピペ

こちらのリンクから公式ドキュメントにアクセスしてください。

先ほども述べたように、今回は「モーダルウィンドウ」を使います。

どれでもいいので、コードをコピペします。
App.vue
<template>
    <section>
        <div class="buttons">
            <button class="button is-primary is-medium"
                @click="isImageModalActive = true">
                Launch image modal
            </button>
        </div>
        <b-modal v-model="isImageModalActive">
            
        </b-modal>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isImageModalActive: false
            }
        }
    }
</script>
これで、モーダルウィンドウを実施することができます！

これだけです！めちゃめちゃ簡単！！

サイト制作って表面的な部分に時間をかけてしまうと、バックエンドの方に時間が割けなくなってくるので、どれだけ効率よく表面的な部分を完成させることができるかがカギとなってきます。

なので、ぜひBuefyを使って効率よくサイト制作を行ってください！

以上、「初心者必見！サイト制作は楽してなんぼ。CSSフレームワークBuefyの紹介！！」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading

　 Tweet
Qiitaで続きを読む