20210226のvue.jsに関する記事は9件です。

投稿日：2021-02-26T23:51:57+09:00

VueプロジェクトをGitHub Pagesに公開【Vue ✕ 天気予報API①】

はじめに

Vue CLI環境構築からGitHub Pagesに公開するまでをこの記事にまとめました。
天気予報APIを使ったアプリケーションをつくる過程で行ったことの備忘録的な内容です。

Node.jsを使える環境が準備されていることを前提に進めます。

Vueをインストール

Vue CLIを使うことで、欲しい機能にあわせたスタート時の環境を作ることができます。
下記コマンドで、Vue環境準備のためのコマンドラインインタフェースをインストールします。
npm install -g @vue/cli
Vue CLI バージョン確認
% vue --version
@vue/cli 4.5.11
また、グローバルインストールを行うための環境パスが通っていない場合はエラーがでるので、この記事を参照ください。

npmのグローバルインストールをするためにパスを通す方法

Vueプロジェクト作成
vue create weather-app
vue create の後にプロジェクト名を指定してください。（今回は weather-app で作成）途中で出てくる選択肢は全部 enter で問題ないですが、カスタマイズしたい場合は最初の質問で Manually select features を選択してください。画像のように vuex や vue-router の追加や、細かい設定が可能です

vue uiコマンドで、グラフィカルインターフェイスを使って、プロジェクトの作成・管理を行うことも可能です!
vue ui
ローカルホスト立ち上げ
cd weather-app
npm run serve
つくったプロジェクト配下に移動し、
npm run serve を実行すると、localhostが立ち上がります。http://localhost:8080/で確認することができます。

ここでブラウザに表示される画面は、src内のファイルが使用されています。

GitHub Pagesに公開

gh-pagesというツールを使って、gh-pagesブランチを公開する方法で進めていきます。

1. Vueの設定ファイルを作成

プロジェクトのルートディレクトリ直下に、以下の内容でvue.config.jsという名前で設定ファイルを作成します。
vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/weather-app/'   //任意
    : '/'
}
ここでは必要ありませんが、ソースコードに変更を加えたら、再ビルドを行ってください。
npm run build
そうすると、本番環境に反映される dist ディレクトリが作られます。
さらに、 dist/index.html 内部のパスが設定に合わせて変更され、Github Pagesで公開した場合に正常に動作します。

2. gh-pagesをインストール
npm install gh-pages --save-dev
3. デプロイのためのコマンドを追加

package.jsonのscriptsに "deploy": "gh-pages -d dist" を追記します。下記のようになるはずです。
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "gh-pages -d dist"   //追加
  },
4. GitHub Pagesに公開

npm run build により、srcのファイルを元に、dist配下に本番環境用のファイルを生成します。その後、npm run deploy を実行することで、リモートにgh-pagesブランチが作られ、distディレクトリの内部がGitHub Pagesに公開されます。

npm run build

npm run deploy

今後、ソースコードを変更し反映させたい場合は、同様の手順で更新してください。

まとめ

天気予報APIからリソース取得【Vue ✕ 天気予報API②】

上記がこの記事の続きです。
ここで作成したVue環境を使って、API通信を行います。

参考文献

【Vue CLI】インストール

【Vue CLI】 publicPath

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T23:51:57+09:00

【Vue ✕ 天気予報API①】VueプロジェクトをGitHub Pagesに公開

はじめに

Vue CLI環境構築からGitHub Pagesに公開するまでをこの記事にまとめました。
天気予報APIを使ったアプリケーションをつくる過程で行ったことの備忘録的な内容です。

Node.jsを使える環境が準備されていることを前提に進めます。

Vueをインストール

Vue CLIを使うことで、欲しい機能にあわせたスタート時の環境を作ることができます。
下記コマンドで、Vue環境準備のためのコマンドラインインタフェースをインストールします。
npm install -g @vue/cli
Vue CLI バージョン確認
% vue --version
@vue/cli 4.5.11
また、グローバルインストールを行うための環境パスが通っていない場合はエラーがでるので、この記事を参照ください。

npmのグローバルインストールをするためにパスを通す方法

