こんにちは！ LIFULLエンジニアの吉永です。 本日は最近あまり関わらなくなったのであまりキャッチアップできていなかったフロントエンド開発技術についてインプットした内容を備忘録として記載していきます。 本記事の概要 私自身、jQueryを用いたフロントエンド開発はなんとなく実装イメージが湧くのですが、Vue.jsで同じことを実現しようとすると都度検索してということが多いので、jQueryとVue.jsで同じことを実現する際のコードの対比を記していこうと思います。 なので、対象読者はjQuery経験者でこれからVue.jsに入門しようとしている人となります。 また、私自身jQuery経験者ではありますが、ベストプラクティスを知っているかと言われると自信がないので、有識者の方から見たらおかしな実装になっている箇所も多々あるかと思いますし、Vue.jsに関しては初心者なので、もっとひどいかもしれません・・・ツッコミどころ満載な内容になってしまっているかもしれませんが、ご容赦くださいませ。 なお、Vue.jsに関しては現在個人的に学習中の教材がバージョン2系になっているので、2系でのコードになっています。 2系と3系では結構変わっているという噂は聞いているのですが、ひとまず教材を読破するまでは教材ベースのバージョンで進めていき、後々3系についてはキャッチアップしようと思ってます。 筆者のフロントエンドスキルと知識について HTML/CSS/JSについては基礎的な部分は習得済みで、PSD/AI/XDなどのデザイン原本ファイルを元にしたWebページのコーディングは概ねできる。 JSに関してはjQueryを用いたフロントエンド開発を数年前に経験済みで、当時はBootstrap+jQueryの組み合わせで制作していた。 Angularはメジャーバージョンが2から4に上がる際に当時関わっていたプロジェクトにて仕様変更部分が既存プロジェクトにどんな影響があるか？どのような改修が必要か？などをレポートにまとめたことがあるが、2017年頃の話なのでまったく記憶にない。 React/Vue.jsもプライベートで簡単なチュートリアルはやってみたが、業務で使うことがなかったので、まったく継続しなかったので、こちらもほとんど記憶にない。 本記事を執筆した理由 上記で記載したように、jQueryを使ってフロントエンド開発を行っていたので、最近のモダンなフロントエンド技術のキャッチアップができていないので、キャッチアップした内容をアウトプットすることで継続させたいから。 業務では主にバックエンド開発を行っているが、LINEアプリでWebページを表示させる際に使用するLIFFについて開発に携わったり、コードレビューに参加したりすることが機会として増えてきたから。 私の所属しているチームではフロントエンド開発にNuxt.jsを採用しているので、まずはNuxt.jsの根幹を成すVue.jsの基礎から体系だって学びなおそうと思ったから。 Hello World See the Pen Hello World by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. もはやコードにすべきか迷うくらいの初歩ですが、何にしてもまずはHello Worldからということで、作ってみました。 Vue.jsでは対象となるエレメントをVueオブジェクトのelプロパティでセレクタ指定して紐づけています。 そうして紐づけたVueオブジェクトにdataプロパティにmessageというプロパティを宣言し、値にローカル変数のhelloを割り当てて初期化しています。 html側ではマスタッシュ構文と呼ばれる構文でVueオブジェクトのdataプロパティ内のmessageを参照して画面に出力しています。 データバインディング v-bind See the Pen データバインディング v-bind by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 続いてinputタグのvalue属性へのデータバインディングです。 先ほどのpタグ内への単純な出力ではマスタッシュ構文を用いましたが、value属性の場合は少し書き方が変わります。 v-bindというディレクティブを使用して、inputタグのvalue属性にバインディングしています。 また、valueの内容にはマスタッシュ構文ではなくVueオブジェクトのプロパティ名そのものを使用する必要があります。 表示・非表示制御 v-if See the Pen 表示・非表示制御 by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 次は条件に応じてエレメントの表示・非表示を制御する例です。 html側でv-ifというディレクティブを用いると、評価対象のプロパティがtrueなら表示、falseなら非表示という制御ができます。 なおv-ifでfalseの場合にはエレメント自体が削除されます。 表示・非表示制御 v-show See the Pen 表示・非表示制御 v-show by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 対して、v-showでは対象のエレメントはDOM上に残り、CSSのdisplayにて非表示にしています。 頻繁に表示非表示を切り替えるなどの際にはv-show、ページ読み込み時のみに表示するか非表示にするかを決めて以降は制御されないようなものはv-ifなどの使い分けをすると良さそうです。 反復処理 v-for See the Pen 反復処理 v-for by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 次はリスト表示などのように複数データを反復処理にて出力する例です。 v-forというディレクティブを使用し、使い方は良くあるforeachのような形で、v-for="{リストから取り出した単一のデータ} in {リストデータ}"のようにして記述します。そしてマスタッシュ構文では取り出した単一のデータを記述します。 イベント処理 v-on See the Pen ボタンクリック v-on by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen. 最後にイベント処理で、その中でも最も使用頻度が高いであろう、ボタンクリック時の実装です。 個人的にはこの部分がjQueryから乗り換える際に一番メリットを感じられる部分かなと思っていて、jQueryのコードは規約を厳しくしておかないと、様々な個所にイベントハンドラ処理が実装されてしまい、このエレメントに対するイベント処理ってどこに実装されてるんだ？とか、実装してあるであろう個所を直しても謎の力が作用して何故か上書きされてしまう、などの辛みを覚えた方は多いのではないかと思います。 Vue.jsではVueオブジェクトと紐づけられたコード内にmethodsというプロパティにイベントハンドラを実装し、v-onディレクティブでボタンクリック時に呼び出す関数をhtml側で定義しています。 このようにすることで、html側からJS側への風通しも良くなり、jQueryに比べると格段にメンテナンスがしやすくなっているのではないかなと思っています。 最後に いかがでしたでしょうか？ Vue.jsとjQueryを対比させて、jQuery経験者がVue.jsに入門する際の参考になればと思い本記事を執筆しました。 今回は初回の記事なので、基本中の基本とも言える部分に留まっており申し訳ないのですが、私と同じようなバックエンド寄りの開発者の方の参考になれば幸いです。 次回のテーマは未定ですが、またある程度インプット出来たら、アウトプットできればと思っています。 最終的にはNuxt.jsまで・・・(上手くまとまるかな・・・) それではまた次の記事でお会いしましょう！

