タグ別

ユーザースキル別

初心者

Vueと共通

【Nuxt.js】Nuxt文法編:mounted

前置き ライフサイクルフックの1つmounted()似ていると言われるcreated()も参考にしてみてください🍎🙋‍♀️ 公式: https://jp.vuejs.org/v2/api/#mountedhttps://jp.vuejs.org/v2/guide/instance.html#インスタンスライフサイクルフック 【Nuxt.js】Nuxt文法編:created Contents前置きmounted()とは簡単な使い方AP ...

制作

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

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

制作

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

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

Vueと共通

【Nuxt.js】Nuxt文法編:watch

前置き データの変更の監視ができる監視プロパティのwatch💥👀 算出プロパティとの比較を中心に解説していきます🍓🙋‍♀️ 公式: https://jp.vuejs.org/v2/guide/computed.html Contents前置き算出プロパティ VS 監視プロパティ監視プロパティwatch算出プロパティcomputedwatchにしかできないこと解説コードまとめ 算出プロパティ VS 監視 ...

Vueと共通

【Nuxt.js】Nuxt文法編:middleware

前置き ログインチェックなどに使われるmiddleware💫ログイン状態をチェックし、trueなら閲覧できて👀falseならログインページへ飛ばす✈️といったアレです!簡単な使い方と私がやってしまったNG例なども合わせて紹介していきます🍒 公式: https://ja.nuxtjs.org/guide/routing/#ミドルウェアhttps://ja.nuxtjs.org/api/pages-middleware/ Conten ...


中級者

firebase

【Nuxt.js】firebase基礎編(Auth版):facebookログインをできるようにしよう

前置き 既に作成されたSNSアカウントでログインできるって便利ですよね✨🚲今回はFacebookでログインしてみましょう🙋‍♀️ メールアドレスログインと要領は同じです!コードもこちらに付け足します✍️ ということでfirebaseAuthを使います💡 Contents前置きStep1: FBアプリの作成1. まずはFBアカウントでログイン2. マイアプリをクリック3. 新し ...

firebase

【Nuxt.js】firebase基礎編(Auth版):Twitterログインをできるようにしよう

前置き 今回はTwitterアカウントでログイン🐥Twitterはユーザー数が多いのでこれができたらすっごく便利です💕メールアドレスログインと要領は同じです!コードもこちらに付け足します✍️ ということでfirebaseAuthを使います💡 Contents前置きStep1: Twitter Developerアカウント作成の申請Twitter Developer でアカウント作成申請文を英語で書くStep2: アプリを ...

Vueと共通

【Nuxt.js】Vuexまとめ編:はじめる前に、簡単理解!

前置き ログイン情報の保持やAPIのデータ保存などとにかく便利なVuex🌟さぁ、やってみよう!💪と思っても1から理解するのは大変ですよね? 「忙しいのに また新しいことやるのか…😔💦」そんな方へ向けて超簡単に最低限ここさえ分かればOK!な部分をまとめました。 導入の仕方やディレクトリ 構成は基礎編でどうぞ! 【Nuxt.js】Vuex基礎編:コードをスッキリさせよう Contents前置きメリット状態管理パターン例基本の呼び出し方stateg ...

firebase

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

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

アプリ サイト

【Nuxt.js】props実践編:switchボタンを作ろう!

前置き 今回はSwitchボタンです!✅gifカクカクですが実際はなめらかになります💦inputの真偽値によってクラスバインディングを行います! propsを主に使います。前回書いた記事と違うのはStringを渡すだけではなくcomputed関数で切り替えを行う部分です🤗propsでのクラスバインディングはこちら Contents前置き構成Step1: まずはlabel, inputを作成Step2: クラスバインディングを追加Step3: 真偽値とクラスバイ ...


上級者

更新予定


誰でも

アプリ サイト

【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】Nuxt文法編:mounted

