20191028のvue.jsに関する記事は5件です。

投稿日：2019-10-28T23:22:33+09:00

Rails5.2 + Vue.js + Dockerでプロジェクトを作成

はじめに

Railsを使っていてVueも一通り学んだのでRailsとVueを使えるように環境構築してみようと思い勉強してみたことをアウトプット。

Rubyのバージョンは2.5.3
Railsのバージョンは5.2.3
DBはMysqlを使用

Railsのプロジェクトを作成するディレクトリを事前に作成しておく
$ mkdir <任意のフォルダ名>
フォルダを作成したら作成したディレクトリに移動しておく

Docker用のファイルの作成

Dockerのコンテナを作成するためのファイルを作成

Dockerfile
docker-compose.yml
Gemfile
Gemfile.lock
の４つのファイルを作成する。
Dockerfile
FROM ruby:2.5.3

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
    apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

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 curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
    apt-get install nodejs

RUN yarn add node-sass

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
docker-compose.yml
version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app
    ports:
      - 3000:3000
    depends_on:
      - db
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  db-volume:
Gemfile
source 'https://rubygems.org'
ruby '2.5.3'
Gemfile.lock
はbuildした後に自動的に記述されるので空にしておく。（ファイルは必要）

この４つのファイルを作成し、先ほど作成したディレクトリに置く。

Railsプロジェクトの作成

次にRailsのプロジェクトを作成するため次のコマンドを実行
$ docker-compose run web rails new . --force --database=mysql
(rails newの . は現在いるディレクトリにそのままプロジェクトを作成するというもの)

プロジェクトの作成が終わったらdocker-compose psでコンテナが作成されているか確認。
次にRailsプロジェクトのdatabase.ymlを編集します。
config/database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db
passwordとhostの部分をdocker-compose.ymlの記述と合わせます。

$ docker-compose upコマンドでコンテナを立ち上げ、localhost:3000に接続し、RailsのHello World画面が表示されれば無事成功です！

Vue.jsの導入

vue.jsをRailsで使用できるようにするためにまずはWebpackerの導入が必要。Gemfileに以下を追加します。
Gemfile
gem 'webpacker'
記述したら

$ docker-compose run web rails webpacker:installを実行

自分の場合、Gemfileの記述を
gem 'webpacker', github: 'rails/webpacker'
とするとyarnエラーが出てインストールができませんでした。

インストールが完了したらいろいろRailsのプロジェクトにファイルが追加されると思います。

次にVueをインストールしていきます。
$docker-compose run web rails webpacker:install:vue

これでVue.jsの導入が完了しました。

vue.jsファイルのビルド

次にVue.js関連のコンポーネントをJavascriptにコンパイルするため
$ docker-compose run web bin/webpackコマンドを実行します。

RailsのViewsファイルに
<%=javascript_pack_tag 'hello_vue'%>と記述し問題なく表示されていれば成功です！

参考
dockerでrails+vueの環境を作ったので解説
 Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T18:10:06+09:00

Vue.jsでOSとWebサイトからダークモードを設定する

初期表示では、OS側からのダークモードの設定を行い、サイト内からもダークモードの設定をできるようにしてみる。

動作

https://vcss.netlify.com
これの右上のトグルボタン

OSからのダークモード設定

OSからのダークモードの設定はCSSでメディアクエリを使用する。

:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
}
@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
  }
}

これで、ダークモードだった場合は、@media内の設定を読み込むようになる。

サイト内からのダークモード設定

サイト内での設定では、トグルボタン等から変更を受けた時に、HTMLタグにクラス等を付与して切り替える。

:root {
  --base3-l3: #{$base3-l3};
  --base3-d10: #{$base3-d10};
  --base3: #{$base3};
  --base2-d10: #{$base2-d10};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
  --base00: #{$base00};
  &[data-theme="dark"] {
    --base3-l3: #{$base03-l3};
    --base3-d10: #{$base03-d10};
    --base3: #{$base03};
    --base2-d10: #{$base02-d10};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
    --base00: #{$base0};
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --base3-l3: #{$base03-l3};
    --base3-d10: #{$base03-d10};
    --base3: #{$base03};
    --base2-d10: #{$base02-d10};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
    --base00: #{$base0};
    &[data-theme="light"] {
      --base3-l3: #{$base3-l3};
      --base3-d10: #{$base3-d10};
      --base3: #{$base3};
      --base2-d10: #{$base2-d10};
      --base2: #{$base2};
      --base1: #{$base1};
      --base0: #{$base0};
      --base00: #{$base00};
    }
  }
}