この記事は、関口 厚がポートフォリオ用に開発したWEBアプリの紹介記事です。 アプリの概要 アプリ名：ひとこと日記ver2 日々の記録をテキスト形式で保存する、シンプルな日記アプリです。 コードはGithubにてご覧いただけます。(フロントエンドのコード・バックエンドのコード) 作成環境 ・インフラ：AWS ・バックエンド：node.js ＋ Express ・フロントエンド：Vue.js ・データベース：MySQL ●各バージョン node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0 アプリで行う主な処理 ユーザー登録・認証処理 日記のCRUD処理 アプリの構成 ・インフラは、AWSのEC2上にExpressサーバーを立て、RDS上にMySQLデータベースを立てています。 ・フロントエンドは、Veu-CLIを使って構築し、SPAにしています。（Nuxt.jsは使っていません） ・Expressサーバーにて、SPAのホスティングと、データベース処理用のエンドポイントの提供を行っています。 ・Vue.js-Express間の通信は、axiosでデータをやり取りしています。 サーバーとクライアントの構成図 ユーザー登録・認証機能の動作 ・UIからユーザー登録、ログインを行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、ユーザー登録、ログインの処理を実現します。 ・ログインするとトークンが発行され、以降の処理はトークンによってユーザーを一意に特定します。 日記機能の動作 ・UIから日記の表示・作成・更新・削除を行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、日記のCRUD処理を実現します。 ・axios通信時にサーバーにトークンを送信することで、ユーザーを一意に特定して、日記データを処理します。 フォルダツリー ●vuecli-appのフォルダ構成（フロントエンド） [ルート] └ [public]フォルダ └ [images]フォルダ 　└ 各種imageは全てここに格納 └ index.html └ favicon-diary.ico └ [src]フォルダ └ [asset]フォルダ └ [components]フォルダ 　└ [diary]フォルダ　日記関係のVueコンポーネントを格納するフォルダ └ Index.vue　トップページ（アプリの紹介ページ） └ Mypage.vue　日記の一覧表示ページ └ Edit_Create.vue　日記作成ページ └ Edit_Update.vue　日記更新・削除ページ └ Header.vue　ログイン時のヘッダーコンポーネント └ Help.vue　機能紹介ページ 　└ [login]フォルダ　ユーザー認証関係のVueコンポーネントを格納するフォルダ └ Regist.vue　ユーザー登録ページ └ Login.vue　ログインページ └ Trial.vue　お試しユーザーログインページ └ App.vue └ main.js └ router.js　Vue.jsのルーティングを記述したJS └ store.js　Vuexの設定を記述したJS ●express-appのフォルダ構成（バックエンド） [ルート] └ [public]フォルダ　ビルドしたVue.jsのファイルをここに格納している。 └ 各種ファイル。Vue-CLIでビルドしたdistフォルダ内のファイルをそのままコピーしたもの。 └ [routes]フォルダ　axiosリクエストのエンドポイントを提供するためのルーターモジュールを格納したフォルダ └ get_diaries.js　一ヶ月分の日記を取得する処理のモジュール └ get_one_diary.js　一日分の日記を取得する処理のモジュール └ edit_create.js　日記を作成する処理のモジュール └ edit_update.js　日記を更新する処理のモジュール └ edit_delete.js　日記を削除する処理のモジュール └ user_regist.js　ユーザー登録する処理のモジュール └ user_login.js　ログインする処理のモジュール └ user_delete.js　ユーザーを削除する処理のモジュール └ user_auth.js　認証トークンを延長する処理のモジュール └ [function]フォルダ　サーバーに機能を与えるモジュールを格納したフォルダ └ db_connect.js　データベース接続設定モジュール └ token.js　認証トークン発行モジュール └ clear_auth.js　有効期限切れのトークン情報を削除するモジュール └ app.js

