はじめに Nuxt と Firebase で練習アプリを作ったので、Github にあげることにした。 しかし Github にあげたくない情報（Firebase のAPI情報 etc）もあったので、それを除く方法を調べてみた。 .gitignore を使用する 調べてみると簡単で、.gitignore とい…

はじめに 今までテキストの下にボーダーを引く際、疑似要素を使用していたがもっと楽な方法を教えてもらった。 比較てみた See the Pen rNWNLEO by PROGBLOG (@progblog-sank) on CodePen. 従来のやり方 // HTML <p class="past_way"><span>HELLO WORLD</span></p> // SCSS .past_way { span { pos…

はじめに 以前、classList でクラスを操作する覚書をしたが、IE ではそのうちのtoggle() が使えない沼に一瞬だけハマった。 解決方法 classList の.add() と .remove() 、そして contains() をうまく使えば解決する。 // HTML <p class="togglclassBtn">click me!</p> <p class="change_color">HELLO!</p> // SCSS .tog…

はじめに webアプリを開発中に v-for についていまいち理解し切れていないと感じたので、じっくりと考えてみる。 なお、今回はCLI ではなく CDN にて動作確認をするので、すべてのソースに https://unpkg.com/vue@next を読み込んでいる。 まずは v-for って…

はじめに Firebase に送ったデータの管理でタイムスタンプが必要になったので、データの送信時に現在時刻を送れるようにした。 やったこと <template> <input type="hidden" v-model="checkTime"> </template> <script> export default { props: ["user"], data() { return { chekTime: new Date(), }; }, } </script> このコードだと管理がで…

はじめに Firebase の Realtime Database から情報を取得し、 Nuxt.js の v-for で表示させた。 初回はうまく読み込みのだが、新しくデータを追加し、.on メソッドで呼び出したとき、今までのデータが１から呼び出され、過去のデータが２重に書き込まれた。 …

はじめに 別記事にて記載したが、Firebase の Realtime Database にpush() した場合、自動でIDが付与される。 saite-name-rtdb ├ user-id ├ -謎の文字列 ├ today ├ 0: "HELLO" └ 1: "GOODBYE" ├ -謎の文字列 ├ today ├ 0: "HELLO" └ 1: "GOODBYE" こんな感じ…

undefined になる let list = { hoge: 000, fuga: 001, piyo: 002 }; console.log(list.length) // undefined undefined になる理由は オブジェクトに length は効かないとのこと。 オブジェクトについては下記、参照。 JavaScriptでは、数値も文字列も配列…

axiosとは axiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントです。 jQueryで言うところのjQuery.ajaxであり、非同期にHTTP通信を行いたいときに容易に実装できます。 Vue.jsでは非同期通信を行うのにaxiosを使うのがスタンダードとなって…

はじめに Firebase の Realtime Database で ログインしたユーザーが投稿できる仕組みを作成している。 ログイン、push() を用いユーザー投稿まではできた。 が、その際に生成されるJSON で思い通りにいかない点があった。 意図しない文字列が ユーザー投稿…

はじめに Nuxt.js でウェブアプリを作成している。 複数のリストを Firebase の Realtime Database に保存するというもの。 v-for を用い、リアクティブに配列に要素を追加し、最後にまるっとデーターベースに保存する。 問題発生 データーベースに保存する…

はじめに 過去記事でNuxt.js と Firebase の Realtime Database にデータを保存する処理を記載した。 >Nuxt.js でFirebase にデータを保存する ただ複数要素を保存する方法がわからなかった。 厳密にいえば、変動するデータ数の保存の仕方が不明だったので、…

前提 Firebase 側の設定を完了しておくこと。 >Firebase 側の設定について Nuxt.js 側の設定 コード <div class="form"> <input type="text" v-model="hoge"> <button @click="saveContent(hoge)">保存</button> </div> <script> import firebase from "~/plugins/firebase.js"; // △ https://blog-progblog-web.hatenablog.com/entry/2021/01/10/173554 の記事を…

データベース設定の手順 サイドバーの Realtime Database を選択する。 データベースを作成する を選択する。 Realtime Database のロケーション はデフォルト 米国 のまま。 セキュリティルールは ロックモード を選択する。 Realtime Database > ルールを…

前提 ローカルで新規wordpressテーマを作成した 依存した記事がいくつかある サーバー、データベースに触れたくない 簡単に本番環境にアップできるプラグイン All-in-One WP Migration 上記プラグインをローカル、本番環境ともにインストールする。 ローカル…

