What's New Qiita

20201021のvue.jsに関する記事は12件です。

  • 投稿日：2020-10-21T23:58:28+09:00

10月時点でのVue2からVue3への更新方法(私見)

Vue3 への更新

Vue3 がリリースされてそろそろ 1 ヶ月ほど経ち、個人プロジェクトを Vue2 から Vue3 へ更新したのを機に、
現状での Vue3 への更新方法を確認しておきましょう。

vue-cli-plugin-vue-next

vue-cli-plugin-vue-nextを使い環境を更新する方法です。
このプラグインは Vue3 のベータ版が配信された時期にリリースされました。

使用方法

更新したい Vue CLI のプロジェクトにて、以下のコマンドを入力します。

vue add vue-next

Vue2 の環境が Vue3 へ置き換えられます。
しかし、Vue本体や、Vuex、Vue-routerなどが Vue3 ベータ版やアルファ版のに置き換えられるため、
現状のリリースされている最新版のVuex、Vue-routerを使用したい場合には、別途手動で更新が必要となります。
なお、Vue本体はvue upgradeでも更新できなかったため、現状ベータ版からの更新はプラグインの更新待ちだと思われます。

Vue CLI で上書き更新する

最新版のVue CLIを使い、Vue2 のプロジェクトを上書きして更新する方法です。
環境と同時にpackage.jsonなどの環境を書いたファイル、main.jsなど、重要なファイルも上書きしてしまうので、かなり破壊的な方法になります。

前提としてVue CLIを最新のに更新しなくてはなりません。
コマンドプロントでVue -Vをした時に、

@vue/cli 4.5.X

以上になっていれば、Vue3 を扱うことができます。
もしそうでなければ、npmやyarnを用いてVue CLIを最新のものにしましょう。

やり方

手法としては、更新したいプロジェクトと同じ名称のプロジェクトを新規に作成すると言った方法です。

vue create hogehoge

あとは、必要機能などをなるべく更新したいプロジェクトと同じに指定していくだけです。
ただし、無事更新が終わっても、上記で述べたとおり、package.jsonやmain.jsの内容も書き換えられてしまうので、
Vue2 で整えた環境を大きく崩してしまう手法でもあるため、小規模ぐらいのでしか使えない手法となります。
(環境の再構築をやってしまうという覚悟があれば取れる手法ではありますが、現状ではおすすめできない…？)

終わりに

私の観測範囲内で以上の 2 つが主なやり方かな？と思います。

vue-cli-plugin-vue-nextのやり方は破壊的でもなく、必要な箇所だけを Vue3 へ更新をしてくれますが、
プラグインだったり Vue3 が Beta 版だったりで、現状プラグインの開発が止まっています。

対して、Vue3 のプロジェクトを作る手法での上書き更新も、開発環境を破壊しての更新となってしまいます。
ただし、正規公開版の Vue3 を使用できるため、今後はvue upgradeを使えば最新の Vue3 を使うことができます。

どちらの手法も現状ではメリットデメリットが強く、まだまだ既存プロジェクトをVue3へするには時期が早いかなと言うのが個人の判断です。
(といいつつ、私の個人プロジェクトはVue3へ更新しちゃいましたが！)
恐らく年末年始から3月にかけて、安定してVue3へ更新できるプラグインができると思うので、現状ではそれ待ちかなと思います。
新規プロジェクトはがっつりVue3でやっちゃっていけるので、そっちでVue3とはを慣れていきましょう！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T22:41:03+09:00

【Vue.js】データが変化したときのcomputed / watch

今回は、算出プロパティと、監視プロパティについて、何が違うのかまとめてみたいと思います。

computedとwatchの違い

いずれも、コンポーネントのデータの中身に変化があった時に発動するものだが、その動作に違いがある

プロパティ データに変化があった時
computed データの中身を変化させたものを表現できる
watch データの中身を変える以外の何らかの処理を発動する

算出プロパティ　computed