前置き ライフサイクルフックの1つmounted()似ていると言われるcreated()も参考にしてみてください🍎🙋‍♀️ 公式: https://jp.vuejs.org/v2/api/#mountedhttps://jp.vuejs.org/v2/guide/instance.html#インスタンスライフサイクルフック 【Nuxt.js】Nuxt文法編:created Contents前置きmounted()とは簡単な使い方AP ...

制作

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

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

Vueと共通

【Nuxt.js】Nuxt文法編:watch

前置き データの変更の監視ができる監視プロパティのwatch💥👀 算出プロパティとの比較を中心に解説していきます🍓🙋‍♀️ 公式: https://jp.vuejs.org/v2/guide/computed.html Contents前置き算出プロパティ VS 監視プロパティ監視プロパティwatch算出プロパティcomputedwatchにしかできないこと解説コードまとめ 算出プロパティ VS 監視 ...

Vueと共通

【Nuxt.js】Nuxt文法編:middleware

前置き ログインチェックなどに使われるmiddleware💫ログイン状態をチェックし、trueなら閲覧できて👀falseならログインページへ飛ばす✈️といったアレです!簡単な使い方と私がやってしまったNG例なども合わせて紹介していきます🍒 公式: https://ja.nuxtjs.org/guide/routing/#ミドルウェアhttps://ja.nuxtjs.org/api/pages-middleware/ Conten ...

Vueと共通

【Nuxt.js】Nuxt文法編:routerプロパティ①

前置き Vueの場合はルーティングを自由にカスタムできますが、Nuxtでは自動でルーティングが決まります💡 Nuxtでもvue-routerを自由にカスタマイズできるのがrouterプロパティ🍒 これを使えばpathやnameなどを自由に設定できます🤗metaの設定もできるのでSEO対策としても使えますね👍❗️ 公式APIを元に解説していきます🙋‍♀️公式: ...


30分

制作

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

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

API

【Nuxt.js】API:GoogleMap

前置き Maps JavaScript APIこちらのAPIを使用してGoogleMapを表示させます✨🗺 APIって便利そうだけど難しそうだな…😔 って思っている方は少なくないはず。 でも実は!! コード自体はクイックスタートのコードがあるのでコピペだけで簡単に表示できてしまうんです❤️ どちらかというとAPIを使えるようにする準備段階の方が時間がかかります😂笑でも、やり方さえ分かれば他のAPIを使う時のハードルも ...

アプリ サイト

【Nuxt.js】Nuxt実践編:layout

前置き layoutの実践編です🤗💕基礎は文法編でご確認ください👀https://wp.me/pc9NHC-A4 タブレット以下のサイズになったらハンバーガーメニューを表示させましょう🌟 Let's try! Contents前置き構成を考えるassetsの下準備HeaderDefaultの作成MenuDefault.vueの作成layouts/default.vueの作成まとめ 構成を考える まずは全体の構成をイメージしましょうǹ ...

firebase

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

前置き v-modelで直接storeを書き換えてそれをfirebaseへ送信してみます📤 ですが実際に使う場面はほぼありません😂笑 というのも、firebaseを使って入力した値を送信さえできれば良いからです。取得も簡単にできるのでわざわざVuexを使ってstoreに保存する必要がないのです…! なので仕組みを見て「ふーんなるほど💡」と分かってもらえたら良いなと思います🍒👌v-model, computed, vuex, f ...

Vueと共通

【Nuxt.js】Nuxt文法編:v-model①

前置き 文法シリーズ🌟 文法記事では毎度のことですが文法は覚えて良いものです📚🙋‍♀️しっかりマスターしていきましょう♪ どんな時に使うの? form内のinputなど入力要素に使います🌟【Nuxt.js】v-model実践編:オリジナルフォームの簡単な作り方 Contents前置きv-modelv-modelとは使用タグ、使用可能な修飾子使用タグ修飾子テキスト入力での使用1行複数行チェックボックスで ...


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 ...

© 2020 aLiz Nuxt