データ属性が付与されたら、既存の変数を上書きする。

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="setScheme"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  created() {
    // ローカルストレージチェック
    if (localStorage.colorThema === "light") {
      this.checked = true;
    } else if (localStorage.colorThema === "dark") {
      document.documentElement.setAttribute("data-theme", "dark");            
    } else if (!window.matchMedia("(prefers-color-scheme: dark)").matches) {
      // darkモードではない時トグルボタンを動かす
      this.checked = true;
    }
  },
  methods: {
    setScheme: function () {
      // ローカルストレージに保存
      localStorage.colorThema = this.checked ? "light" : "dark";
    }
  },
  watch: {
    checked: function(check) {
      // HTMLタグのdata属性に設定
      if (check) {
        document.documentElement.setAttribute("data-theme", "light");
      } else {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    }
  }
};
</script>

checkboxに合わせてHTMLタグにdata属性を加えたりローカルストレージに入れたり。

課題

data属性にカラースキーマが設定されている状態で、OSの設定からカラースキームを変更されても表示は変更されなくなってしまう

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T18:10:06+09:00

Vue.jsでOSとサイト内からダークモードを設定する

初期表示では、OS側からのダークモードの設定を行い、サイト内からもダークモードの設定をできるようにしてみる。

動作

https://vcss.netlify.com
これの右上のトグルボタン

OSからのダークモード設定

OSからのダークモードの設定はCSSでメディアクエリを使用する。

:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
}
@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
  }
}

これで、ダークモードだった場合は、@media内の設定を読み込むようになる。

サイト内からのダークモード設定

サイト内での設定では、トグルボタン等から変更を受けた時に、HTMLタグにクラス等を付与して切り替える。

:root {
  --base3: #{$base3};
  --base2: #{$base2};
  --base1: #{$base1};
  --base0: #{$base0};
  &[data-theme="dark"] {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --base3: #{$base03};
    --base2: #{$base02};
    --base1: #{$base01};
    --base0: #{$base00};
    &[data-theme="light"] {
      --base3: #{$base3};
      --base2: #{$base2};
      --base1: #{$base1};
      --base0: #{$base0};
    }
  }
}

データ属性が付与されたら、既存の変数を上書きする。

<template>
  <div>
    <input type="checkbox" v-model="checked" @change="setScheme"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  created() {
    // ローカルストレージチェック
    if (localStorage.colorThema === "light") {
      this.checked = true;
    } else if (localStorage.colorThema === "dark") {
      document.documentElement.setAttribute("data-theme", "dark");            
    } else if (!window.matchMedia("(prefers-color-scheme: dark)").matches) {
      // darkモードではない時トグルボタンを動かす
      this.checked = true;
    }
  },
  methods: {
    setScheme: function () {
      // ローカルストレージに保存
      localStorage.colorThema = this.checked ? "light" : "dark";
    }
  },
  watch: {
    checked: function(check) {
      // HTMLタグのdata属性に設定
      if (check) {
        document.documentElement.setAttribute("data-theme", "light");
      } else {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    }
  }
};
</script>

checkboxに合わせてHTMLタグにdata属性を加えたりローカルストレージに入れたり。

課題

data属性にカラースキーマが設定されている状態で、OSの設定からカラースキームを変更されても表示は変更されなくなってしまう

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T16:48:40+09:00

【Vue.js】Composition APIを利用したコンポーネントの作成方法について

Composition APIとは

従来のdata, computedを用いたAPIによる問題を改善するための、Vue.jsの新たなコンポーネント作成方法です。
https://vue-composition-api-rfc.netlify.com/#summary

Vue3.xで使用可能になるとのことですが、以下のプラグインを使用することで、Vue2.xでも利用可能です。
https://github.com/vuejs/composition-api