この記事は、関口 厚がポートフォリオ用に開発したWEBアプリの紹介記事です。 アプリの概要 アプリ名：ひとこと日記ver2 日々の記録をテキスト形式で保存する、シンプルな日記アプリです。 コードはGithubにてご覧いただけます。(フロントエンドのコード・バックエンドのコード) 作成環境 ・インフラ：AWS ・バックエンド：node.js ＋ Express ・フロントエンド：Vue.js ・データベース：MySQL ●各バージョン node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0 アプリで行う主な処理 ユーザー登録・認証処理 日記のCRUD処理 アプリの構成 ・インフラは、AWSのEC2上にExpressサーバーを立て、RDS上にMySQLデータベースを立てています。 ・フロントエンドは、Veu-CLIを使って構築し、SPAにしています。（Nuxt.jsは使っていません） ・Expressサーバーにて、SPAのホスティングと、データベース処理用のエンドポイントの提供を行っています。 ・Vue.js-Express間の通信は、axiosでデータをやり取りしています。 サーバーとクライアントの構成図 ユーザー登録・認証機能の動作 ・UIからユーザー登録、ログインを行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、ユーザー登録、ログインの処理を実現します。 ・ログインするとトークンが発行され、以降の処理はトークンによってユーザーを一意に特定します。 日記機能の動作 ・UIから日記の表示・作成・更新・削除を行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、日記のCRUD処理を実現します。 ・axios通信時にサーバーにトークンを送信することで、ユーザーを一意に特定して、日記データを処理します。 フォルダツリー ●vuecli-appのフォルダ構成（フロントエンド） [ルート] └ [public]フォルダ └ [images]フォルダ 　└ 各種imageは全てここに格納 └ index.html └ favicon-diary.ico └ [src]フォルダ └ [asset]フォルダ └ [components]フォルダ 　└ [diary]フォルダ　日記関係のVueコンポーネントを格納するフォルダ └ Index.vue　トップページ（アプリの紹介ページ） └ Mypage.vue　日記の一覧表示ページ └ Edit_Create.vue　日記作成ページ └ Edit_Update.vue　日記更新・削除ページ └ Header.vue　ログイン時のヘッダーコンポーネント └ Help.vue　機能紹介ページ 　└ [login]フォルダ　ユーザー認証関係のVueコンポーネントを格納するフォルダ └ Regist.vue　ユーザー登録ページ └ Login.vue　ログインページ └ Trial.vue　お試しユーザーログインページ └ App.vue └ main.js └ router.js　Vue.jsのルーティングを記述したJS └ store.js　Vuexの設定を記述したJS ●express-appのフォルダ構成（バックエンド） [ルート] └ [public]フォルダ　ビルドしたVue.jsのファイルをここに格納している。 └ 各種ファイル。Vue-CLIでビルドしたdistフォルダ内のファイルをそのままコピーしたもの。 └ [routes]フォルダ　axiosリクエストのエンドポイントを提供するためのルーターモジュールを格納したフォルダ └ get_diaries.js　一ヶ月分の日記を取得する処理のモジュール └ get_one_diary.js　一日分の日記を取得する処理のモジュール └ edit_create.js　日記を作成する処理のモジュール └ edit_update.js　日記を更新する処理のモジュール └ edit_delete.js　日記を削除する処理のモジュール └ user_regist.js　ユーザー登録する処理のモジュール └ user_login.js　ログインする処理のモジュール └ user_delete.js　ユーザーを削除する処理のモジュール └ user_auth.js　認証トークンを延長する処理のモジュール └ [function]フォルダ　サーバーに機能を与えるモジュールを格納したフォルダ └ db_connect.js　データベース接続設定モジュール └ token.js　認証トークン発行モジュール └ clear_auth.js　有効期限切れのトークン情報を削除するモジュール └ app.js