Vueプロジェクト作成
vue create weather-app
vue create の後にプロジェクト名を指定してください。（今回は weather-app で作成）

途中で出てくる選択肢は全部 enter で問題ないですが、カスタマイズしたい場合は最初の質問で Manually select features を選択してください。画像のように vuex や vue-router の追加や、細かい設定が可能です

vue uiコマンドで、グラフィカルインターフェイスを使って、プロジェクトの作成・管理を行うことも可能です
vue ui
ローカルホスト立ち上げ
cd weather-app
npm run serve
つくったプロジェクト配下に移動し、
npm run serve を実行すると、localhostが立ち上がります。http://localhost:8080/でこの画面を確認。

ここでブラウザに表示される画面は、src内のファイルが使用されています。

GitHubのリモートリポジトリに登録

まずはGitHubに新規リモートリポジトリを作成し、下記コマンドを実行し登録します。
% git init
% git remote add origin <リモートリポジトリのURL>
% git remote -v //確認
% git add .
% git commit -m 'initial commit'
% git push origin master
GitHub Pagesに公開

gh-pagesというツールを使って、gh-pagesブランチを公開する方法で進めていきます。

1. Vueの設定ファイルを作成

プロジェクトのルートディレクトリ直下に、以下の内容でvue.config.jsという名前で設定ファイルを作成します。
vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/weather-app/'   //任意
    : '/'
}
2. gh-pagesをインストール

--save-dev （ -D でもOK ）は開発用パッケージのインストールに必要なオプションです。
npm install gh-pages --save-dev
package.jsonの devDependencies というところに `` が追加されています。
package.json
 "devDependencies": {
    // 略
    "gh-pages": "^3.1.0",
  },
3. デプロイのためのコマンドを追加

package.jsonのscriptsに "deploy": "gh-pages -d dist" を追記します。下記のようになるはずです。
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "gh-pages -d dist"   //追加
  },
4. deployコマンドで反映

npm run build により、srcのファイルを元に、dist配下に本番環境用のファイルを生成します。その後、npm run deploy を実行することで、リモートにgh-pagesブランチが作られ、distディレクトリの内部がGitHub Pagesに公開されます。

npm run build

npm run deploy

今後、ソースコードを変更し反映させたい場合は、同様の手順で更新してください。

まとめ

下記が続きになります。
この記事では、ここで作成したVue環境を使って、天気予報APIとAJAX通信を行います。

天気予報APIからリソース取得【Vue ✕ 天気予報API②】

参考文献

【Vue CLI】インストール

【Vue CLI】 publicPath

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T20:15:09+09:00

Swagger Codegenで出力したAPIクライアント（typescript-fetch）を Nuxt に組み込む

Nuxt に Swagger Codegen で出力した APIクライアントのコードを組み込む際のメモ。

Swagger から typescript-fetch のコードを出力する

まずは、API Client のコードを取得する。

Swagger Spec の書き方とか、Codegen の使い方は省略。
特に強い理由がないのであれば、SwaggerHub を使うのが賢いと思う。

Export から、Client SDK > typescript-fetch を選択して zip をダウンロード。

API Client ファイルを配置する

設置場所はどこでもいいが、ここでは /api 以下に、ダウンロードしてきた API Client のファイルを配置する。

Nuxt 内のコードから、API Client を読み込む

APIクラスは、Swaggerの tag に対応して作成されている。
次のSpecでは tags が user となっているため、出力されたクライアントには、UserApi というAPIクラスが定義されている。

なお、この Spec は OpenAPI3 での記述なので、Swagger2 だと若干異なるかもしれない。
openapi.yaml
/user/{userId}:
  get:
    tags:
      - user
    summary: ユーザー情報参照
    operationId: getUserById
    parameters:
      - name: userId
        in: path
        required: true
        schema:
          type: string
    responses:
      200:
        description: successful operation
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/User'
vue側では、まず使用するAPIクラスと、設定用のConfigurationをインポートする。
各メソッドは、Spec の operationId と対応している
index.vue
import { UserApi, Configuration } from '@/api'
index.vue
mounted () {
  // Specの記述と同じであれば、BasePathを指定する必要はない
  const conf = new Configuration({
    basePath: 'http://localhost:3000'
  })

  // APIインスタンスを作成
  const userApi = new UserApi(conf)

  // 実行
  // 各メソッドは、Spec の operationId と対応している
  userApi.getUserById('userid').then((value:User) => {
    // Success
    console.log('success', value)

    // 〜取得成功の処理〜

  }).catch((error:unknown) => {
    // Error
    if (error instanceof Response) {
      // エラーレスポンス
      console.error('Error Status', (error as Response).status)
    } else {
      // 接続エラー
      console.error('Error', error)
    }
  })
}
ESLintのエラーが出る場合