Composition APIを利用したコンポーネントの例
<template>
  <div>
    <p>{{ reactiveValue }}</p>
    <p>{{ computedValue }}</p>
    <div>
      <h1>hoge</h1>
      <p>{{ hogeMethod() }}</p>
      <p>{{ hogeValue }}</p>
    </div>
    <div>
      <h1>fuga</h1>
      <p>{{ fugaMethod() }}</p>
      <p>{{ fugaValue }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import {
  createComponent,
  computed,
  reactive,
  onMounted
} from '@vue/composition-api'

function hoge() {
  const hogeValue = 'hoge'
  const hogeMethod = () => {
    return 'hogeMethod'
  }
  return {
    hogeValue,
    hogeMethod
  }
}

function fuga() {
  const fugaValue = 'fuga'
  const fugaMethod = () => {
    return 'fugaMethod'
  }
  return {
    fugaValue,
    fugaMethod
  }
}

export default createComponent({
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    onMounted(() => {
      console.log('onMounted')
    })
    const reactiveValue = reactive('reactive value')
    const computedValue = computed(() => props.value)
    const hogeValue = hoge()
    const fugaValue = fuga()
    return {
      computedValue,
      reactiveValue,
      ...hogeValue,
      ...fugaValue
    }
  }
})
</script>
Composition APIを利用してコンポーネントを実装する

ここからは@vue/composition-apiをベースにComposition APIを見ます。

setup()

これまでプロパティに記載していたdata, computed, mountedは全てsetup()の中に内包することになります。
また、templateで使用する値は全てsetupで返却する必要があります。
import {
  createComponent,
  computed,
  reactive,
  onMounted
} from '@vue/composition-api'

setup(props, context) {
    // ライフサイクルメソッドもsetup内で実装する
    onMounted(() => {
      console.log('onMounted')
    })
    const reactiveValue = reactive('reactive value')

    const computedValue = computed(() => props.value)
    const hogeValue = hoge()
    const fugaValue = fuga()
    return {
      computedValue,
      reactiveValue,
      ...hogeValue,
      ...fugaValue
    }
  }
setupのメリット

Composition APIを使用することによって、データを機能単位にまとめられるというメリットがあります。

従来のAPIでは、1つのコンポーネントが有する機能Aに対して、data, computedなど、プロパティ単位で分割されていました。そのコンポーネントが更に機能B、Cを有する場合、機能に対するデータがあちこちに分散することで、管理が煩雑になってしまいます。
data() {
  return {
    機能Aのデータ,
    機能Bのデータ,
    機能Cのデータ
  }
},
computed() {
  機能Aのデータ() {...},
  機能Bのデータ() {...},
  機能Cのデータ() {...}
},
methods: {
...
これをComposition APIに置換することで、機能毎にデータをまとめることが出来ます
setup() {
  // 機能Aに対する実装
  const A = () => {...}

  // 機能Bに対する実装
  const B = () => {...}

  // 機能Cに対する実装
  const C = () => {...}

  return {
    A,
    B,
    C
  }
}
setupの分割

setupにほとんどの機能を実装するということで、setupの肥大化が懸念されますが、こちらは、機能毎にfunctionを切ることで、肥大化を防止出来ます。
createComponent外で、functionを作成します。

それぞれのfunctionで、templateで使用したい値を返却するのを忘れてはいけません。
最終的には、functionの返り値をそのままsetupの返り値にしてあげます。
import {
  createComponent,
  computed,
  reactive,
  onMounted
} from '@vue/composition-api'

function hoge() {
  const hogeValue = 'hoge'
  const hogeMethod = () => {
    return 'hogeMethod'
  }
  return {
    hogeValue,
    hogeMethod
  }
}

function fuga() {
  const fugaValue = 'fuga'
  const fugaMethod = () => {
    return 'fugaMethod'
  }
  return {
    fugaValue,
    fugaMethod
  }
}

export default createComponent({
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    onMounted(() => {
      console.log('onMounted')
    })
    const reactiveValue = reactive('reactive value')
    const computedValue = computed(() => props.value)
    const hogeValue = hoge()
    const fugaValue = fuga()
    return {
      computedValue,
      reactiveValue,
      ...hogeValue,
      ...fugaValue
    }
  }
})
注意点として、機能分離した際の名前の衝突です。
上記例におけるhoge()とfuga()に同様のメソッド名がある場合、setupで最後に返却した方に上書きされます。その際には警告などが出力されないため、知らず知らずのうちに上書きが発生する。ということも考えられます。

