タグ別

ユーザースキル別

初心者

GitHub

Nuxt.jsプロジェクトをGitHubにデプロイする

前置き Nuxtが新しくなってからGitHubのデプロイが簡単になりました❣️(たぶん)直面したエラーも含め手順をまとめておきます✨ たぶん、というのは今までGitHubでデプロイできると知らず💦笑Firebase Hostingしか使用してなかったので、比較ができないためです🐸 また、「Nuxt GitHub 404」とググると色々な原因がでてきます🔎ただ、現在はdeployコマンドで大体は解決しそうです ...

文法

模写コーディングの前に知っておくと良いこと

前置き 以前ロードマップを書きましたが、模写に特化したverです✨【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ①【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ② Progate終わって「模写をやってみよう!🔥」とか「エディターを使ってみよう!」という初期段階で知るべきことをまとめました🌟 ⬇️模写サイト選びの参考にどうぞ【模 ...

CSS

HTML/CSS/JavaScriptのLP作成手順

前置き LP作成の流れを簡単にまとめました✍️デザインはできていて、実装だけするパターンです。 流れ、全体像が分かった方が最初はやりやすいと思います🎈🧸 「display: flex;で 要素の改行する時は注意❗️」など、細かいところはこちらを確認していただくと良いヒントが得られるかもしれません🍬Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったことNuxtから離れてHTML/CSS ...

CSS

Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと、気づいたこと②

前置き 前回の続きです🍀 Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと 今回は困ったこと、気づいたこと、次やってみたいこと…ごちゃ混ぜです💫 Contents前置きline-height単位指定はしない方が良い今まで指定していた理由デザイン通りの余白にならないz-indexz-indexを指定する際のポイントul>liの余計なmargin-topをpositionでずらすcalcの罠index.htmlをFirebase Hostingへ ...

CSS

Nuxtから離れてHTML/CSS/JavaScriptを書いて気づいたこと③

前置き 前回の続きです🍀だいぶ困りごとは減ってきたのでよく使う基本的なものを書いておきます✍️今回はNuxtあってもなくても関係ないのですが、シリーズとしてまとめちゃいます💡 Contents前置き画像いろいろimgとbackground-imageの使い分けアスペクト比を固定したい要素の左端がずれるテキストを幅いっぱいにするspace-betweenの問題まとめ 画像いろいろ imgとbackground-imageの使い分け imgは読み込み ...


中級者

firebase

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

Contents 前置きref('users/').on()ref('users/' + uid).once()ルールの問題方向転換が必要?まとめ前置き 前回の続きです。チャットアプリの作成でFirebase Realtime Databaseを使用。 グループチャットまではやらず、単純にアプリ使用者で1つのチャットルームを使用しているようなイメージです。 前回のルールでは公式サンプルを見てログインユーザーのみ読み書き込みできるようにし、ルールの理解をしていきました。 実際はチャット機能の実装なので、書き ...

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


上級者

更新予定


誰でも

アプリ サイト

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

GitHub

Nuxt.jsプロジェクトをGitHubにデプロイする

前置き Nuxtが新しくなってからGitHubのデプロイが簡単になりました❣️(たぶん)直面したエラーも含め手順をまとめておきます✨ たぶん、というのは今までGitHubでデプロイできると知らず💦笑Firebase Hostingしか使用してなかったので、比較ができないためです🐸 また、「Nuxt GitHub 404」とググると色々な原因がでてきます🔎ただ、現在はdeployコマンドで大体は解決しそうです ...

文法

模写コーディングの前に知っておくと良いこと

前置き 以前ロードマップを書きましたが、模写に特化したverです✨【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ①【Nuxt.js】番外編:Progate初心者がNuxt.jsでWEBサイトを作るまでのロードマップ② Progate終わって「模写をやってみよう!🔥」とか「エディターを使ってみよう!」という初期段階で知るべきことをまとめました🌟 ⬇️模写サイト選びの参考にどうぞ【模 ...

CSS

HTML/CSS/JavaScriptのLP作成手順

前置き LP作成の流れを簡単にまとめました✍️デザインはできていて、実装だけするパターンです。 流れ、全体像が分かった方が最初はやりやすいと思います🎈🧸 「display: flex;で 要素の改行する時は注意❗️」など、細かいところはこちらを確認していただくと良いヒントが得られるかもしれません🍬Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったことNuxtから離れてHTML/CSS ...

CSS

Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと、気づいたこと②

前置き 前回の続きです🍀 Nuxtから離れてHTML/CSS/JavaScriptを書いて困ったこと 今回は困ったこと、気づいたこと、次やってみたいこと…ごちゃ混ぜです💫 Contents前置きline-height単位指定はしない方が良い今まで指定していた理由デザイン通りの余白にならないz-indexz-indexを指定する際のポイントul>liの余計なmargin-topをpositionでずらすcalcの罠index.htmlをFirebase Hostingへ ...

CSS

Nuxtから離れてHTML/CSS/JavaScriptを書いて気づいたこと③

前置き 前回の続きです🍀だいぶ困りごとは減ってきたのでよく使う基本的なものを書いておきます✍️今回はNuxtあってもなくても関係ないのですが、シリーズとしてまとめちゃいます💡 Contents前置き画像いろいろimgとbackground-imageの使い分けアスペクト比を固定したい要素の左端がずれるテキストを幅いっぱいにするspace-betweenの問題まとめ 画像いろいろ imgとbackground-imageの使い分け imgは読み込み ...


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