カテゴリー別

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

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

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

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

前置き 今回はasync/awaitでPromiseの役割をするawaitについてです💫 2つのパターンについて書いていきます。・awaitでawaitをネスト・awaitで.thenのメソッドチェーン そもそも今までの記事ではconst res = axios.getみたいな取得した値を定数にしてその後で取得した値が返ってきた時の処理を書いていました。なのでそれ以外の使い方、定数を使わなくても良い書き方がすごく変に感じていたのです。。。 例えばfirebaseAuthでアカウントを作成し ...

Contents 前置きおさらい修正他の問題発生他にやりたいことまとめ前置き 久々の更新です！Nuxt3来ましたね〜！！✨🪐https://nuxtjs.org/announcements/nuxt3-beta/ ⬇️ということで、こちらの続きです🌟 【Nuxt.js】Firebase Auth × RDB ログインアカウントの送信と取得を考える② 最近はRuby, PHP, SQLを触り始めてNuxt.js全く使えてませんでした& ...

前置き $ firebase deploy デプロイ時に直面した2点の問題を、備忘録的に残しておきます✍️ ⬇️基本的な流れはこちらをご覧ください👀 【Nuxt.js】firebase基礎編：Firebase Hosting にデプロイしよう！ Contents前置き$ firebase deploy のエラーエラー内容解決$ firebase init で Overwrite を yes にしてしまった場合対処方法overwrite ...

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

前置き こちらのシリーズのRealtime Database版🌟 【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える チャット機能(Realtime Database)とタスク管理機能(Cloud Firestore)のアプリを作成。ルール設定や送信、取得のメソッドなど見直し、整理します✨👀 ⬇️ルールは少し　Cloud Firestoreと異なりますが、　違いの ...

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

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

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

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

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

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

前置き 今回はNuxt TypeScriptについてです。導入方法と簡単な書き方をご紹介🌟 本格的に使う前にこういう記事を見ると良いかもです💡Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと フレームワークなしの場合はこちら 共通の書き方も少しずつ出しているので気になったら見てみてください✨👀 ⬇️TypeScriptとは　TypeScriptの良さ【Nuxt.js】超初心者向 ...

前置き フレームワーク未使用のファイルver.GitHubとFirebase Hostingの2種類の方法をお伝えします🌟 「公開の仕方が分からない」「自分のポートフォリオを作りたい！」「公開して就活に役立てたい！」そんな方々に手順をお伝えします❣️👩‍🏫 ⬇️Nuxt.jsのデプロイについてはこちらNuxt.jsプロジェクトをGitHubにデプロイする【Nuxt.js】firebase基 ...

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

前置き HTML/CSS/JavaScriptだけでコードを書いてみたら色々と困ったので備忘録です✍️ 初心者の方はどんなことで躓いてどう対処すれば良いのか、イメージするために🧸💭ぜひ1度は目を通してみてください👀 今までNuxt.jsばかりやっていて、CSSは後回しになっていました。(たぶん普通の人は逆ですが笑)そしてJSも簡単に書けるので、素のJSを理解することもなかった… ということで、困った点や勉強になった点、こうした方が ...

前置き 前回のパターン1を諦めてパターン2をやっていきます。 ②JavaScriptでdayjsを使ってカレンダーを作成このclassを見て別のpluginを使用しているのかと勘違いしていました、、、他のpluginは使用したくないな〜とか思っていた💥単純にdocument.querySelectorで指定できるようにしていただけですね💡【Nuxt.js】開発ブログ：カレンダーを作成してみる② Contents前置き参考コードをチェックdayjsのプラグインを使ってみる@n ...

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

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