let vm = new Vue({
  el: '#app',

  data: {
    newItem: '',
    todos: [
      { title: 'task1', isDone: false },
      { title: 'task2', isDone: false },
      { title: 'task3', isDone: false },
    ]
  },

  computed: {
    remaining: function(){
      let remainItems = this.todos.filter(function(todo){
        return !todo.isDone;
      });
      return remainItems.length;
    }
  }
})
<span>{{ remaining }}/{{ todos.length }}</span>
  1. todosの中でも、isDoneがfalseの要素のみを抽出する（remainItems）
  2. 抽出したremainItemsの数を格納する（remaining）
  3. 残ったタスク / タスクの総数としてブラウザに表示させる

監視プロパティ　watchキー

let vm = new Vue({
  el: '#app',

  data: {
    newItem: '',
    todos: [
      { title: 'task1', isDone: false },
      { title: 'task2', isDone: false },
      { title: 'task3', isDone: false },
    ]
  },

  watch: {
    todos: {
      handler: function(){
        localStorage.setItem('todos', JSON.stringify(this.todos));
      },
      deep: true
    }
  }
})
  1. 今回の監視データは、todosを指定している。
  2. handler内で、変化があった時の処理を行う（ローカルストレージにJSON形式でtodosに、変化後のtodosを保存(setItem)している。）
  3. deepオプションで、データの中身の部分まで監視することができる。

deep watcherの監視範囲

deep: true deep: false
配列要素の変更 監視できる 監視できる
配列要素となるオブジェクトの中身の変更 監視できる 監視できない
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T22:41:03+09:00

【Vue.js】データの変化にて、Vue.jsをやってると必ず疑問に思うこと。

今回は、算出プロパティと、監視プロパティについて、何が違うのかまとめてみたいと思います。

computedとwatchの違い

いずれも、コンポーネントのデータの中身に変化があった時に発動するものだが、その動作に違いがある

プロパティ データに変化があった時
computed データの中身を変化させたものを表現できる
watch データの中身を変える以外の何らかの処理を発動する

算出プロパティ　computed

let vm = new Vue({
  el: '#app',

  data: {
    newItem: '',
    todos: [
      { title: 'task1', isDone: false },
      { title: 'task2', isDone: false },
      { title: 'task3', isDone: false },
    ]
  },

  computed: {
    remaining: function(){
      let remainItems = this.todos.filter(function(todo){
        return !todo.isDone;
      });
      return remainItems.length;
    }
  }
})
<span>{{ remaining }}/{{ todos.length }}</span>
  1. todosの中でも、isDoneがfalseの要素のみを抽出する（remainItems）
  2. 抽出したremainItemsの数を格納する（remaining）
  3. 残ったタスク / タスクの総数としてブラウザに表示させる

監視プロパティ　watchキー

let vm = new Vue({
  el: '#app',

  data: {
    newItem: '',
    todos: [
      { title: 'task1', isDone: false },
      { title: 'task2', isDone: false },
      { title: 'task3', isDone: false },
    ]
  },

  watch: {
    todos: {
      handler: function(){
        localStorage.setItem('todos', JSON.stringify(this.todos));
      },
      deep: true
    }
  }
})
  1. 今回の監視データは、todosを指定している。
  2. handler内で、変化があった時の処理を行う（ローカルストレージにJSON形式でtodosに、変化後のtodosを保存(setItem)している。）
  3. deepオプションで、データの中身の部分まで監視することができる。

deep watcherの監視範囲

deep: true deep: false
配列要素の変更 監視できる 監視できる
配列要素となるオブジェクトの中身の変更 監視できる 監視できない
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T21:50:41+09:00

Vue.jsアプリケーションをGithubPagesしたので体系的に流れをまとめてみた

要旨

Vue CLIで作成したアプリケーションをGithub Pagesにデプロイしたので体系的な流れをまとめてみました。
https://taryotaryo.github.io/janken_app/

