カテゴリー別

文法

文法

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

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

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】nuxt/i18nを導入しよう

前置き nuxt/i18n 翻訳のできるi18n✨導入方法と使い方を載せていきます❤️✍️ i18nとは 国際化のことです。Internationalizationで最初のIと最後のnの間に18文字あるのでi18n i18nを使用することで現地の言葉や表記方法で表示できるわけです💫☝️ 参考:https://qiita.com/tiktak/items/a70ef7940fa4710f37cb ...

firebase

【Nuxt.js】firebase導入編:nuxt/firebaseを導入しよう

前置き nuxt/firebase今までよりもっと簡単にfirebaseを使えてパフォーマンスを向上するものです✨ 今回は導入方法と使い方を載せています✍️非常に簡単なのでfirebaseを使っている方はぜひやってみてください! Contents前置き導入方法使い方サンプル1サンプル2まとめ 導入方法 Getting Started まずはインストールから。 terminal $ npm install firebase $ npm install @nuxtjs ...


製作

サイト

【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などなど復習できることが沢山😉❤️できるところはやる必要がないのでドン ...


そのほか

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

TypeScript

【TS導入編】超初心者向けTypeScript〜環境構築の補足&クラスなど〜

前置き 環境構築編で$ npm initをサラッと書いただけだったり、「自動コンパイル設定いらないかも❓」の検証が終わったのでtsconfigのオプションなども含めて諸々補足をしていきます。フレームワークなしの前提です。 ⬇️以前の記事はこちら【Nuxt.js】超初心者向けTypeScript〜環境構築編〜【TS導入編】超初心者向けTypeScript〜自動コンパイル〜 参考:TypeScript初心者が知っておくと嬉しいことTypeScriptの型入門 > as ...

TypeScript

【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

前置き 【Nuxt.js】超初心者向けTypeScript〜環境構築編〜 前回の続きです❣️型指定, 型宣言をすることで実行前のコンパイル時にエラーを発見できるTS💕 こんな感じで教えてくれます。数字で定義したのに文字列が入っているよ❗️という内容ですね。 app.ts:8:21 - error TS2322: Type 'number' is not assignable to type 'string'. 今回は自動コンパイルの設 ...


小ネタ

更新予定

【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