タグ別

前置き $ firebase deploy デプロイ時に直面した2点の問題を、備忘録的に残しておきます✍️ ⬇️基本的な流れはこちらをご覧ください👀 【Nuxt.js】firebase基礎編：Firebase Hosting にデプロイしよう！ Contents前置き$ firebase deploy のエラーエラー内容解決$ firebase init で Overwrite を yes にしてしまった場合対処方法overwrite ...

前置き 今回はNuxt TypeScriptについてです。導入方法と簡単な書き方をご紹介🌟 本格的に使う前にこういう記事を見ると良いかもです💡Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと フレームワークなしの場合はこちら 共通の書き方も少しずつ出しているので気になったら見てみてください✨👀 ⬇️TypeScriptとは　TypeScriptの良さ【Nuxt.js】超初心者向 ...

前置き フレームワーク未使用のファイルver.GitHubとFirebase Hostingの2種類の方法をお伝えします🌟 「公開の仕方が分からない」「自分のポートフォリオを作りたい！」「公開して就活に役立てたい！」そんな方々に手順をお伝えします❣️👩‍🏫 ⬇️Nuxt.jsのデプロイについてはこちらNuxt.jsプロジェクトをGitHubにデプロイする【Nuxt.js】firebase基 ...

前置き Nuxtが新しくなってからGitHubのデプロイが簡単になりました❣️(たぶん)直面したエラーも含め手順をまとめておきます✨ たぶん、というのは今までGitHubでデプロイできると知らず💦笑Firebase Hostingしか使用してなかったので、比較ができないためです🐸 また、「Nuxt GitHub 404」とググると色々な原因がでてきます🔎ただ、現在はdeployコマンドで大体は解決しそうです ...

前置き 以前ロードマップを書きましたが、模写に特化したverです✨【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ①【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ② Progate終わって「模写をやってみよう！🔥」とか「エディターを使ってみよう！」という初期段階で知るべきことをまとめました🌟 ⬇️模写サイト選びの参考にどうぞ【模 ...

Contents 前置きref('users/').on()ref('users/' + uid).once()ルールの問題方向転換が必要？まとめ前置き 前回の続きです。チャットアプリの作成でFirebase Realtime Databaseを使用。 グループチャットまではやらず、単純にアプリ使用者で1つのチャットルームを使用しているようなイメージです。 前回のルールでは公式サンプルを見てログインユーザーのみ読み書き込みできるようにし、ルールの理解をしていきました。 実際はチャット機能の実装なので、書き ...

前置き こちらのシリーズのRealtime Database版🌟 【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える チャット機能(Realtime Database)とタスク管理機能(Cloud Firestore)のアプリを作成。ルール設定や送信、取得のメソッドなど見直し、整理します✨👀 ⬇️ルールは少し　Cloud Firestoreと異なりますが、　違いの ...

前置き 今回はasync/awaitでPromiseの役割をするawaitについてです💫 2つのパターンについて書いていきます。・awaitでawaitをネスト・awaitで.thenのメソッドチェーン そもそも今までの記事ではconst res = axios.getみたいな取得した値を定数にしてその後で取得した値が返ってきた時の処理を書いていました。なのでそれ以外の使い方、定数を使わなくても良い書き方がすごく変に感じていたのです。。。 例えばfirebaseAuthでアカウントを作成し ...

前置き 【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える こちらの続きです。 ルール変更して安全な状態を作りたい❗️ログインユーザーかつ送信したデータ内のuidとauthで取得しているuidが一致する場合のみ読み書きしたい❗️ ということでやっていきます。 Contents前置きルールの確認とコード修正ルールの前提前回の物をチェック書き込みのみtrueにしてみるワイルドカード、再 ...

前置き Udemyのコースで自分自身も見直して勉強になったのでFirebase関連の送信・取得をまとめていきます💫以前も何度かやっていますが、ulとliでコンポーネントを分けて…というのがなかったので、その辺も含めて💡 作ったのはfirebaseと連携したチャット機能(Realtime Database)とタスク管理機能(Cloud Firestore)2画面一緒に見れていちいち切り替えなくて良い便利なアプリです🍀 今回はタスク管理機能をやります。vuexを ...

前置き 前回の続きです。全てにおいて# 心構えが大事になるので、ご確認を。 【Nuxt.js】SEO基礎編①：超簡単解説！5分でわかるSEO Contents前置きSEOの要素SEO内部対策インデクサビリティの最適化パンくずリストの設置🍞title要素の最適化meta descriptionの最適化meta content="noindex"の最適化 SEOの要素 SEO内部対策 使いやすいサイトを作ることページ内の質をあげることです。知りたい情報で検索をし、たどり着いた先で良質な情報が得 ...

前置き 今回はSEO(検索エンジン最適化)について！Nuxt.jsと直接的な関係はありませんが、Nuxt.jsで作ったwebサイトでもSEOは大事ですからね🌟 超簡単に説明する、が当アカウントのモットー。お猿さんでも分かるように書きました🍎🐒 Contents前置き心構え検索エンジンの仕組みクローリングインデックスランキングSEOの要素コンテンツSEO🌟検索キーワードを選定ロングテールSEOコンテンツデザインモバイルフレンドリー 心構え 大事 ...