別の記事で「簡単にできる」という情報を見かけたことで高を括っていましたが、前提として必要な知識や設定・ツールがあったり、記事に書いてあるとおりにやったのにうまくいかないといったことがありました。今後の備忘用とこれから始められる方の参考になればと思い執筆しました。

全体の流れ

1. Vue CLIでアプリを作成する
1.1. Vue CLIの開発環境を用意する
1.2. プロジェクトを作成する
1.3. プロジェクトを起動してみる

2. Github Pagesにデプロイする
2.1. Gitをインストール
2.2. Githubにアカウントを登録する
2.3. プロジェクトファイルを本番環境用にビルドする
2.4. Githubに公開用のリポジトリを用意する
2.5. ビルドしたファイルをGithubの公開リポジトリに配置する

1. Vue CLIでアプリを作成する

1.1. Vue CLIの開発環境を用意する

node.jsとnpmをインストール

下記の記事を参考にインストールします。

Node.js / npmをインストールする（for Windows）

※疑問1 なぜnode.jsとnpmをインストールするの？

node.jsはサーバーサイドJavaScriptのことです。npmはnode.jsのパッケージ管理システムで、必要なパッケージ(機能)をインストール/アンインストールすることができます。そしてVue CLIはnode.jsのパッケージです。そのためVue　CLIをインストールの前提として、npmとnode.jsは必要になります。

Vue CLIをインストール

Windowsの場合はコマンドプロンプト、Macの場合はターミナルを開き、下記コマンドを実行しVue CLIをインストールします。

npm install -g @vue/cli

インストールが終わったら、下記コマンドを実行して正常にインストールされていることを確認します。
※インストールされているVue CLIのバージョンを表示するコマンドです。バージョン名の表示を確認できたらOKです

vue --version

※疑問2:グローバルインストールて何？

オプションの「-g」はグローバルにインストールします。グローバルでインストールするとはVue CLIの使える範囲をPC全体にするということです。今後もVue CLIを利用して開発する方はグローバルインストールでよいです。
逆に「今回のアプリケーションだけ使えればよい」という方は対象のプロジェクトフォルダに移動した後に下記コマンドでローカルインストールしてください。ローカルインストールとはVue CLIの使える範囲をフォルダ内に閉じ込めます。

npm install @vue/cli

1.2. プロジェクトを作成する

Vue CLIをインストールできたら下記コマンドを実行してプロジェクトを作成します。
※ここではプロジェクトフォルダ名を「vue_application_deploy_to_githabpages」とします

vue create vue_application_deploy_to_githabpages
[書式] Vue create プロジェクトフォルダ名

コマンド実行後にプリセットを問われれます。ここでは「default (babel, eslint)」を選択します。
するとプロジェクトの作成が開始されるので、完了するまでしばらく待ちます。

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

インストール完了後、指定した名前のプロジェクトフォルダが作成され、中身の構成が下記のようになっていることを確認します。

image.png

疑問3:「vue create」コマンド実行後に選択する内容は何？

プロジェクトの作成と同時にプロジェクト開発に導入したい機能を選択します。それぞれ機能の説明は下記の通り。

機能 内容 雑な意訳
Babel JavaScriptの新しい仕様(ES6以降)で書かれたプログラムをES5に変換するツール。 ES6以降の記法(たとえばconstとか)を使う人は導入必須。
TypeScript altJS(代替JavaScript)というJavaScriptの機能を拡張し使いやすくした言語。 TypeScriptを使って開発する人は導入必須。
Progressive Web App (PWA) Support ネイティブアプリのような機能を持ったWebサイトやWebアプリ。　 Webサイトにスマホアプリのようなプッシュ機能やホームボタンなどを実装できる機能。
Router SPA(シングルページアプリケーション)を構築するための、Vue.jsライブラリ。 SPAとはひとつのHTMLファイルで作成され、ページの遷移で再読み込みの発生しないWebサイトやWebアプリのこと。作りたい人は導入必須。
Vuex Vue.js アプリケーションのための 状態管理パターン + ライブラリ。 Vue.jsではコンポーネントという単位で機能別にファイルを分割して開発する。通常はコンポーネント毎にデータを定義してコンポネント間でデータをやり取りするが、Vuexはコンポーネントが使うデータを一か所に集約する貯蔵庫のような役割。
CSS Pre-processors 独自の言語(メタ言語)で書かれたスタイル構文をCSS構文へと変換してくれる機能。 CSSを効率よく書けるsassやscss等があります。それらをcssに変換してくれるものです。vue開発でsass/scssなどを使いたい場合は導入必須。
Linter / Formatter JavaScriptの構文をチェックしてくれるツール linterは構文をチェックする、Formatterはスペースやインデント、改行等のコーディングスタイルを統一してくれるもの。誰がかいてもコードの一貫性を保つてるので共同開発において非常に有用。