今回やること 　ダイアログボックスの「映画館」の入力項目を、プルダウンリストに変更します。 　プルダウンリストに表示するデータは、スプレッドシートの［映画館］シートを使用します。 　また、プルダウンリストについては、Vue.js に対応した高機能な部品（「vue-select」）がありましたので、これを使用します。 　　◆参考サイト 高機能なセレクトボックス「vue-select」の使い方 　「鑑賞種別」については、［映画館］シートのデータを利用して自動更新する様に変更します。 　これに伴って、ダイアログボックスの「鑑賞種別」を削除します。 「vue-select」の導入 Index.html 　ライブラリをCDNで取得します。 <!-- vue-select --> <script src="https://unpkg.com/vue-select@latest"></script> <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css"> javascript.html 　ライブラリを呼び出します。 <script> const vueSelect = VueSelect.VueSelect; ： </script> Vuejs.html 　子コンポーネント（ダイアログボックス）のcomponentsに、'vue-select': vueSelectを追加します。 Vue.component("modal", { ： components: { 'vuejs-datepicker': vuejsDatepicker, 'vue-select': vueSelect } }); ダイアログボックスの「映画館」と「鑑賞種別」を変更 modalScript.html 　「映画館」の<input>タグを削除して、<vue-select>タグを追加します。 　プルダウンリストに表示するデータを、:options="vueselect.options"で参照します。（下記の Vuejs.html を参照） 　プルダウンリストで選択された値を、v-model="cond.theaterName"で格納します。（初期値の設定も同様） 　「鑑賞種別」（全体、<div class="form-group">タグから全て）を削除します。 <transition name="modal"> ： <div class="form-group"> <label for="theater-name" class="col-form-label">映画館：</label> <!-- <input type="text" class="form-control" id="theater-name" v-model="cond.theaterName"> --> <vue-select id="theater-name" :options="vueselect.options" v-model="cond.theaterName"></vue-select> </div> ： <!-- <div class="form-group"> <div class="input-group"> <label for="viewing-type" class="col-form-label">鑑賞種別：</label> <input type="text" class="form-control" id="viewing-type" v-model="cond.viewingType"> </div> </div> --> </form> </div> ： </transition> </script> Vuejs.html 　プルダウンリストの映画館名をセットする変数（options: []）を、子コンポーネント（ダイアログボックス）と親コンポーネントに追加します。 　options: []には、リストに表示する文字列を1次配列としてセットします。 　→ ex.['川越スカラ座', '池袋シネマ・ロサ', '深谷シネマ',…] Vue.component("modal", { template: "#modal-template", props: { ： vueselect: { options: [] } }, ： }); var app = new Vue({ el: '#app', data: { ： vueselect: { options: [] }, ： }); Index.html 　Vuejs.html で追加した変数（options: []）を連携する為に、<modal>タグにv-bind:vueselect="vueselect"を追加します。 <modal v-if="showModal" v-on:close-modal="doHideModal" v-on:add-data="doAddData" v-bind:message="message" v-bind:subject="subject" v-bind:cond="cond" v-bind:datepicker="datepicker" v-bind:vueselect="vueselect"> <h3 slot="header">custom header {{ processingType }}</h3> </modal> プログラム（処理）の変更 ViewingRecord.gas 　先ず、サーバ側の処理を変更します。 getTheaters(year)　※追加 処理概要：［映画館］シート（スプレッドシート）から「映画館名」と「鑑賞種別」を取得する。 引数　　：yeat: 年を示す文字列。ex.'2021年'［映画館］シートは、年毎にファイルが分かれ 　　　　　ている。 返値　　：「映画館名」と「鑑賞種別」を2次配列で返す。 function getTheaters(year) { var fileId = getFileIdFromYearSettings(year); var sheet = SpreadsheetApp.openById(fileId).getSheetByName('映画館'); var lastRow = sheet.getLastRow(); var theaters = sheet.getRange(3, 3, (lastRow - 2), 2).getValues(); //［映画館］シートの「映画館名」列 と「鑑賞種別」列 を取得。 return theaters; } getViewingType(theaterName, year)　※追加 処理概要：「映画館名」から［映画館］シートを検索して該当する「鑑賞種別」を取得する。　　　　　 引数　　：theaterName:「映画館名」。 　　　　　year: 年を示す文字列。ex.'2021年'［映画館］シートは、年毎にファイルが分かれ 　　　　　ている。 返値　　：「鑑賞種別」。1:映画館, 2:DVD, 3:配信, 4:テレビ, 9:その他 function getViewingType(theaterName, year) { var theaters = getTheaters(year); for(var i = 0; i < theaters.length; i++) { if(theaters[i][0] === theaterName) { return theaters[i][1]; } } return false; } 　addData()の［鑑賞履歴］シートにデータをセットする部分を修正します。 　「鑑賞種別」の値は、従来ダイアログボックスからの入力で設定していましたが、getViewingType()で取得した値を設定する様に変更します。 function addData(cond) { ： //sheet.getRange(targetRow, 2, 1, 6).setValues([[cond.id, cond.viewingDate, cond.movieName, cond.firstLook, cond.viewingType, cond.theaterName]]); var viewingType = getViewingType(cond.theaterName, cond.year); sheet.getRange(targetRow, 2, 1, 6).setValues([[cond.id, cond.viewingDate, cond.movieName, cond.firstLook, viewingType, cond.theaterName]]); } javascript.html 　クライアント側の処理を変更します。 getTheaters(year)　※追加 処理概要：サーバ側のgetTheaters()の呼出し。 　　　　　取得したデータ（「映画館名」「鑑賞種別」）から、プルダウンリスト用の配列を作成 　　　　　する。 引数　　：year: 年を示す文字列。ex.'2021年'［映画館］シートは、年毎にファイルが分かれ 　　　　　ている。 function getTheaters(year) { google.script.run.withSuccessHandler( function(v, element) { var theaters = []; for(let theater of v) { theaters.push(theater[0]); } app.vueselect.options = theaters; }) .withFailureHandler( function(msg, element) { showError(msg); }) .withUserObject(this) .getTheaters(year); } Vuejs.html 　Vue.js の処理（クライアント側の処理）も変更します。 　mounted:（インスタンスがマウントされた後の処理）とmethods:のdoChangeYear:（どちらも処理の一番最後）に、getTheaters()（ javascript.html ）の呼出しを追加します。 var app = new Vue({ el: '#app', ： mounted: function() { ： getTheaters(this.selectedYear); }, methods: { ： doChangeYear: function() { ： getTheaters(this.selectedYear); } } }); 結果 　〔記録追加〕ボタンをクリックすると、ダイアログボックスが表示されます。 　「映画館」がプルダウンリストに変更され「鑑賞種別」が削除されています。 　「映画館」を選択すると、映画館名のリストが表示されます。 　「映画館」に新宿と入力すると、リストの表示が絞り込まれます。 　一覧表の行をクリックする（更新）と、既に入力していた「映画館名」が正しく表示されます。 ◆前の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑩ ◆索引 GASでWebアプリ｢映画鑑賞記録｣を作る《索引》

