はじめに クライアント側(JavaScript)で連想配列をjson形式のファイルに書き出し、読み込みする方法を簡単に書きたいと思います。 今回クライアント側はJavaScript(Vue.js)を使用しています。 実装イメージ 見た目のイメージはこんな感じです。 ボタンの色などは別ファイルで設定しているので今回は省略しています。 ファイルの書き込み、読み込みボタンがあり、 書き込みボタンを押すと、jsonファイルがダウンロード 読み込みボタンを押すと、ファイル選択画面がブラウザで開き、ファイルを選択できる。 *ファイル選択後の処理は今回は書いていません 実装 example.vue <template> <div class="example"> <v-row justify="end"> <!-- 書き出しボタン --> <v-col cols="6"> <v-btn color="primary" outlined block @click="dataExport">書き出し</v-btn> </v-col> <!-- 読込ボタン --> <v-col cols="6"> <v-btn id="inportBtn" width="154px" color="primary" @click="btnClick">読み込み</v-btn> <input type="file" style="display: none" @change="dataImport" ref="input" accept="application/json" /> </v-col> </v-row> </div> </template> <script> export default { data: () => ({ exampleData: [ // jsonファイルに書き出ししたいデータ { "name": "太郎", "age": 3 }, { "name": "花子", "age": 5 }] }), methods: { dataExport() { // dataには const blob = new Blob([JSON.stringify(this.exampleData, null, ' ')], { type: 'application/json', }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'exportData.json'; // 出力するファイルの名前 link.click(); link.remove(); }, dataImport() { const ref: any = this.$refs.input; // 選択したファイル const file = ref.files[0]; console.log(file); // 何かエラーチェックを行う場合は以下に // その他処理(API呼ぶなど) }, btnClick() { // 中にあるinput要素を取得 const ref: any = this.$refs.input; // dataImportを実行 ref.click(); }, } </script> 解説 読み込みボタン example.vue ... 省略 ... <!-- 読込ボタン --> <v-col cols="6"> <v-btn id="inportBtn" width="154px" color="primary" @click="btnClick">読み込み</v-btn> <input type="file" style="display: none" @change="dataImport" ref="input" accept="application/json" /> ... 省略 ... <script> export default { 省略 ... }), methods: { dataImport() { const ref: any = this.$refs.input; // 選択したファイル const file = ref.files[0]; console.log(file); // 何かエラーチェックを行う場合は以下に // その他処理(API呼ぶなど) }, btnClick() { // 中にあるinput要素を取得 const ref: any = this.$refs.input; // dataImportを実行 ref.click(); }, } </script> btn要素とは別にinput要素を配置。ボタンをクリックすると、 btnClick()が呼ばれ、その中でbtn要素の中のinput要素にアクセス。 アクセスしたinput要素のclick(=dataImport())を呼ぶ と言った流れになります。 今回はファイルアップロードのボタンにcssを付けたかったので、上のような実装にしましたが、 下のシンプルなファイル選択ボタンでいい場合は以下のコードで十分です。 <input type="file" accept="application/json"> 書き込みボタン example.vue ... 省略 ... <!-- 書き出しボタン --> <v-col cols="6"> <v-btn color="primary" outlined block @click="dataExport">書き出し</v-btn> </v-col> ... 省略 ... <script> export default { data: () => ({ exampleData: [ // jsonファイルに書き出ししたいデータ { "name": "太郎", "age": 3 }, { "name": "花子", "age": 5 }] }), methods: { dataExport() { // JSON.stringifyで文字列に変換 const blob = new Blob([JSON.stringify(this.exampleData, null, ' ')], { type: 'application/json', }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'exportData.json'; // 出力するファイルの名前 link.click(); link.remove(); }, } </script> 書き出しボタンを押すとdataExport()が呼ばれます。 今回書き出す対象のデータはdataにあるexampleDataを使っています。 URL.createObjectURLで、blobに対してアクセスができるURLを作成しています。 このURLはブラウザを閉じるまでメモリに残ってしまうので、最後に.removeを使って、削除しています。 このボタンをクリックすると、ブラウザはexportData.jsonというファイルがダウンロードされます。
はじめに 仕事で使う事になったので1からVue.jsについて学んだ。ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。 なぜコンポーネントではdataプロパティは関数なのか？ Vue.componentで作られるVueインスタンスに基づいて作成されたDOMでは、各DOMのVueインスタンスのプロパティは全て同じメモリ上にあるものを参照する1。 これは効率よく同じものを描画するためのVueの仕組みだが、このVueの仕様ゆえにdataプロパティではオブジェクトではなく関数で書いてあげる必要がある。 仮にオブジェクトで書くと以下のように、同じVueインスタンスを参照しているDOM全てでデータが書き換わってしまう。 動画のソースコードは以下。 sample.html <body> <div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script src=" https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> const data = { number: 12 } Vue.component('my-component', { data: function () { return data }, template: '<p>いいね({{number}})<button @click="increment">+1</button></p>', methods: { increment: function () { this.number += 1; } } }) new Vue({ el: '#app', }) </script> </body> 上記のようにならないようにするために、dataプロパティは関数で書く必要がある。 ※実際には上記もfunction…で関数だが、returnしているものが別の所で作成されたオブジェクトなのでそのオブジェクトのメモリ参照先（ポインタ）がreturnされており、上記の動画のような挙動になっている。 動画のソースコードは以下。 sample.html <body> <div id="app"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div> <script src=" https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> Vue.component('my-component', { data: function () { return { number: 12 } }, template: '<p>いいね({{number}})<button @click="increment">+1</button></p>', methods: { increment: function () { this.number += 1; } } }) new Vue({ el: '#app', }) </script> </body> Vue.jsの勉強メモ一覧記事へのリンク Vue.jsについて勉強した際に書いた備忘録記事のリンクを集約した記事。 https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4 変数にオブジェクトを代入すると、オブジェクトそのものが変数に格納されるのではなく、メモリのポインタが格納され、複数の変数で同じオブジェクトを見てしまうというあれと同じ。 ↩
はじめに 仕事で使う事になったので1からVue.jsについて学んだ。ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。 computedとmethodsの違い 見た目の挙動は同じだが、動きには大きな違いがあるのでちゃんと使い分けないといけないのがcomputedとmethods。 それぞれについてまとめると以下の表のようになる。 あるべきとしては関係のある部分が更新された時だけ変更されるべきなのでcomputedを用いるのが正解。 # 説明 実行タイミング computed 動的なプロパティを定義できるプロパティ。プロパティなので必ずreturnが必要。 依存関係（参照先の値）が更新された時だけ実行。 method メソッドを定義できるプロパティ。 DOMが再描画されたときに毎回実行。 以下の動画のようにconsole.log()を出すとその違いが良く分かる。 動画のソースコードは以下。 sample.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{ counter }}</p> <button @click="counter += 1">+1</button> <p>{{ anotherCounter }}</p> <button @click="anotherCounter += 1">他の+1</button> <p>{{ lessThanThreeComputed }}</p> <p>{{ lessThanThreeMethod() }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { counter: 0, anotherCounter: 0 }, computed: { lessThanThreeComputed: function () { console.log('computed'); return this.counter > 3 ? '3より上' : '3以下'; } }, methods: { lessThanThreeMethod: function () { console.log('methods'); return this.counter > 3 ? '3より上' : '3以下'; } } }) </script> </body> </html> ※ちなみにdataプロパティは動的なものは表現できず初期値を定義するだけに使われるので以下のような事はできない data-prop.js new Vue({ el: '#app', data: { counter: 0 // lessThanThree: this.counter <-できない // lessThanThree: counter > 3 ? '3より上' : '3以下' <-できない } }) Vue.jsの勉強メモ一覧記事へのリンク Vue.jsについて勉強した際に書いた備忘録記事のリンクを集約した記事。 https://qiita.com/yuta-katayama-23/items/dabefb59d16a83f1a1d4
先ほどはtrueの時の表示だけですが、 falseの場合の表示もさせてみます。 ここで使うのが v-else <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <div id="app"> <p v-if="ok">OK</p> <p v-else>NG</p> </div> new Vue({ el: '#app', data: { ok: false } }) v-elseはv-ifの直後に使うこと。
現在ログイン中のuidを取得し、ページを戻るボタンを実装 HTML部は、router-linkタグを使用して、:to="/board/${this.uid}で [/board/uid]ページに戻るボタンを設置。 chat.vue <router-link :to="`/board/${this.uid}`" class="back-btn"> <img src="../assets/戻る.jpg" alt="チャット終了" class="back-btn-icon" /> </router-link> const currentUser = firebase.auth().currentUser;で currentUserという変数にfirebase.auth().currentUser;を代入。 さらに、this.uid = currentUser.uid;でthis.uidという変数に currentUser.uidを代入。 ドキュメント部で.doc(currentUser.uid)として現在ログイン中のユーザー（uid）を取得。 chat.vue const currentUser = firebase.auth().currentUser; this.uid = currentUser.uid; firebase .firestore() .collection("users") .doc(currentUser.uid) .get() 上記とすること現座ログイン中のユーザー(uid)を取得してページを戻ることができる。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <div id="app"> <p v-if="ok">OK!</p> </div> new Vue({ el: '#app', data: { ok: true } })