前置き $ firebase deploy デプロイ時に直面した2点の問題を、備忘録的に残しておきます✍️ ⬇️基本的な流れはこちらをご覧ください👀 【Nuxt.js】firebase基礎編：Firebase Hosting にデプロイしよう！ Contents前置き$ firebase deploy のエラーエラー内容解決$ firebase init で Overwrite を yes にしてしまった場合対処方法overwrite ...

前置き 今回はNuxt TypeScriptについてです。導入方法と簡単な書き方をご紹介🌟 本格的に使う前にこういう記事を見ると良いかもです💡Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと フレームワークなしの場合はこちら 共通の書き方も少しずつ出しているので気になったら見てみてください✨👀 ⬇️TypeScriptとは　TypeScriptの良さ【Nuxt.js】超初心者向 ...

前置き フレームワーク未使用のファイルver.GitHubとFirebase Hostingの2種類の方法をお伝えします🌟 「公開の仕方が分からない」「自分のポートフォリオを作りたい！」「公開して就活に役立てたい！」そんな方々に手順をお伝えします❣️👩‍🏫 ⬇️Nuxt.jsのデプロイについてはこちらNuxt.jsプロジェクトをGitHubにデプロイする【Nuxt.js】firebase基 ...

前置き Nuxtが新しくなってからGitHubのデプロイが簡単になりました❣️(たぶん)直面したエラーも含め手順をまとめておきます✨ たぶん、というのは今までGitHubでデプロイできると知らず💦笑Firebase Hostingしか使用してなかったので、比較ができないためです🐸 また、「Nuxt GitHub 404」とググると色々な原因がでてきます🔎ただ、現在はdeployコマンドで大体は解決しそうです ...

前置き 以前ロードマップを書きましたが、模写に特化したverです✨【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ①【Nuxt.js】番外編：Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ② Progate終わって「模写をやってみよう！🔥」とか「エディターを使ってみよう！」という初期段階で知るべきことをまとめました🌟 ⬇️模写サイト選びの参考にどうぞ【模 ...

前置き 思い立ってやった系の記事です🐣💭とりあえずチャレンジしてみよう！シリーズ…😂笑 いつもの丁寧な解説ではなく、こんなこと調べてこういう手順で試してみたという内容です💡 自分のメモ的なものですが、初心者の方でも開発する時のイメージとして参考になるかもと思ったので残しておきます✍️ 中級、上級者の方も必要な部分だけピックアップして参考にしていただければと思います🍀 全体的なイメージ dayjsを使 ...

前置き データ量の多いページで活躍するページネーション💫 以前にも解説しましたが、もっとシンプルに分かりやすくしました🙌まずは全体の構成を考えて枠組みを作ってそこから作り込む流れにしています✨ ⬇️以前の解説記事はこちら【Nuxt.js】pagination導入編：まずは大枠を理解しよう！【Nuxt.js】pagination実践編:$router.pushで簡単実装！ Contents前置き全体の構成を考えるコンポーネントデザイン ...

前置き チャットシリーズの続きです✨今回はVuexに移行していきます❣️これが終わったら本当にCSSです…😂笑 【Nuxt.js】開発ブログ：firebaseでチャットアプリ①【Nuxt.js】開発ブログ：firebaseでチャットアプリ②【Nuxt.js】開発ブログ：firebaseでチャットアプリ③ Contents前置きVuexに移行まずは取得データのpostsを移行loginを移行画像部分の移行textareaの選択した文字に装飾(ボツネタ ...

前置き チャットアプリシリーズ第三弾❤️CSSを整えたいところですが、まずは画像の投稿＆取得から！ 前回はこちら【Nuxt.js】開発ブログ：firebaseでチャットアプリ② Contents前置き画像の投稿input type="file"のデザイン選択した写真を表示する画像を投稿する画像の取得まとめ 画像の投稿 投稿フォームで選択した画像を表示・確認し、投稿できるようにします👀 参考: SVG Background Imageの色をCSSで変える方法 in ...

前置き 前回の続きです🙋‍♀️【Nuxt.js】開発ブログ：firebaseでチャットアプリ① ログイン機能をつけたりちょっとした見た目の調整をしていきます♪ 今回もあまり丁寧な解説はありません。コードも綺麗ではないですが参考になればと思います🎈🧸 参考:スマホアプリ開発を加速する，Firebaseを使ってみよう 第10回［最終回］　Firebaseの実践的なテクニックを使いこなそうFirebase サーバ時間の取得 ...

前置き 便利なfirebase！シンプルに導入の仕方を解説していきます😉簡単なデータの書き込みと取得をしてみます🍒 firebaseとは 簡単に言うとオンラインにデータを保存できて取得もできる優れものです！自分で1から作るとなると大変ですがfirebaseを使えば簡単ですね🌟Firebase Realtime Database どんな時に使うか？ ex1) チャットアプリリアルタイムにデータを保存・同期できるのでメッセージを送り合うことが簡単になります&#x ...

前置き 便利なfirebase！シンプルに導入の仕方を解説していきます😉簡単なデータの書き込みと取得をしてみます🍒 firebaseとは 簡単に言うとオンラインにデータを保存できて取得もできる優れものです！自分で1から作るとなると大変ですがfirebaseを使えば簡単ですね🌟Firebase Realtime Database どんな時に使うか？ ex1) チャットアプリリアルタイムにデータを保存・同期できるのでメッセージを送り合うことが簡単になります&#x ...