1.3. プロジェクトを起動してみる

作成されたプロジェクトフォルダに移動し、「npm run serve」コマンドを実行します。

cd vue_application_deploy_to_githabpages
npm run serve

そうすると下記のように表示されます。Localという項目にあるURL「http://localhost:8080/」にアクセスします。

 DONE  Compiled successfully in 2620ms                                                                          17:22:42

  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

下記のページが表示されればプロジェクトが正常に作成されたことを確認できます。

image.png

疑問4:「すごい！表示された！でもどうして表示されるの？」

ローカルに開発用サーバーを立ち上げてWebページを表示しているから。
Webページを表示するためにはサーバーが必要です。ここでは「npm run serve」コマンドで、PC上に開発用のサーバーを立てています。PCの設定にもよりますが、ローカルサーバーにはデフォルトでポート番号8080番を割り当てられます。ポート番号とはPC上でサービスを区別するための番号です。そのため「localhost:8080」を指定したURLにアクセスするとページが表示されるようになるということですね。
※ちなみにこの表示されているページはVue create後に作成されたデフォルトのHTMLファイルで表示されたページです。

2. Github Pagesにデプロイする

2.1. Gitをインストール

下記の記事を参考にGitをインストールします。

【初心者向け】Gitのインストール方法をわかり易く解説（画面付き）

疑問5 Gitって何？

ファイルのバージョン管理ツールと呼ばれるものです。たとえばエクセルで家計簿を作って使っていることを想像してください。その日の支出を家計簿に記載して保存しました。しかしあとから前日の収支データを間違えて消してしまったことに気づきます。数値を覚えていない限り元に戻すことはできません。
このようなことに対処できるのがGitになります。Gitではコミットという操作を実行することでフォルダやファイルの状態をバージョンという単位で保存しておくことができます。またファイル内容を変えた後でも保存したバージョンにファイルの状態を戻すことができます。今回のケースでいうと前日までのエクセルをバージョン1、誤って記載した状態をバージョン2とすると、バージョン1に戻すことでリカバリできるということになります。

2.2. Githubにアカウントを登録する

下記の記事を参考にGithubにアカウントを登録します。

【2019年1月現在】GitHubアカウント作成方法

※疑問6 Githubって何？

GitHubとは、オンライン上のソースコード管理サービスです。Gitで保存したバージョンの束を「ローカルリポジトリ」といい、このローカルリポジトリをオンラインに配置することができます。PC側のGitと対比してGithubは「リモートリポジトリ」と呼ばれ、PC上でプッシュと呼ばれる操作をすることによりローカルリポジトリをリモートリポジトリとしてに配置することができます。Githubは主に共同開発で使われるサービスで、リモートリポジトリを本番用のファイルとし、各々ローカルPCで作業したものをリモートリポジトリに反映させていくことで開発します。

2.3. プロジェクトファイルを本番環境用にビルドする

Vue.jsは開発時はvueファイル(.vueという拡張子のついたファイル)を使います。vueファイルとはHTML、CSS、JavaScriptをまとめて書けるファイルです。この技術によってたとえばヘッダーはheader.vueで、footerはfooter.vueで、のようにパーツ単位(Vueではコンポーネントと呼ぶ)でファイルを分割することができるようになり、開発しやすくなりました。

