タグ別

ユーザースキル別

初心者

開発ブログ

【Nuxt.js】開発ブログ:カレンダーを作成してみる②

前置き 【Nuxt.js】開発ブログ:カレンダーを作成してみる① 前回の続きです。カレンダーの作成をしたい📆前回は必要な情報が何か、探すのでいっぱいでした😵💦ということで、情報の整理からしていきます❗️🧹 続きをやる前に今一度やり方を見直し、実装できそうなものから手をつける方向にしています🌟 前回同様、思い立ってやってみる系の日記みたいなものです✍️ dayjsの使い方と ...

Vueと共通

【Nuxt.js】input type="checkbox"をコンポーネント化する時のパターン

前置き input type="checkbox"チェックボタン部分のみをコンポーネントにする時のコードを書いています✍ シュガーシンタックスv️-modelのおさらいから実際のコンポーネントのサンプルコードなどを載せていきます🍀 参考:Checkbox の Vue コンポーネントを作成する Tips【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする【Vue】Input内の値をv-modelのように親子間でバ ...

Vueと共通

【Nuxt.js】アクセシビリティとコンポーネント化を考えたcheckbox

Contents 前置き構造理解コードまとめ前置き input type="checkbox"といえばこのデザイン これをカスタムすると色や形も自由に変更できます✨ ただCSSでデザインできる💫とわかっていても毎回ググっては読み解くのに時間がかかったためシンプルに理解できるよう記事にしました🔍📚 また、ほとんどのサイトではinputをlabelで囲まず、labelに装飾をするパターンです。inputをdisplay: none;しlabel:: ...

Vueと共通

【Nuxt.js】ESLintまとめ

Contents 前置きESLintについてインストール方法自動修正よくあるエラーの一覧エラーの見方エラーの一覧new-capのエラーまとめ前置き 公式ESLintはコードの問題を見つけて修正できるものです🌟ルールのカスタムもできます💡 ⬇️Prettierはインデント整形です。【Nuxt.js】Nuxt番外編:自動でインデント整形!plugin Prettier ESLintの使い方や、直面した色々なエラー💥そして解決策 ...

Vueと共通

【Nuxt.js】$slotsを使ってみよう

前置き あまり見かけない$slotsのご紹介🌟 $slotsはVue公式のrender関数で使用されています。 vm.$slots のアクセスは、描画関数 によるコンポーネントを書くときに最も便利です。vm.$slots ただrender関数はNuxtでやるのは結構むずかしいです💥なのでrender関数を使用しない実用的な$slotsの使用例をご紹介します。 同時にrender関数については何をしたい時に使うか、そしてNG例をご紹介します。 参考:描画関 ...


中級者

firebase

【Nuxt.js】Firebase Auth × RDB ログインアカウントの送信と取得を考える①

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

Vueと共通

【Nuxt.js】非同期通信awaitのネストやチェーンについて

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

Nuxt独自

【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える②

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

Nuxt独自

【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える

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

Vueと共通

【Nuxt.js】Vuexのcontextと第二引数について

前置き みなさんはVuexのactionsでcontext部分をどのように書いていますか❓ mutationsや他のactionsを呼び出さない場合の話です☝️💡 呼び出さない場合というのはFirebaseなどに送信さえできればよい、それだけで完結するものですね💡 また、第二引数以降に複数の値を渡したい場合はどうしていますか? 今回はその第一引数contextと第二引数に焦点を当てました👀 Contents前置き第一 ...


上級者

更新予定


誰でも

アプリ サイト

【Nuxt.js】SEO基礎編②:超簡単解説!5分でわかるSEO

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

アプリ サイト

【Nuxt.js】SEO基礎編①:超簡単解説!5分でわかるSEO

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


時間別

5分

firebase

【Nuxt.js】Firebase Auth × RDB ログインアカウントの送信と取得を考える①

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

開発ブログ

【Nuxt.js】開発ブログ:カレンダーを作成してみる②

前置き 【Nuxt.js】開発ブログ:カレンダーを作成してみる① 前回の続きです。カレンダーの作成をしたい📆前回は必要な情報が何か、探すのでいっぱいでした😵💦ということで、情報の整理からしていきます❗️🧹 続きをやる前に今一度やり方を見直し、実装できそうなものから手をつける方向にしています🌟 前回同様、思い立ってやってみる系の日記みたいなものです✍️ dayjsの使い方と ...

Vueと共通

【Nuxt.js】非同期通信awaitのネストやチェーンについて

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

Nuxt独自

【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える②

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

Nuxt独自

【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える

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


30分

開発ブログ

【Nuxt.js】開発ブログ:カレンダーを作成してみる①

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

Vueと共通

【Nuxt.js】queryを活かしたPaginationを作ろう

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

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ④

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

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ③

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

firebase

【Nuxt.js】開発ブログ:firebaseでチャットアプリ②

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


60分

firebase

【Nuxt.js】firebase導入編(Firestore版):データの追加 取得をしよう

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

firebase

【Nuxt.js】firebase導入編(RDB版):データの追加 取得をしよう

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

© 2021 aLiz Nuxt