タグ別

ユーザースキル別

初心者

Vueと共通

【Nuxt.js】srcset, sourceで画像を表示しよう

前置き それぞれのタグの役割がごっちゃになって混同していたので自分の備忘録としても書きました✍️ ⬇️srcsetについては こちらでも少し触れました。【Nuxt.js】画像データをwebPで軽量化よう 今回はより理解を深めるためにsourceコードも使用していきます💫 参考:なんでもかんでもpicture要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点メディアクエリとviewportの使い方についてHTMLのsr ...

Vueと共通

【Nuxt.js】slot文法編: スコープ付きスロットを使おう

前置き スコープ付きスロットのご紹介💫 子から親へデータを渡すことができます✨基本的にはVuexを使えば良いのですが、「Vuexを使うほどではないけど まとまったdataを子で管理したい!」そんな時に使います。公式: スコープ付きスロット やりたいことイメージするために、まずはコードを見てもらいましょう👀 ⬇️子コンポーネントでdataを管理

⬇ ...

そのほか

【Nuxt.js】Nuxtの環境構築をしよう

前置き できるだけ分かりやすく、公式インストールに沿って解説しています✨ その過程で扱うターミナルのコマンドやプロジェクトの作成時に聞かれる質問について、lintについてなどなども触れていきます🍀✍️ 参考:lintツールの選び方Prettier 入門 ~ESLintとの違いを理解して併用する~チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめscssのためのstylelintとprettierの導入VS Codeに ...

【Nuxt.js】画像データをwebPで軽量化よう

前置き ファイル形式の1つ。pngとかgifとかのあれです。gif同様にアニメーションにも対応で、画質は保ったまま、容量を2, 3割程度で圧縮できるものです💫 簡単にですが、流れとコードを載せていきます✍️ 参考サイト:WebP(ウェッピー)とは?変換方法と使用するメリットのまとめHTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみようsrcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法レスポンシブの画像切り替えができる ...

Nuxt独自

【Nuxt.js】非同期通信まわりまとめ

前置き 非同期通信まわりって結構むずかしいですよね?、、、 どれが何の役割でどこに書いて、どれと何を組み合わせれば良いの!?🙄💦 と思った人は私だけではないはず。。。 asyncとasyncDataって何が違うの?tryと.thenって似てるような?最初はとにかく混乱しました😂笑 それぞれの役割を確認し、ベースのコードに肉付けしていき、コードを書く流れが分かるようにしました🙌💕 ⬇️過去記事で詳細を ...


中級者

Nuxt独自

【Nuxt.js】axiosで取得したデータをv-modelで検索しよう

前置き 検索機能の仕方をご紹介💫ベースの検索と、axiosで取得したデータをinputに入力した値で検索するパターンを記載していきます✍️ 参考:コピペでOK!Vue.jsでリアルタイム検索をつくる方法.indexOf()で配列のindexが取得できないときNuxt.js+Algoliaで全文検索可能なタスク管理アプリを実装するハンズオン!【Vue.js】computedとmethodsを使った簡単な検索機能 Contents前置き簡単な検索機能ポイントコードi ...

firebase

【Nuxt.js】firebase基礎編(Auth版):アカウント作成時にプロフィール画像を登録しよう②

前置き 前回の続きです。【Nuxt.js】firebase基礎編(Auth版):アカウント作成時にプロフィール画像を登録しよう firebase.storage().ref().child('profile.png')プロフィール画像をstorageに送信する際、前回はファイルをprofile.pngで固定していました。ここをユーザー別にしたバージョンです。 Contents前置き流れコードまとめ 流れ ユーザー別のファイル名にするには、Firebase Authenticationでログインした時のus ...

firebase

【Nuxt.js】firebase基礎編(Auth版):アカウント作成時にプロフィール画像を登録しよう

Contents 前置き流れコードまとめ前置き 以前は表示名(displayName)の登録をしました。【Nuxt.js】firebase基礎編(Auth版):アカウント作成時に表示名を登録しよう これと同じでログイン後にする予定のupdate処理を登録時に行ってしまえばOKです💫 今までの記事を組み合わせたものなのである程度firebaseに慣れた方向けです🍎firebaseを広く浅く理解したい方や、Vuexの復習をしたい人に良いかもしれません💡 流れ 今 ...

開発ブログ

【Nuxt.js】開発ブログ:marked.js + highlight.js + firebase