しかし上記はあくまで開発時の話で、本番環境つまりユーザーがブラウザを使ってみる場所に置いた場合、ページが表示されることはありません。なぜならブラウザではvueファイルを解釈することはできないからです。ではどうすればよいか？ここで登場するのがビルドになります。

ビルドはvueファイルに書かれたファイルをHTMLとCSSとJavaScriptに変換(これをコンパイルともいいます)します。つまりブラウザで解釈できるファイルに変換するということです。

上記を踏まえて、Github Pagesにデプロイするためには下記の条件を必要になります。

  • ビルドされたファイルであること
  • ビルドされたファイルを「docs」というフォルダの中に配置すること

ビルド時にビルドされたファイルをdocs配下に作成されるように設定する

まずはプロジェクトフォルダ内の一番上の階層に「vue.config.js」という名前のファイルを作成します。このファイルではビルド時の出力形式などを定義します。

image.png

作成したvue.config.jsファイルに下記の内容を記載します。
各パラメーターの説明は下記のとおりです。

「publicPath」：アプリケーションのデプロイされるベースとなるURLを指定
「outputDir」 ：ビルド実行時にビルドしたファイルが生成されるディレクトリを指定

vue.config.js
module.exports = {
    publicPath: './',
    outputDir: 'docs'
}

ビルドする

npm run build

ビルド実行後、どのようになるのか見てみましょう。

まずはビルドされたファイルについて説明します。
「docs」という名前のフォルダが作成され、その中にhtmlファイル、cssファイル、jsファイルが格納されていることを確認できます。このファイル群がビルドされたファイルです。outputDirパラメーターに「docs」を指定したにより、ビルドされたファイルはdocsフォルダの配下に格納されています。

image.png

さらに「docs」フォルダ内のindex.htmlをみてみましょう。横並びになってみにくいと思いますので、文字列「src」でページ内検索してみてください。jsファイルのパスが相対パスになっています。これはpublicPathパラメーターで「./」(相対パスを示す)を指定したからです。

image.png

2.4. Githubに公開用のリポジトリを用意する

Githubにアクセスし、2.2.で作成したアカウントにログインします。
Github

Github1のプロフィールページにアクセス
右上のアイコンをクリック ⇒ Yout profileをクリック
image.png

プロフィール上部の「Repositories」をクリック
image.png

リポジトリページ上部の「New」をクリック
image.png

リポジトリを作成する。「Repository name」にプロジェクト名を入力、「Public」を選択し「Create repository」ボタンをクリック
image.png

遷移先のページの赤枠で記載されたコマンドを控える。公開リポジトリとローカルで作成したプロジェクトファイルを紐づけるために、ローカルで実行するコマンドになります。
image.png

2.5. ビルドしたファイルをGithubの公開リポジトリに配置する

ローカルPCでGitコミットしローカルリポジトリを作成する

プロジェクトフォルダに移動します。

cd vue_application_deploy_to_githabpages

コミットし、ローカルリポジトリを作成します。

git add .
git commit -m "first commit"

ローカルリポジトリとリモートリポジトリを関連づける

さきほど控えたコマンドです。

git remote origin https://github.com/リポジトリ名

ローカルリポジトリをリモートリポジトリに配置する

git push origin master

2.6. Github Pagesで公開する

リポジトリページで「Settings」をクリック。
image.png

ページ下部の「GitHub Pages」に移動する。「none」を「Branch：master」、その後に表示されるフォルダを「/docs」にしてSaveボタンを押します。
image.png

上部にURLが表示されるのでアクセスします。

image.png

ページが無事表示されれば完了です。

参考

Node.js / npmをインストールする（for Windows）
【初心者向け】Gitのインストール方法をわかり易く解説（画面付き）
【2019年1月現在】GitHubアカウント作成方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T16:21:45+09:00

