カテゴリー別

文法
no image

文法

有料記事まとめ

Contentsnoteで販売中です💁‍♀️✨ウリは誰でもできる成果物✨🍎有料記事はこちらこんな人にオススメ!今後も増やしていくので、応援お願いします📢💕 noteで販売中です💁‍♀️✨ ウリは誰でもできる成果物✨🍎 始めたてって、とにかく分からないことだらけですよね!? ...

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

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を元に解説していきます🙋‍♀️公式: ...


API

API

【Nuxt.js】API:GoogleMap

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

firebase

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

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

firebase

【Nuxt.js】firebase基礎編(Auth版):アカウント作成をできるようにしよう

前置き firebase系の記事が増えてきました🌟🤗ログインの記事は公開しているので今度はアカウント作成部分を作ります!この部分だけなら5分もかからないと思います…笑firebaseAuthを使えば本当にめちゃくちゃ簡単です💕 こちらは有料記事にて公開します🎈🧸作成時にメールの送信エラー別の対処ここでは純粋にアカウント作成のみを記載してます! メールアドレスログイン記事のコードに付け加えるように書いていきます✍& ...

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: アプリを ...


製作

制作

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

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

制作

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

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

アプリ サイト

【Nuxt.js】Nuxt実践編:axios + asyncData + nuxt-link

前置き お試しAPIのJSONplaceholderを使って遊んでみましょう⚡️🎸 タイトルを表示させ、クリックでidに合わせた動的リンクを行います🌟 データはこちらを使用します💡https://jsonplaceholder.typicode.com/posts axios, asyncData, nuxt-linkなどなど復習できることが沢山😉❤️できるところはやる必要がないのでドン ...

アプリ サイト

【Nuxt.js】Nuxt実践編:layout

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

アプリ サイト

【Nuxt.js】Nuxt実践編:あると便利なコピーボタンの作り方

前置き ここ最近は文法編に力を入れていたので久しぶりの実践編です✨ input内のテキストをコピーするボタンを作ってみましょう♪イベントアプリなどでページを作成し、自動生成されたurlをコピーしたい時なんかに使えます🌟 urlの自動生成まではやりません。あくまでinputとコピーボタンのみ作成します🎈🧸スタイリングも省いてます、そこはお好みで♪ Contents前置きまずはinputを作成divではダメなのか解説コードコピーボタンを作る方法1: ...


そのほか

開発ブログ

【Nuxt.js】Nuxt番外編:自動でインデント整形!plugin Prettier

前置き 今回は番外編としてインデントの自動整形をしてくれる便利なplugin prettierのご紹介です🍒 エディターはVSCodeを使用しているのでその導入手順をお伝えします🌟 まずはどんなものか、目で見てもらった方が早いので⬇️こちらをご覧ください✨👀 こちらはcssをhtmlからcssファイルへ移動、編集してcommand+S でセーブしている動画です。セーブすると自動でインデントを揃えてくれますɲ ...

開発ブログ

【日記】2日目:STUDIOからhtml&cssにしたい と言われたのでやってみた

ということで検証みながらコードに直す作業👀気づいたことをいくつか。 実装がメインなので本当にメモ程度ですが笑記録として残しておきます✍️ また気づきがあれば追記していくかもしれません💡 Nuxtばっかり触っていたので急に素のHTML&CSSと言われるとあれ?何するんだっけ?🐣となります😂笑 CSSだとクラス名毎回つけてどこの区画か分かるようにどうしても長くなるので嫌なんですよね😖(命名得意に ...

開発ブログ

【日記】1日目:STUDIOはコーディング不要!だけど、できないこともある

みなさんSTUDIOご存知ですか?😀💡コードを書かなくても直感的に要素を配置してwebサイトを作れる優れものです❤️🤭gifではハンバーガーアイコンを作成しています。要素をドラッグして配置できてすごく簡単に作れることが分かると思います💃 非常に便利ですがその分こまかいことができなかったりもします😖💦 STUDIOを使った案件を受けたので始めるにあたっての注意事項や最初にしっておくべき ...

そのほか

【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ②

前置き 前回はこちら心構えなどを参考にどうぞ🍀 【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ① 初心者がNuxt.jsでwebサイトを作り上げるまでのロードマップです!🔰①はNuxt.jsを使う前のLP模写やGitまで②はNuxt.js〜の具体的な学習方法最終的に外部サービスやAPIを使えるまでをメインに書いています! この手順で学習することで挫折せずに効率的に、そして着実に、スキルアップができます🌟& ...

そのほか

【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ①

前置き 初心者がNuxt.jsでwebサイトを作り上げるまでのロードマップです!🔰①はNuxt.jsを使う前のLP模写やGitまで②はNuxt.js〜の具体的な学習方法をメインに書いています! この手順で学習することで挫折せずに効率的に、そして着実に、スキルアップができます🌟🌷そのため爆速で超ハイレベル!💨💨💨を求めている方にはオススメしません。 yossy 私はVSCodeです! index.htmlを作る ...


小ネタ

更新予定

© 2020 aLiz Nuxt