カテゴリー別

文法

Vueと共通

【Nuxt.js】props応用編: v-forでの使用

前置き propsの記事はたくさん書いていますが、これは結構エラーの原因に気づきにくいかも…😵と思ったのでご紹介❗️ しっかりとデータの型を確認すれば落ち着いて対処できるなと再確認できたのと、初心者には結構分かりにくい部分かな❓とも思いました。。。 使ってそうで意外と使ってなかったv-forでのprops🍀 コンポーネント分けとデータの型に気をつけながら読み進めてください📚 Contents前置きやりたかったこと正し ...

Nuxt独自

【Nuxt.js】コピペで簡単!レスポンシブ対応

前置き Nuxtでメディアクエリを簡単に使用し、レスポンシブ対応する方法をお伝えします💫コピペでも使えますよ💖 理解を深めたい方は、コピペ部分以外の解説もご覧ください✨👀分かるところは飛ばしてくださいね💡 参考:レスポンシブの基本、メディアクエリの書き方【モバイルファーストのWebサイト】考え方やデザインのポイントとは?Sassのmap操作をおさらいする+便利な関数をいくつかSassでメディアクエリを効率的に管理するマップとmi ...

Vueと共通

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

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

Vueと共通

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

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

Vueと共通

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

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

⬇ ...


API

firebase

【Nuxt.js】firebase基礎編:Firebase Hosting にデプロイしよう!

前置き firebaseの記事をたくさん出してきましたが、Hostingについてはまだ出していませんでした…!「Firebase Hosting を使って 自分のNuxtファイルを公開したい!」という方へ向けた記事です。既にfirebase慣れしている方は公式を見れば分かると思うので…「用語とかもよく分からないけど とにかくチャレンジしたい🔥💪」みたいな方が対象です🌷 公式: Firebase CLI リファレンス 参考:https://ema-hiro.h ...

【Nuxt.js】nuxt/i18nを導入しよう

前置き nuxt/i18n 翻訳のできるi18n✨導入方法と使い方を載せていきます❤️✍️ i18nとは 国際化のことです。Internationalizationで最初のIと最後のnの間に18文字あるのでi18n i18nを使用することで現地の言葉や表記方法で表示できるわけです💫☝️ 参考:https://qiita.com/tiktak/items/a70ef7940fa4710f37cb ...

firebase

【Nuxt.js】firebase導入編:nuxt/firebaseを導入しよう

前置き nuxt/firebase今までよりもっと簡単にfirebaseを使えてパフォーマンスを向上するものです✨ 今回は導入方法と使い方を載せています✍️非常に簡単なのでfirebaseを使っている方はぜひやってみてください! Contents前置き導入方法使い方サンプル1サンプル2まとめ 導入方法 Getting Started まずはインストールから。 terminal $ npm install firebase $ npm install @nuxtjs ...

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】開発ブログ:カレンダーを作成してみる①

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

サイト

【Nuxt.js】GoogleFormにデータを送信しよう

前置き GoogleFormと連携した独自フォームの送信部分の解説です💫 actionやentry以外はコピペで実装可能です✨ ⬇️連携と回答後のページ遷移は こちらでご確認ください👀 簡単に言ってしまうと GoogleFormのactionとentryをコピペし、 非同期通信すれば良いだけです❣️【Nuxt.js】Form実践編:GoogleFormと独自フォーム連携【Nuxt.js】Form応用編:a ...

アプリ サイト

【Nuxt.js】Nuxt実践編:ユーザーアイコン表示の切り替えをしよう

前置き 今回は簡単な実践編です😉💕作るものはこちら! マイページのあるサイトで⬆️ユーザーアイコンの初期状態と⬇️画像を設定した時の表示の切り替えをやってみましょう💃🎶 コンポーネント間のやりとりや演算子の復習になるのでぜひチャレンジしてください🔥💪 今回のような簡単な実践編も今後増やしていこうと思ってます💕 Let's try! Cont ...

制作

【Nuxt.js】Nuxt番外編:
アトミックデザインにおけるフォルダの分け方と
サンプル集

前置き コンポーネントの分類の仕方についてと少しですがサンプルコード集です🎈🧸 この要素はどこ❓molecules❓それともorganisms❓なんて時にチェックしてください✅🌟 フォルダ分けはアトミックデザインを推奨しています。Atomic Designとはサンプルコードもあるのでコンポーネントの命名や中身の構成などの参考にもお役立てください❤️コードを書き始める前のチェッ ...

制作

【Nuxt.js】Nuxt番外編:コードを書く前のルールチェックリスト

前置き さぁコード書くぞ✨✊の前にチェックしておくと良いことをまとめました✅ デザインができている前提です! コンポーネントの分け方が曖昧でどこにあるか分からんっっ😖💦 とか クラス名をつけずにタグに直接cssあてたら親にも影響出ちゃってどこを直せばよいのっっ😨💦 とか 変なことがなくなるように予め知っておいた方が良いことをまとめました! Contents前置きコンポーネントの分け方アトミックデザイン ...


そのほか

そのほか

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

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

プラグイン、モジュール

【Nuxt.js】vue-touch-eventsでタッチイベントを使おう

前置き vue2-touch-events タップ、スワイプ、タッチホールドイベントをVue, Nuxtで、そしてPCでも簡単に使えるようにするものです💫 スワイプしたらページ遷移、とかが超簡単にできます💕 参考:Nuxt.js/Vue.jsでもスワイプでページ移動したい Contents前置きインストール使い方準備実際の使用まとめ インストール terminal $ npm i  vue2-touch-events 使い方 準備 基本的にグローバルに使うと思うのでplug ...

GitHub

【Nuxt.js】GitHub:Dependabotでパッケージ更新

前置き パッケージの更新って面倒ですよね…🙄いちいちバージョンの確認からしないといけません。 面倒なアレコレを解決するのがこちら💫Dependabot ということで、こちらを使ってみましょう💖 参考: Dependabotを導入してみたDependabotで依存パッケージ更新のプルリクを作成してもらう Contents前置きDependabotとは導入方法GitHubのMarketplaceでインストールダッシュボードから設定まとめ Dependabotとは ...

開発ブログ

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

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

開発ブログ

【Nuxt.js】WYSIWYGエディター: Quillを使ってみた

前置き WYSIWYGエディタのQuillを使ってみました🍎✨前回チャットアプリを作成していて「シンタックスハイライターを使いたいなぁ〜 どうせならエディタで色々やりたいなぁ〜」ということで今回は人気のQuillを選びました💕 WYSIWYG(ウィジウィグ)エディターとは、ユーザーが編集画面で見ているものと、完成形の見た目が同じになるように作られているエディターのこと。「What You See Is What You Get(あなたが見たものを、そのまま出力 ...


小ネタ

更新予定

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

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

【Nuxt.js】favicon generatorで簡単ファビコン設定

前置き 今回はfavicon generatorこちらを使って設定します✨ 様々なブラウザやデバイスに対応したファビコンをまとめて生成してくれるものです✨ファビコンの設定が簡単になります❤️ ちなみにそれっぽいパッケージがないかチェックしたところあったのですがインストールできませんでした。nuxt-favicon-generator といってもパッケージを使わなくても簡単に設定できるのでやってみましょう💫 参考:【2020年版】Web ...

© 2021 aLiz Nuxt