vue.jsを初めて学ぶ① hello world

vue.jsを学ぶ記事では一貫して、
jsfiddle上で、Vue.jsのCDNを読み込んで使用していく。

jsfiddle → ブラウザで、html,css,vueが実装できる。

Vue.js → CDNが使用できる。

hello world

  • ガイドへ移動 スクリーンショット 2020-10-21 16.03.10.png
  • scriptタグをindex.htmlに貼り付ける

以下どちらでも可能
スクリーンショット 2020-10-21 16.03.48.png

index.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id = "app">
  <p>
    {{message}}
  </p>
</div>
  • scriptタグを使用して、vue.jsのCDNを使用できるようにする
  • {{message}}にて、Vueのmessage内容が反映される。
index.js
new Vue({
　el: '#app',
　data: {
　　message: 'Hello World'
　}
})
  • elにて、id'app'を持つ要素にdata(message)をもたせる。

以上で Hello Worldが表示される。

スクリーンショット 2020-10-21 16.12.15.png

Hello Worldを反転させる

  • htmlファイルに、buttonタグとvue専用のDOMイベント v-on:click="メソッド名" を追加。
index.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id = "app">
  <p>
    {{message}}
  </p>
  <button v-on:click="reverseMessage">
    メッセージ反転
  </button>
</div>
  • jsファイルに、methodsを追加。ｈｔｍｌで指定したDOMのメソッド名とfunction関数を記述する。この関数がDOMが動作した時の処理になる。

(reverseMessageでは、文字が反転する関数が記述される。)

index.js
new Vue({
    el: '#app',
  data: {
    message: 'Hello World'
  },
  methods: {
    reverseMessage: function() {
        this.message = this.message.split('').reverse().join('')
    }
  }
})

スクリーンショット 2020-10-21 16.39.51.png

まとめ
1. htmlファイルにscriptタグを導入し、Vue.jsをインストール
2. new Vue（）で括ることでVue.jsが使用できる
3. el: htmlファイル内の要素を指定
4. data: データをもたせる事ができる。さらに、messageで文字列などの要素を持たせる。
5. jsファイルで指定した要素（idやclass）を、htmlファイルに用意し{{}}で囲み指定する。message要素が表示。
6. Vue専用DOMのv-on:clickを追加
7. reverseMessageで、文字反転の関数を呼び出す。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T15:02:03+09:00

Vuepress BlogにJSON-LDを仕込んでみた

きっかけ

突然ですがVuepressっていいですよね。
マークダウンとVue.jsのいいとこどりで、
簡単に記事が書けますし、レイアウトの調整もVue.jsの知識でかなりカバーできます。

WordPressなどと違って、mdファイルを手元においておけるのもうれしいです。
これでブログやマニュアルサイトを書いているのですが……
SEOにあたって、JSON-LDをつけてみようと思ったのが始まりです。

簡単にやってしまうなら

早速ググってみたところ、こんな記事を一番上に見つけました。
なんと、Frontmatterの下にscriptタグ直打ちです。

確かに簡単ではありますが、記事内でも

NOTE: This is more of a hack than an official solutions, and does not guranteed to work in the future.

とあるように、少し裏技的な様子。

しかもこれではページごとに入力する必要があります。困った……

vue-metaを使う

というわけで、ここからが本題、
Vuepressでvue-metaを使ってJSON-LDを自動生成します

まずはvue-metaのインストールから

yarn add vue-meta

続いてvue.use()をするために公式ドキュメントをもとに.vuepressフォルダ内にenhanceApp.jsを作成します。

enhanceApp.js
import VueMeta from '../../node_modules/vue-meta'

export default ({
    Vue, // the version of Vue being used in the VuePress app
    options, // the options for the root Vue instance
    router, // the router instance for the app
    siteData, // site metadata
    isServer // is this enhancement applied in server-rendering or client
  }) => {
    Vue.use(VueMeta)
  }