前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 上記システムの仕組み まずは大枠 index.vue でコンポーネント（ログイン前） Hello.vue を表示する。 Hello.vue に組み込まれたGo…

前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 コード <template> <div > <h1>GOOD BYE</h1> <span>{{ user.displayName }}</span> <button @click="logout">ログアウト</button> </div> </template> <script> import firebase from "~/plugins/firebase.js"; export default { prop…

前提 Nuxt.js と Firebase でログインシステムを構築しておく。 上記ログインシステムの構築方法は別記事にて記載している。 概要 前提でやったこと まずは大枠 index.vue にHello.vue を表示する。 Hello.vue に組み込まれたGoogleログイン ボタンをクリッ…

前提 Nuxt.js と Firebase Googleアカウントログインの仕組みを作成しておく。 仕組みの作り方は別記事にて。 コンポーネントの構成 大枠 index.vue コンポーネント（ログイン前） Hello.vue コンポーネント（ログイン後） Goodbye.vue 仕組みを言語化 まず…

サンプルコード <button class="fnBtn">function</button> <button class="arrowThis">() => this</button> <button class="arrowEvent">() => event.currentTarget</button> <script> // 従来のfunction() 用いた通常関数で this の値を取得する const fnBtn = document.querySelector('.fnBtn'); fnBtn.addEventListen…

サンプルコード <template> <div id="onclickTest"> <button v-on:click="alert">クリック要素</button> </div> </template> <script> export default { data() { return {}; }, methods: { alert: ()=> { alert("hoge"); } } }; </script> <style> </style> 対象の要素でv-on:click="alert" を定義し、クリック時にmethods: 内にある定義済みalert を呼びだしている。 ちなみに…

Firebase でログイン設定をする手順 対象のFirebase console にアクセスする。 ［ Authentication ］ タブに移動する。 ［ ログイン方法を設定 ］ をクリックする。 ［ ログイン プロバイダ ］ のGoogle をクリックし［ 有効にする ］をクリックする。 プロ…

サンプルコード <template> <div id="test"> <p v-if="hoge">条件「hoge」は true です。</p> <p v-else>条件「hoge」は false です。</p> </div> </template> <script> export default { data() { return { hoge: true }; }, }; </script> <style> </style> 表示確認 上記コードの状態だと、下記表示になる。 条件「hoge」は true です。 hoge: true を hoge: false にす…

サンプルコード // index.vue <template> <div id="app"> <Hello v-if="!isLogin"></Hello> <Goodbye v-if="isLogin"></Goodbye> </div> </template> <script> export default { data() { return { isLogin: false }; }, }; </script> <style> </style> // Hello.vue <template> <div> <h1>HELLO</h1> </div> </template> <script>…

間違えると、時間を無駄にするので整理する。 npm run build node.js アプリをデプロイするときに使用する。 ファイルの生成場所 project/.nuxt/dist Node.js サーバにデプロイする時に使用 Heroku Digital Ocean … etc npm run generate アプリのデプロイだ…

前提条件 事前にNuxt.jsのプロジェクトを作成しておく必要がある。*1 まずは Firebase をインストールする npm install firebase --save Firebase CLI をインストールする npm install -g firebase-tools 上記コマンドを使用し、Firebase CLI をインストール…

Firebase でプロジェクトを作成 Firebase へアクセスする [ プロジェクトを作成 ] ボタンをクリックする プロジェクト名を決める（プロジェクト名は管理画面上の名称になる） プロジェクトID*1が動的に決まるが、変更もOK Firebase の規約にチェックを入れ、…

コード npx nuxt -v // 出力結果 // @nuxt/cli v2.14.12 もっとシンプルに package.jsonでも確認することができる。 というより、こっちの方が圧倒的に早くバージョンを確認できる。 "dependencies": { "core-js": "^3.6.5", "nuxt": "^2.14.6" },

Nuxt.js をインストールする プロジェクトを作成する npx create-nuxt-app projectName まずは上記コードをターミナルに記入する。 projectNameはプロジェクトごとに指定する。 その後、いくつか質問されるので用途に合わせて選択していく。 プロジェクト名…

サンプルコード <p class="a">A</p> <p class="a">A</p> <p class="a">A</p> <button class="js-triger">文字色を変更する</button> <script> const btnTriger = document.querySelector('.js-triger'); btnTriger.addEventListener('click', ()=>{ const all = document.querySelectorAll('.a'); console.log(all); // Node…