カテゴリー別

文法

文法

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

前置き 以前ロードマップを書きましたが、模写に特化した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は読み込み ...

Vueと共通

【Nuxt.js】非同期通信awaitのネストやチェーンについて

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


API
no image

firebase

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

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

firebase

【Nuxt.js】firebase deploy エラーとoverwrite対処法

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

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と異なりますが、 違いの ...

firebase

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

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


製作

サイト

【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実践編:axios + asyncData + nuxt-link

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


そのほか

TypeScript

【TS導入編】超初心者向けNuxt TypeScript 〜Options API〜

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

GitHub

HTML/CSS/JavaScript デプロイして公開!GitHub & Firebase Hosting

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

GitHub

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

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

開発ブログ

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

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

開発ブログ

【Nuxt.js】開発ブログ:カレンダーを作成してみる③

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


小ネタ

更新予定

【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