なんでも、node_modulesへの参照は相対パスでしておかないと、build時にコケるらしいので、そこだけ注意です。

これでvue-metaを使う準備はできました。

Postページにscriptを仕込む

最後に、ブログの投稿ページ用のレイアウトであるPost.vueにmetaInfo()を作り込んでいきます。
この書き方はvue-metaを用いたOGPやJSON-LD用のメタタグ生成を参考にしました。

post.vue
<script>
import PostMeta from '@theme/components/PostMeta.vue'
import Toc from '@theme/components/Toc.vue'

function createShcemaOrg(path, fm) {
  return {
    script: [
      {
        type: 'application/ld+json',
        innerHTML: JSON.stringify(
          {
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            "mainEntityOfPage": {
              "@type": "WebPage",
              "@id": "https://www.794562.xyz" + path
            },
            "headline": fm.title,
            "description": fm.description,
            "image": "",  
            "author": {
              "@type": "Person",
              "name": fm.author
            },  
            "datePublished": fm.date,
            "dateModified": fm.update,
          },
          null, 2,
        ),
      },
    ], 
  }
}

export default {
  components: {
    PostMeta,
    Toc,
  },
  metaInfo() {
    return createShcemaOrg(this.$page.path, this.$frontmatter)
  }
}
</script>

あとは

yarn dev

で開発サーバーを立ち上げると……
きちんとhead内にscriptタグが生成されていました！

リッチリザルトテストでも問題ないと表示されたので、これでいけそうですね！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T13:36:03+09:00

Vueのディレクティブについての記事

体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T11:10:21+09:00

Vue.js で dev server が https モードのときにホットリロードが動かないのをなんとかしたい

Vue.js の開発サーバーには、開発中のコードの更新に合わせて自動的にページが更新される、HMR (Hot Module Replacement) という機能がついてます。
（正確には webpack の機能）
いちいちブラウザをリロードしないでも変更が反映されていくので非常に便利なんですが、開発サーバーを https モードで動かしてる場合、つまり

yarn serve --https

で起動したり、vue.config.js で、

vue.config.js
module.exports = {
  // ...
  devServer: {
    https: true
  }
}

みたいにしてた場合、なぜかこのHMRが機能しないことがあるようです。

なんとかする方法

devServer の設定項目に、以下を追記します

vue.config.js
module.exports = {
  // ...
  devServer: {
    https: true,
+   host: 'localhost',
+   port: 8080
  }
}

これで HTTPS モードでもHMRが動作するようになりました:tada:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T09:55:02+09:00

Vue.js で Video.js を使って動画を再生する

install

$ npm install --save-dev video.js

Component 作成

videoPlayer.vue
<template>
    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
import videojs from 'video.js';

export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

Component 使用

オプション情報についてはオプションガイドを参照してください

<template>
    <div>
        <video-player :options="videoOptions"/>
    </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";
import 'video.js/dist/video-js.css';

export default {
    name: "VideoExample",
    components: {
        VideoPlayer
    },
    data() {
        return {
            videoOptions: {
                autoplay: true,
                controls: true,
                sources: [
                    {
                        src: "/path/to/video.mp4",
                        type: "video/mp4"
                    }
                ]
            }
        };
    }
};

video.js/dist/video-js.css をインポートし video.js の css を含める。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T09:16:59+09:00

【VSCode】Vue.js で Unbound breakpoint

困りごと

VSCodeでのVue.js（TypeScript）の開発時にブレークポイントを設定しようしたら、以下のようになってブレークポイントが貼れない、止まらない。

private.png


launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

解決

VSCodeの設定で以下の設定をfalseにしたらブレークポイントが設定できました。

Debug › Java Script Use Preview.png


参考

https://github.com/microsoft/vscode/issues/102493

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T08:44:40+09:00

へっぽこが1週間でwebサービスを開発する #2 ドメインサーチ

スクリーンショット 2020-10-04 22.31.27.png

ドメインサーチ