まあ、大量に出る。
これはもう、/api を丸ごと ignore しておく。
.eslintignore
static/js/*
static/
api/   <--追加
TypeScriptのエラーが出る場合

api_test.spec.ts のエラー

api_test.spec.ts の中で、
Cannot find name 'describe'
Cannot find name 'expect'
などのエラーが出る場合は、@types/jest をインストールする。
npm install -D @types/jest
そして、インストール後に、tsconfig で読み込んでおく。
tsconfig.json
  "compilerOptions": {
    "types": [
      "@types/node",
      "@nuxt/types",
      "@types/jest"  // <--追記
    ]
  }
api.ts のエラー

Property 'configuration' has no initializer and is not definitely assigned in the constructor.

どうしても、protected configuration: Configuration と name: "RequiredError" の2箇所で TypeScript エラーが出てしまう。

どうやら、本家のリポジトリでは解決されているらしいが（修正コミット）、SwaggerHubには反映されていないようだ。

該当する2箇所を次のように書き換えれば解決する。
export class BaseAPI {
    protected configuration: Configuration | undefined;  // <--ここ
export class RequiredError extends Error {
    name: "RequiredError" = "RequiredError";  // <--ここ
ただ、面倒くさければ api.ts の先頭で、@ts-nocheck してもいいと思う。

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T19:00:07+09:00

天気予報APIからリソース取得【Vue ✕ 天気予報API②】

はじめに

天気予報API（MetaWeather）を使って、一週間分の天気を表示する簡単なアプリケーションをつくりました。備忘録として記事を残します。

Node.jsやVueの環境が準備されていることを前提として進めていきます。

環境

Mac

Vue CLI 4.5.11

Vue 2.6.12

npm 6.14.10

Node.js 14.15.4

必要パッケージをインストール

axiosでAPIと非同期通信、Bootstrap-vueでスタイル作成を行っているので、これらをnpmインストールします。あわせて moment.js という日付の形式を変換するモジュールもインストールします。今回は vue-router は使いませんでした。

① axiosとvue-axiosをインストール
npm install axios vue-axios
② Bootstrap-vueをインストール
npm install bootstrap-vue
③ moment.jsをインストール
npm install moment
npm 5.0.0 以降からは install 時にデフォルトで save（dependenciesに追加）してくれます。今回は npm 6.14.10 なので、--saveオプションを指定する必要はありません。

追加できたか確認

package.jsonのdependenciesにインストールしたモジュールが追加され、この様になっているか確認します。
package.json
"dependencies": {
    "axios": "^0.21.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4"
  },
使用したソースコード

下記がソースコードの一部です。

main.jsを編集

特に設定を弄っていなければmain.jsが最初に呼ばれているエントリーファイルなので、ここで使用するモジュールを読み込みます。axiosとbootstrap-vueはエントリーファイルでインポートするよう指定されています。

Vue.js用に作られたモジュールを使う場合に Vue.use( ) を使います。
main.js
import Vue from 'vue'
import App from './App.vue'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
template内部（HTML）

<b-card-group>などはBootstrap-vueでスタイルをつけています。

data.infos オブジェクトにAPIから取得したデータが格納されています。それをv-forの繰り返し文で表示しています。
Weather.vue
<template>
<div>


  <b-card-group cols="3" cols-sm="4" cols-md="6" cols-lg="7">
    <b-card v-for="info of infos" v-bind:key="info.date">
      <b-card-title>{{ info.date | moment }}</b-card-title>
      <b-card-text>
        <ul>
          <li class="small text-muted">{{ info.weather_state }}</li>
          <li><img v-bind:src="info.image_url" /></li>
          <li class="small text-muted mt-3">気温</li>
          <li>最高 {{ info.max_temp | roundUp }}°C</li>
          <li>最低 {{ info.min_temp | roundUp }}°C</li>
          <li class="small text-muted mt-2">湿度</li>
          <li>{{ info.humidity }}％</li>
          <li class="small text-muted mt-2">風速</li>
          <li>{{ info.wind_speed | roundUp }}mph</li>
        </ul>
      </b-card-text>
    </b-card>
  </b-card-group>
</div>
</template>
script内部（JavaScript）

選択された地域IDである woeid をパラメータに使用し、axiosでAPIにリクエスト。
そのaxiosで取得した情報を、data内のオブジェクトのinfosに代入しています。
Weather.vue
<script>
import axios from "axios";
import moment from "moment";

export default {
  data() {
    return {
      woeid: null, //地域ID
      infos: {},
    };
  },
  methods: {
     // 省略
     // 「getDataUrl」に天気取得のためのURLを生成

      getDataUrl.forEach((value, key) => {
        axios
          .get(value)
          .then(
            function (response) {
              var weather = response.data[0];

              this.$set(this.infos, key, {
                date: weather.applicable_date, //日付
                max_temp: weather.max_temp, //最高気温
                min_temp: weather.min_temp, //最低気温
                wind_speed: weather.wind_speed, //風速
                weather_state: weather.weather_state_name, //天候
                humidity: weather.humidity, //湿度
                image_url:
                  "https://www.metaweather.com/static/img/weather/ico/" +
                  weather.weather_state_abbr +
                  ".ico", //天気アイコン
              });
            }.bind(this)
          )
          .catch(function (error) {
            console.log(error);
          });
      });
    },
  },
  filters: {
    roundUp(value) {
      return Math.ceil(value);
    },
    moment: function (date) {
      return moment(date).format("M月DD日");
    },
  },
};
</script>
App.vueを編集

Weather.vueをinportし、template内に明示することでサイトに組み込みます。
App.vue
<template>
  <div id="app">
    <Weather />
  </div>
</template>

<script>
import Weather from "./components/Weather.vue";

export default {
  components: {
    Weather,
  },
};
</script>

<style>
/* 省略 */
</style>
まとめ