前置き 【Nuxt.js】Nuxt実践編:シンタックスハイライターを使おうこちらの記事でシンタックスハイライターを使用した際タグのエスケープが面倒なのでmarked.jsと組み合わせて検証するというところで終わりました。ということで今回は検証!そしてfirebaseとの連携も検証! 結論と使用用途 タグのエスケープ不要で簡単に作成できました❤️ ということでこのエディタはオフラインでもマークダウンの確認ができてあとからブログなどにコピペするといった使い方がメインになりそうです& ...

firebase

【Nuxt.js】firebase基礎編(Auth版):ログアウトしよう

Contents 前置きログアウトログインも含めたコードまとめ前置き Firebase Authenticationシリーズです💫今回はログアウトのコードですがログインやアカウント作成など前段階は別記事で解説しております🍎👩‍🏫 【Nuxt.js】firebase基礎編(Auth版):メールアドレスログインをできるようにしよう【Nuxt.js】firebase基礎編(Auth版):Twitterログインをできるようにしよう【Nu ...


上級者

更新予定


誰でも

アプリ サイト

【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分

Vueと共通

【Nuxt.js】srcset, sourceで画像を表示しよう

前置き それぞれのタグの役割がごっちゃになって混同していたので自分の備忘録としても書きました✍️ ⬇️srcsetについては こちらでも少し触れました。【Nuxt.js】画像データをwebPで軽量化よう 今回はより理解を深めるためにsourceコードも使用していきます💫 参考:なんでもかんでもpicture要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点メディアクエリとviewportの使い方についてHTMLのsr ...

Vueと共通

【Nuxt.js】slot文法編: スコープ付きスロットを使おう

前置き スコープ付きスロットのご紹介💫 子から親へデータを渡すことができます✨基本的にはVuexを使えば良いのですが、「Vuexを使うほどではないけど まとまったdataを子で管理したい!」そんな時に使います。公式: スコープ付きスロット やりたいことイメージするために、まずはコードを見てもらいましょう👀 ⬇️子コンポーネントでdataを管理

⬇ ...

そのほか

【Nuxt.js】Nuxtの環境構築をしよう

前置き できるだけ分かりやすく、公式インストールに沿って解説しています✨ その過程で扱うターミナルのコマンドやプロジェクトの作成時に聞かれる質問について、lintについてなどなども触れていきます🍀✍️ 参考:lintツールの選び方Prettier 入門 ~ESLintとの違いを理解して併用する~チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめscssのためのstylelintとprettierの導入VS Codeに ...

【Nuxt.js】画像データをwebPで軽量化よう

前置き ファイル形式の1つ。pngとかgifとかのあれです。gif同様にアニメーションにも対応で、画質は保ったまま、容量を2, 3割程度で圧縮できるものです💫 簡単にですが、流れとコードを載せていきます✍️ 参考サイト:WebP(ウェッピー)とは?変換方法と使用するメリットのまとめHTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみようsrcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法レスポンシブの画像切り替えができる ...

Nuxt独自

【Nuxt.js】axiosで取得したデータをv-modelで検索しよう

前置き 検索機能の仕方をご紹介💫ベースの検索と、axiosで取得したデータをinputに入力した値で検索するパターンを記載していきます✍️ 参考:コピペでOK!Vue.jsでリアルタイム検索をつくる方法.indexOf()で配列のindexが取得できないときNuxt.js+Algoliaで全文検索可能なタスク管理アプリを実装するハンズオン!【Vue.js】computedとmethodsを使った簡単な検索機能 Contents前置き簡単な検索機能ポイントコードi ...


30分

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 サーバ時間の取得 ...

firebase

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

前置き RDBを活かしてチャットでも作ろう!と思い立ってやった系の記事です🐣💭Cloud Firestoreばかり使っていたので…。 そしてWebSocket, Socket.IOを使用するとサーバー側の実装が大変です💥笑ということで使用したことのあるFirebase Realtime Databaseにしました🎈🧸 いつもの丁寧な解説ではなく、こんなこと調べてこういう手順で試してみたという内容です💡 まだ完全 ...

Vueと共通

【Nuxt.js】Nuxt実践編:v-model + Vuex

前置き v-model(input)の値をVuexに保存してみましょう🌟 通常はページ遷移をすると入力した値が消えてしまいます💥 そこでデータ保存のできるVuexを使うわけです💡💕 具体的な使用例は…性格診断🕵️‍♀️各入力項目ごとにページ遷移しても最後にその結果を反映してこんな性格です!と再表示させるショッピングサイト🛍買い物カゴに追加した商品がページ遷 ...


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