そのため、機能分離のためのルールを設定するなど、多少人力が必要になるかもしれません。

最後に

Composition APIを用いることで、肥大化したコンポーネントで、１機能の修正のためにdataとmethodsをスクロールで往復する状況が改善されるかもしれません。
(そもそも、そのようなコンポーネントは再設計した方がいいかもしれませんが...)

以上です。ありがとうございました。

参考記事

https://qiita.com/ryo2132/items/f055679e9974dbc3f977
https://vue-composition-api-rfc.netlify.com/#api-introduction

参考にさせていただきました。ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-10-28T15:22:45+09:00

NativeScriptを用いたVue.jsモバイルアプリ開発の環境構築

概要

NativeScriptを用いてVue.jsモバイルアプリを作る際の環境構築の手順をまとめました．

NativeScript・・・本物のモバイルネイティブアプリをJavaScriptで開発するためのオープンソースフレームワーク

NativeScript-Vue・・・Vue.jsを使ってモバイルアプリを作成するためのNativeScriptのプラグイン

環境

Mac OS X 10.14.6

Node.js v12.12.0

NativeScript 6.1.2

NativeScript-Vue 2.4.0

手順

NativeScriptのシステム要件のセットアップする

下記ページに従い，macOSでNativeScriptアプリをビルドして実行するために必要なすべてのシステム要件をセットアップします．
最後の手順でtns doctorコマンドを実行して問題が検出されなければ次のページに進む前に本記事に戻り，次の手順に進んでください．

NativeScript Advanced Setup — macOS - Native
Script Docs

「結局英語で書かれた公式ドキュメントかよ，読むの面倒だからQiita記事探してるんだよ」と思った方もいるかもしれません．しかし私の経験上，今回のような導入手順や環境構築に関しては最初から公式サイトを読みにいくのが最も時間を無駄にせずに済みます．

また，Androidエミュレータ（AVD）のセットアップ手順において，いくつか選択肢が示されていますが，もしAndroid Studioを使う場合は，以下の手順で日本語化できます．

MacでAndroid Studioを日本語化する - ソフラボの技術ブログ

NativeScript-Vueをインストールし開発を開始する

下記ページに従い，NativeScript-Vueのインストール，プロジェクト作成，ビルドを行います．幸いこちらは日本語ですね．

クイックスタート - NativeScript-Vue

tns run android --bundleコマンドでAVDが立ち上がれば成功です．
ちなみにこれはPixel 2のAVDを使用した場合です．

動作確認

app/components/App.vueにmsg: "Hello!"と書かれた箇所があるので，それを編集してみてください．

画面に表示されているメッセージが自動で変わると思います．以上で環境構築は終わりです．

　 Tweet
Qiitaで続きを読む

20191028のvue.jsに関する記事は5件です。

Rails5.2 + Vue.js + Dockerでプロジェクトを作成

はじめに

Docker用のファイルの作成

Railsプロジェクトの作成

Vue.jsの導入

vue.jsファイルのビルド

Vue.jsでOSとWebサイトからダークモードを設定する

動作

OSからのダークモード設定

サイト内からのダークモード設定

課題

Vue.jsでOSとサイト内からダークモードを設定する

動作

OSからのダークモード設定

サイト内からのダークモード設定

課題

【Vue.js】Composition APIを利用したコンポーネントの作成方法について

Composition APIとは

Composition APIを利用したコンポーネントの例

Composition APIを利用してコンポーネントを実装する

setup()

setupのメリット

setupの分割

最後に

参考記事

NativeScriptを用いたVue.jsモバイルアプリ開発の環境構築

概要

環境

手順

NativeScriptのシステム要件のセットアップする

NativeScript-Vueをインストールし開発を開始する

動作確認

日付別

タグ一覧