作成し終わってbuildはできたはいいけど、そのまま公開したら真っ白なページが表示される。 相対パス指定でbuildしてもローカルでは表示されるのに、github pagesで真っ白になる。 そんなお悩みを抱えたあなたに送る忘備録。 環境 Vue Cli 3 vue-router 4 すでに公開用のリポジトリは作成している step 1 vue.config.jsを作成 プロジェクトフォルダにvue.config.jsを作成。 vue.config.js module.exports = { publicPath: '/', //Default outputDir: 'dist' //Default } step 2 publicPathとoutputDirを変更 publicPathは/リポジトリ名に、outputDirはdocsに変更する。 vue.config.js module.exports = { publicPath: '/sample-name', //リポジトリ名 outputDir: 'docs' //docs } step 3 buildする 変更が済んだらyarn or npmでbuildする。 buildが済めばプロジェクトフォルダ配下にdocsのディレクトリが作成される。 これでgithub pages用のdeployファイルが完成。 step 4 docsのディレクトリをmasterにpushして公開 pushの形はお好きに。 docsのディレクトリを外に持ち出して別のgitでpushするもよし。プロジェクトの中でpushするもよし。 pushができたら、github pages側で設定して公開をする。 公開方法はこの記事が簡単でわかりやすかった。 約3時間格闘して公開されたページはこちら https://nekogakuruga.github.io/vue-samplesite/

Dexieで部分一致で検索する方法。 // 記述例 async function search_todo(word) { // Dexieの標準検索には前方一致しかないため、filterを使用して絞り込みをかける。 const todos = await db.table.filter(function (todo) { // javascriptの部分一致検索方法で判定してやる。 return todo.title.indexOf(word) > -1; }).toArray(); return await todos; } 参照元: https://github.com/dfahlander/Dexie.js/issues/146 以上