今回はVueを手軽に実践できました。
Vueの公式ドキュメント見やすかったです。次はもっとコンポーネントの数を増やして色々やりたくなりました。Vuetify やら nuxt.jsも試したい所存。

参考文献

axios

Vue.js を vue-cli を使ってシンプルにはじめてみる

BootstrapVue公式

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T14:52:27+09:00

Vue.jsのcomputedの書き方で学ぶJavascriptにおけるオブジェクトのメソッド定義

はじめに

Vue.js(Option api)のcomputedの部分のコードを読む際にあれ、いつも自分が書いている書き方とちょっと違うと戸惑った経験はないでしょうか？

最近、いつも自分がよく書く書き方と異なる書き方がされていて、なんでこの書き方で大丈夫なんだろうと感じたことがあったので整理してみました。

オブジェクトのメソッド定義の3通りの表現方法

Vue.jsのcomputed, method ではオブジェクトのメソッド定義(=関数プロパティ)が利用されます。
その場合のメソッド定義(=関数プロパティ)の表現方法は主に下記の３パターンあります。
(Vue.jsというより、Javascript(ECMAScript)の仕様ですが)

アロー関数式を利用

function式を利用

メソッド定義のための省略構文を利用

オブジェクトのプロパティとして定義するため、1,2の場合はコロン[:]が必須ですが、3の場合はコロンの部分も省略できる構文であるためコロンは不要です。

3つの定義方法の違い

2,3の場合はfunction式として評価されますが、1はアロー関数として評価されます。

アロー関数は「文脈に依存せず、宣言された時点で、thisを確定（＝束縛）する」特徴があるので、1の関数式内でthisを利用すると、Vueインスタンスをthisとして解釈できずにエラーとなります。
(参考：Vue.jsに書いてある「アロー関数は、this が期待する Vue インスタンスではなく・・・」とは？)