ドメインサーチは以下の機能を提供するサービスです。
ドメインサーチ

  • tld検索:対象のtldの提供有無と価格を検索できます。
  • キーワード検索：対象ドメインが任意のキーワードでのランキングを検索できます。
  • WHOIS検索：対象ドメインのWHOISドメインを検索できます。
  • DNSレコード検索：対象ドメインのDNSレコードを検索できます。
  • ドメイン年齢：対象ドメインの運用期間を検索できます。

僕のスペック

・へっぽこエンジニア
・開発歴：３年
・個人開発歴:10ヶ月目(2020.01に今年は個人開発をやる！と決めた。)
・開発言語：python
・今回の開発でようやくvueを使ってみました！！
・ノーコーディングに割と興味がでてきたり。

開発経緯

今回も前回同様、だらさんのweb1weekにて開発しました。

始まる直前にUdemyでVue講座のお勉強をしていたので早速Vueに挑戦するぞ！って事でVue CLIで開発しました。

なんか、NuxtJsが今のVue開発の主流的な記事(Nuxtで始めろ的な記事)をどっかで目にしていたのですが、今回は初めてなので、大人しくVue CLIで開発！

vue自体もそうですが何よりVue CLIすご！って思いました。

使用技術

  • 言語：Vue
  • フレームワーク:Vue CLI
  • デザイン：Vutify (これまたすご！って思いました。)
  • デプロイ環境：netlify　(これもまた　すご！すご！って思いました。)
  • バックエンド：lambda (AWS)

今回は特にすご！便利！って思いながら開発できたので楽しかったです！！

あと、今回はバックエンドで各サイトのドメイン価格等を取得するためにpythonでスクレイピングしてます。

そのバックエンド処理をlambdaに置いています。
AWSのlambdaは今回初めて使いましたがこれも、すご！って思いました！

本番環境

環境.png
今回はNetlifyを初めて利用しました。
カスタムドメインまで無料で設定できるのでありがたいサービスです。

Lambda

Lambdaも今回初めて利用しました。
サーバレス構成のアプリケーションにはとても相性の良いサービスでした。

似たようなサービスでGoogleのCloudFunctionsを当初、利用しようとしていましたが、後述するchromedriverの参照がどうしてもうまくいかず諦めました。

Lambdaはpythonを利用していましたが、Lambdaでpythonのモジュールを参照するためにはレイヤーと呼ばれる箇所に対象のモジュールファイルをアップロードする必要があります。

レイヤーへのモジュールアップロード

今回はseleniumのモジュールをレイヤーにアップロードする方法を記載します。

 mkdir python #まずはルートフォルダpythonを作成します。
 cd python
 pip install selenium -t #カレントディレクトリにseleniumモジュールをダウンロード
 cd ../
 zip -r selenium.zip ./* #最後にpythonフォルダごとzip化

上記で作成したzipファイルをレイヤーにアップロードすることでseleniumをLambdaから参照できるようになり、importで読み込むことができるようになります。

モジュールファイルだけでなく、ドライバ等のpythonファイル以外でも同様の方法で参照することができますが、lambdaを利用するのであれば、他のファイルはS3に置いて参照する方がスマートかとおもいます。

私自身も、今回スクレイピングで必要になったchromedriverはS３に置いてそれを参照させています。

その他

動的にタイトルやdescriptionを変更する

今回、VueCLIを使っており、意図せず、SPA(シングルページアプリケーション)になりました。。
VueRouterを利用して、擬似的に複数ページになるような構成にしたものの、どうやって、タイトル等を変更するんだろう。。ってところに躓きました。

以下のサイトを参考にすることで見事、動的にタイトル等を変更することができるようになりました！！
参考ページ

ドメインサーチ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-21T02:02:09+09:00

Vue.js 覚書

vue serve [vue_file] -> vue server起動
vue create [app_name] -> APP作成
yarn serve -> プロジェクトでserver起動
yarn build -> distフォルダにbuild
vue ui -> プロジェクトをGUIで管理

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