コードでの例
export default {
  name: 'SomeList'
  data () {
    return {
      contents: []
    }
  },
  computed: {
    // 1: アロー関数式を利用
    countOfInitialShowedContents: () => 10,
    // 2: function式を利用
    countOfContents1: function() {
      return this.contents != null ? this.contents.size : 0 
    },
    // 3: メソッド定義のための省略構文を利用
    countOfContents2 () {
      return this.contents != null ? this.contents.size : 0 
    },
}
メソッド定義のための省略構文(a shorter syntax for method definitions on objects initializers)とは

アロー関数式とfunction式については多くの方にとって馴染み深い表現だと思いますので、
ここでは「メソッド定義のための省略構文」 についてのみ記載させていただきます。

ECMAScript 2015から導入されたfunctionを利用したメソッド定義の省略形です。
このような表現で記述した場合は、↓のようにfunction式によるメソッド定義と同じように解釈されます。

省略構文(↓のfunction式で定義した場合と同様に解釈されます)
const obj = {
  foo() {
    // ...
  },
  bar() {
    // ...
  }
}
function式を利用した構文
const obj = {
  foo: function() {
    // ...
  },
  bar: function() {
    // ...
  }
}
まとめ

私も3の表現でVueのdataやcomputedをよく記載していたのですが、どのような仕様で実現しているのかをきちんと理解しておらず利用していました。

今回、調べてみたことで今後は自分の中で確信を持ってコーディングをすることができそうです。

もし、同じような疑問を持った方の参考になれば幸いです。
それでは、素敵なVueライフを。

参考リンク

MDN:メソッド定義

【Vue.js】記法の違いまとめ

Vue.jsに書いてある「アロー関数は、this が期待する Vue インスタンスではなく・・・」とは？

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T11:21:26+09:00

SymfonyのEncoreでVuetifyのSassを調整するための設定をする

TL;DR

symfonyのencoreが提供するwebpack.config.jsで、VuetifyのSASSを変更したい場合に、以下の設定をしました。
  // enables Sass/SCSS support
  .enableSassLoader((options) => {
    options.implementation = require('sass')
    options.sassOptions = {
      // fiber: require('fibers'),
      indentedSyntax: true,
    }
    options.additionalData = "@import 'assets/styles/variables.scss'"
  })
以下、詳細。

個人的なメモです。

SymfonyもLaravelのLaravel Mixのような、Javascriptの開発環境をかんたんに構築するためのEncoreという仕組みが用意されています。

そのためencoreをインストールすると、webpack.config.jsもデフォルトのものが提供されます。
composer require symfony/webpack-encore-bundle
yarn install
そのwebpack.config.jsをカスタマイズしていくのですが、Webpackに詳しくないと、カスタマイズもままならないです。

さすがに、ドキュメントが丁寧に整備されているSymfonyも、変化の流れが早いJSのWebpackの説明はシンプルになっている気がして、深く何かをしようとすると戸惑うことが多いです。

EncoreでSASSを使えるようにする。

Symfonyの公式ドキュメントのCSS Preprocessors: Sass, LESS, Stylus, etc.では、Sassが使えるようにするためのローダーの設定だけがシンプルに書かれています。
// webpack.config.js
// ...

Encore
    // ...

    // enable just the one you want

    // processes files ending in .scss or .sass
    .enableSassLoader()

    // processes files ending in .less
    .enableLessLoader()

    // processes files ending in .styl
    .enableStylusLoader()
;
各ローダーにオプションが渡せるわけですが、それはEncoreのindex.jsを読み解いてくださいとあります。

index.jsを開いてみると、まぁ、汎用的な感じにならんでます。

ほんと、シンプルなドキュメントです。質実剛健ですね。

Vuetifyを導入する

Vuetifyもそれなりにドキュメントが充実しています。

ただ、要点だけが記載れていて断片的で、知識不足だと読み解けないんですよね。。。

今回、SASSの設定方法を書いて終わりにしようかと思いましたが、後で見返して自分で混乱する可能性もあるので、もう少し詳しく書いていきます。

混乱のもととなっているのは、VuetifyのWebpack.config.jsの設定方法は、一般的なWebpackでの設定がか書かれていますが、Encoreで導入したwebpack.config.jsとは、Encoreでラップされているので、見た目が違うからです。

そうは言っても乗り越えていきましょう。

Webpackでのインストールを参考にインストールしていきます。

ちなみに、Vuetifyはサイトの更新も頻繁で、パーマネントリンクがあるようでないような感じなので、もしリンク切れをしていたら、公式サイトの検索ボックスで「install」と入れて探してみてください。

インストールした時に入ってきたsass-loaderが10系でした。はじめは8系だった気がしますが、いろいろとモジュールを追加していたら10になっていました。
package.json
・・・
  "sass": "^1.26.10",
  "sass-loader": "10.1.0",
・・・
この時のwebpack.config.jsは、VuetifyのドキュメントのRequires sass-loader@^8.0.0を参考にして、以下のように設定しました。
※半年前ぐらいに設定した時は、fiberのオプションも必要だったのですが、今回、確認したら不要になっていましたので、コメントアウトしました。
webpack.config.js
・・・
  // enables Sass/SCSS support
  .enableSassLoader((options) => {
    options.implementation = require('sass')
    options.sassOptions = {
      // fiber: require('fibers'),
      indentedSyntax: true,
    }
  })
VuetifyのドキュメントでSASSの設定を確認する

左側のサイドメニューの「機能＞ SASS variable」に「Webpack で(Vuetifyを)インストール（した場合のSASSの設定）」方法の説明があります。

こちらもリンク切れしていたら、公式サイトで「SASS」で検索をしてください。

このドキュメントを見ていくと、sass-loaderが9系の設定は以下を書くようにと書かれています。
webpack.config.js
　　　// Requires sass-loader@^9.0.0
     options: {
              // This is the path to your variables
              additionalData: "@import '@/styles/variables.scss'"
            },
私は、10系を使っているので、9系の設定を採用して、以下のように記述しました。
  // enables Sass/SCSS support
  .enableSassLoader((options) => {
    options.implementation = require('sass')
    options.sassOptions = {
      // fiber: require('fibers'),
      indentedSyntax: true,
    }
    options.additionalData = "@import 'assets/styles/variables.scss'"
  })
assets/styles/variables.scssは、ご自分で作成したファイルのパスに合わせてください。

additionalDataの記述をsassOptionsに書いていて、２～３時間、ハマっていたのは内緒です(汗)

パスの話で、一応、Symfonyの4系の標準的なフォルダ構成で設定しています。

これでSASSが設定できるようになりましたので、以下のようにブレイクポイントやコンテナサイズを修正できるようになりました。
assets/styles/variables.scss
$grid-breakpoints: (
        'xs': 0,
        'sm': 576px,
        'md': 768px,
        'lg': 992px - 24px,
        'xl': 1200px - 24px
);

$container-max-widths: (
        'md': map-get($grid-breakpoints, 'md') * 0.9375,
        'lg': map-get($grid-breakpoints, 'lg') * 0.9677,
        'xl': map-get($grid-breakpoints, 'xl') * 0.95
)
まとめ

VuetifyをBootstrap4系の中で混ぜて使うことになったのですが、BootstrapのブレイクポイントとVuetifyのブレイクポイントが違うので、Vuetifyを合わせるためにSASSでの調整が必要となりました。

フルSPAでVuetifyのみで作れればいですが、既存のサービスと組み合わせたりする場合は、細かな調整が必要となります。SASSが使えるようになると、Vuetifyのカスタマイズの幅も広がります。

https://getbootstrap.jp/docs/4.5/layout/overview/

https://vuetifyjs.com/ja/components/grids/#section-4f7f304465b9

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T01:47:14+09:00

【環境構築】docker(docker-syncも) + Vue.js + Rails + MySQL をエラー地獄切り抜け、構築した方法

はじめに

色々なサイトを見ながら、まる三日かけてついに構築できましたので、スムーズに解決できた構築方法をご紹介したいと思います。

・Ruby 2.5.8 (x86_64-linux)
・Ruby on Rails 5.2.4.5

初めに、ファイル作成

$ cd 作業するディレクトリ

作業ディレクトリに移動後。

$ touch Gemfile Gemfile.lock docker-compose.yml Dockerfile

ファイル構成はこちら
[project_name]
├── docker-compose.yml
│── Dockerfile
│── Gemfile
├── Gemfile.lock
ファイルの中身を編集していきます

・Gemfile↓
source 'https://rubygems.org'
gem 'rails', '~>5'
docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7.19
    environment:
      - MYSQL_ROOT_PASSWORD=root
    ports:
      - "3307:3306"
    volumes:
      - ./tmp/db:/var/lib/mysql
  webpacker:
    build: .
    command: bundle exec bin/webpack-dev-server
    volumes:
      - .:/myapp
    ports:
      - "3035:3035"
  web:
    build: .
    environment:
      RAILS_ENV: development
    command: bash -c "bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
      - bundle-data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
      - webpacker
volumes:
  bundle-data:
db（データベース用）、webpacker、アプリケーション用、それぞれのコンテナを作成します。

・Dockerfile↓
FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
  && apt-get install -y nodejs

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install -y yarn

RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

CMD ["rails", "server", "-b", "0.0.0.0"]
Railsの初期画面を表示させる

まず、rails newでプロジェクトの作成をします。
$ docker-compose run web rails new . --force --database=mysql --webpack=vue --skip-coffee
・--skip-coffee：CoffeeScriptのセットアップをスキップ。
$ sed -i ".bak" -e "s/host: localhost/host: webpacker/g" config/webpacker.yml
・sed -i：テキストファイルをフィルター処理で直接編集します。

buildでイメージの構築をします。
$ docker-compose build
datebase.ymlを編集します。
datebase.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root

# ここからした２行
  password: # ここには、datebase-compose.ymlの、- MYSQL_ROOT_PASSWORD=ここを入力
  host: db

development:
  <<: *default
  database: myapp_development
webコンテナ上で、データベースの作成をします。
$ docker-compose run web rails db:create
イメージ構築〜コンテナ起動までをバックグラウンド（-d）で行います
$ docker-compose up -d
localhost:3000にアクセスすると、yey!Railsの初期画面が表示されたのではないでしょうか？

webpackerをインストールしていく

$ docker-compose run web rails webpacker:install
$ docker-compose run web rails webpacker:install:vue
$ docker-compose build
$ docker-compose up -d

Hello Vue!表示しにいく

・config/routes.rbを下記のように編集
routes.rb
Rails.application.routes.draw do
  root to: 'home#index'
end
続いて、home controllerを作成していきます。

$ docker-compose run --rm web rails g controller home index

・app/controllers/home_controller.rbと、app/views/home/index.html.erbの編集をする
home_controller.rb
class HomeController < ApplicationController
  def index
  end
end
webpacker は app/javascript/packs/ 配下に設置されたファイルをコンパイルします。
よって、index.html.erbでは、下記のようになります。
index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
localhost:3000を開いてください。

追記

2021/02/28：docker-syncの導入を追記しました。

docker for macをお使いの方なら陥ると考えられるlocalhostを開くのが以上に遅い問題を解決していきます。

まだ、これからrailsでアプリを作成する方は是非とも見ていただきたいです。

localhostが遅くなる原因と解決法

【原因】

MacのファイルIOが以上に遅いため

つまり、docker for macを使用することによった、ホストとコンテナ間での大量のファイルの同期処理の遅さが原因です。

僕の場合は、1文字変更しただけでもコンパイルに1分以上かかっていました。
もはや、開発どころではありません笑

【解決方法】

docker-syncを使用して解決

解決方法は、調べればわかると思いますが解決方法が複数あります。
どれも賛否両論です。

下記にも記載のある、volumeのマウントや、バインドマウントオプションを使用する、名前解決。
それぞれ試してみましたが、僕の場合効果なしでした。

docker-syncを使用した解決方法が最も効果があったため紹介いたします。

他にも、

Virtual Box（仮想マシン）上でdockerを使用する

バインドマウントオプションを使用する

volumeのマウント

NFSボリュームシェアリング

（DNSで、名前解決）

などなど、様々ありますのでググってみてください。

docker-syncを導入

【参考】
docker-syncでホスト-コンテナ間を爆速で同期する

この記事の通り進めればOKです。

お疲れ様でした?

参考

Rails世渡り2【docker × Ruby on Rails × Vue.js】

Dockerでlocalhostへのアクセスが遅い時の対処法

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T01:47:14+09:00

【環境構築】docker + Vue.js + Rails + MySQL をエラー地獄切り抜け、構築した方法

はじめに

色々なサイトを見ながら、まる三日かけてついに構築できましたので、スムーズに解決できた構築方法をご紹介したいと思います。

・Ruby 2.5.8 (x86_64-linux)
・Ruby on Rails 5.2.4.5

初めに、ファイル作成

$ cd 作業するディレクトリ

作業ディレクトリに移動後。

$ touch Gemfile Gemfile.lock docker-compose.yml Dockerfile

ファイル構成はこちら
[project_name]
├── docker-compose.yml
│── Dockerfile
│── Gemfile
├── Gemfile.lock
ファイルの中身を編集していきます

・Gemfile↓
source 'https://rubygems.org'
gem 'rails', '~>5'
docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7.19
    environment:
      - MYSQL_ROOT_PASSWORD=root
    ports:
      - "3307:3306"
    volumes:
      - ./tmp/db:/var/lib/mysql
  webpacker:
    build: .
    command: bundle exec bin/webpack-dev-server
    volumes:
      - .:/myapp
    ports:
      - "3035:3035"
  web:
    build: .
    environment:
      RAILS_ENV: development
    command: bash -c "bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
      - bundle-data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
      - webpacker
volumes:
  bundle-data:
db（データベース用）、webpacker、アプリケーション用、それぞれのコンテナを作成します。

・Dockerfile↓
FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
  && apt-get install -y nodejs

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install -y yarn

RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

CMD ["rails", "server", "-b", "0.0.0.0"]
Railsの初期画面を表示させる

まず、rails newでプロジェクトの作成をします。
$ docker-compose run web rails new . --force --database=mysql --webpack=vue --skip-coffee
・--skip-coffee：CoffeeScriptのセットアップをスキップ。
$ sed -i ".bak" -e "s/host: localhost/host: webpacker/g" config/webpacker.yml
・sed -i：テキストファイルをフィルター処理で直接編集します。

buildでイメージの構築をします。
$ docker-compose build
datebase.ymlを編集します。
datebase.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root

# ここからした２行
  password: # ここには、datebase-compose.ymlの、- MYSQL_ROOT_PASSWORD=ここを入力
  host: db

development:
  <<: *default
  database: myapp_development
webコンテナ上で、データベースの作成をします。
$ docker-compose run web rails db:create
イメージ構築〜コンテナ起動までをバックグラウンド（-d）で行います
$ docker-compose up -d
localhost:3000にアクセスすると、yey!Railsの初期画面が表示されたのではないでしょうか？

webpackerをインストールしていく

$ docker-compose run web rails webpacker:install
$ docker-compose run web rails webpacker:install:vue
$ docker-compose build
$ docker-compose up -d

Hello Vue!表示しにいく

・config/routes.rbを下記のように編集
routes.rb
Rails.application.routes.draw do
  root to: 'home#index'
end
続いて、home controllerを作成していきます。

$ docker-compose run --rm web rails g controller home index

・app/controllers/home_controller.rbと、app/views/home/index.html.erbの編集をする
home_controller.rb
class HomeController < ApplicationController
  def index
  end
end
webpacker は app/javascript/packs/ 配下に設置されたファイルをコンパイルします。
よって、index.html.erbでは、下記のようになります。
index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
localhost:3000を開いてください。

お疲れ様でした?

参考

Rails世渡り2【docker × Ruby on Rails × Vue.js】

Dockerでlocalhostへのアクセスが遅い時の対処法

　 Tweet
Qiitaで続きを読む

投稿日：2021-02-26T00:49:04+09:00

Vue Devtools導入

Vue Devtools導入

Vue.js Devtools/Chrome ウェブストア

問題発生

Vue.js not detectedで使えない・・・

解決

Vue3.0でChrome Vue.js devtoolsを有効にする

最後にVueパネルをオープンする

　 Tweet
Qiitaで続きを読む