Vue3でQuasarのUIライブラリを使おう

始める前に 今日はVueのUIフレームワークを紹介します。先にVueの基本、Viteの使い方、Node.jsの基本を知っていると理解しやすいです。 Quasarフレームワークとは Quasarの特徴を紹介します。 Quasarとは? Quasarで作成できるもの: Quasarのモットーは、コードを一度書き、それをウェブサイト、モバイルアプリ、および/またはElectronアプリとして同時に展開できるフレームワークです。1つのコードベースで最新のCLIを使用してアプリを効率的に開発し、ベストプラクティスに基づく高速なQuasarウェブコンポーネントを提供します。 Quasarを使用する際、Hammer.js、Moment.js、またはBootstrapなどの追加の重いライブラリは必要ありません。軽量化されたこれらのライブラリもQuasarで使用できます。 ここまで読めばQuasarを始めない理由はありません。早速セットアップの仕方を見てみましょう。 条件 使用するコンピュータに、Node.jsのバージョン14以上(または新しいLTS Node.jsバージョン)と、NPMのバージョン6.14.12以上、またはYarnのバージョン1.21.1以上がインストールされていることを確認してください。 このコマンドを実行すると、現在のNode.jsのバージョンがターミナルに表示されます。 このコマンドを実行すると、現在のNPMのバージョンがターミナルに表示されます。 プロジェクトの作成 以下のコマンドを実行してください: createまたはinitコマンドを実行すると、いくつかのオプションがプロンプトで表示されます。あなたのニーズに応じて、CLIのタイプ(ViteまたはWebpack)を選択したり、TypeScriptサポートを追加したり、異なるCSSプリプロセッサを選択したりできます。オプションについて不明点がある場合、デフォルトを選択(Enterキーを押す)して進んでも問題ありません。後で必要に応じて、CLIのタイプ以外のオプションを変更することもできます。 下記にセットアップのオプションの例を記載します。 オプショナル – グローバルCLIのインストール Quasarをより多く活用するために、グローバルCLIもインストールすることをお勧めします。これにより、ターミナルで直接Quasarコマンドを実行したり、テスト用のローカルHTTPサーバーを実行したり、プロジェクトをアップグレードしたりすることができます。 以下のコマンドを使用してグローバルCLIをインストールできます: これにより、Quasarのコマンドをプロジェクトの外からも使用できるようになります。 依存ライブラリをインストール 新しく作成したプロジェクトフォルダに移動し依存ライブラリをインストーします。 次に、以下のコマンドで開発用サーバーを起動します。グローバルCLIをインストールしている場合は: グローバルCLIをインストールしていない場合は、以下のコマンドで実行できます: このコマンドを実行すると、開発用サーバーが新しいアプリケーションをコンパイルし、完了すると新しいアプリがブラウザで開きます。これで開発を開始できます!お気に入りのIDEやコードエディターを使用してアプリを開発できます。 これでデフォルトのQuasarアプリが起動しました! ファイル構成 Quasar Frameworkのデフォルトのフォルダ構成は、クエーサーアプリケーションの基本的な構造を定義します。以下は一般的なQuasarプロジェクトのデフォルトのフォルダ構造の概要です: これらのデフォルトのフォルダ構造は、Quasarアプリケーションの基本的な構造を提供し、効率的な開発をサポートします。ただし、プロジェクトの要件に応じてカスタマイズできます。 コンポーネントを使ってみる では参考までにボタンのコンポーネントを使ってみます。 メインページになっているsrc/pages/Index.vueを下記のように変えましょう。 これでボタンのコンポーネントが表示されましたね。 これらのコンポーネントはグローバルにインポートされているので各.vueファイルでインポートする必要がありません。 ちなみにこのscriptの書き方がちょっと古いので必要に応じてscript setupに書き変えることをお勧めします。 次にテーブルのコンポーネントを使ってみましょう。 このように簡単で軽量なウェブアプリができてしまいます! 慣れてきたらモバイルアプリにも挑戦してみたいですね。

【ChatGPT】Vue.jsを使ってAIチャットアプリを作成しよう

ChatGPTを使ってチャットアプリを作ろう

今日はVueフレームワークを使用した簡単なチャットアプリを紹介します。初めてChatGPTを使う人にも分かりやすく基本だけをまとめた簡単なものです。しかし、AIが今までの会話を記憶しているように構築できるので、過去の会話を参考にした質問も可能になります。 もちろん、記録を残したい場合は、別にデータベースなどを作成しないとブラウザがリロードした際にすべて初期化されてしまいます。 完成したコードはGitHubのリポジトリから見てください。 完成したものはこんな感じになります。 先に知っておくべきこと User-Agent エラー 上記の記事で紹介したNodeでChatGDPを使ったCLIではopenaiのライブラリを使いました。しかし、クライアント側で実行できるJavaScriptアプリでnpm i openaiでインストールしたライブラリを使ってOpenAIををコールをかけると下記のエラーが出ます。 これは前回の記事で使用したopenaiライブラリはより安全なNode.jsやPythonなどのサーバー側からのコールを許可したもののみになるからです。 今回はaxiosを使ってコールをかけますが、下記にopenAIのエンドポイントにHTTPリクエストを送るaxiosを使わないサンプルコードを紹介しておきます。 今日の記事では、axiosのライブラリを使って作業をするので自分の好みでコードを変えてください。 Vueのセットアップ ではViteを使ってVueのプロジェクトを作成します。 次にaxiosをインストールします。 では、テキストエディタを開いて、早速コードを書いていきます。 コードを書こう では以下のようにApp.vueにコードを書いていきます。 App.vue 補足: 最後にスタイルを追加して完了です。 アプリの検証とまとめ ではnpm run devのコマンドでアプリを起動してテストしてみましょう。 今日は基本のOpenAI APIの使い方を紹介しました。 OpenAIのAPIを使用すると、さまざまなタスクとアプリケーションを構築できます。以下にいくつかの例を挙げます: このように色々なことに活用できそうなので今後も注目が集まりそうです。

Vue3のrefとreactiveの違い

Vue3 のrefとReactiveの違い

今日はVue3 の分かったようでわからないref()とreactive()の違いを説明します。 Vue3のref()とは Vue3のrefは、Vue.jsフレームワークで導入されたリアクティブなデータを扱うための機能です。refは、単一の値をラップし、それを監視して変更があった場合に自動的に再レンダリングすることができます。 refを使用すると、リアクティブなデータを簡単に作成できます。通常、基本データ型(文字列、数値、真偽値など)をrefでラップします。例えば、以下のようにrefを使用して数値を定義できます。 このコードでは、ref関数を使ってcountというリアクティブなデータを定義しています。初期値として0を渡しています。 refでラップされたデータを参照する場合は、.valueプロパティを使用します。 データを変更する場合は、単純に新しい値を代入します。Vueは自動的に変更を検出し、再レンダリングをトリガーします。 refは、単一の値だけでなく、オブジェクトや配列などのデータ構造もラップすることができます。ただし、ネストしたプロパティの変更を検出するためには、.valueを明示的に使用する必要があります。 また、refはVueコンポーネント内で使用されることが一般的です。リアクティブなデータを使用することで、コンポーネントの状態の変更を監視し、自動的に再レンダリングすることができます。 reactive()とは Vue3のreactiveは、Vue.jsフレームワークで使用されるリアクティブなオブジェクトを作成するための関数です。reactiveを使用すると、オブジェクトをリアクティブに監視し、そのプロパティの変更を検出して自動的に再レンダリングすることができます。 reactiveを使ってリアクティブなオブジェクトを作成するには、reactive関数にオブジェクトを渡します。以下はその例です。 このコードでは、reactive関数を使ってstateというリアクティブなオブジェクトを作成しています。stateオブジェクトは、countとnameという2つのプロパティを持っています。 リアクティブなオブジェクトのプロパティにアクセスするには、通常のJavaScriptオブジェクトのようにドット記法やブラケット記法を使用します。 stateオブジェクトのプロパティを変更すると、Vueは変更を検出し、関連するコンポーネントの再レンダリングをトリガーします。 reactiveを使用すると、ネストされたオブジェクトや配列もリアクティブにすることができます。ただし、ネストされたプロパティにアクセスする場合は、リアクティブオブジェクトの参照を使用する必要があります。 reactiveを使用することで、Vueコンポーネント内でリアクティブなデータを簡単に管理できます。プロパティの変更を追跡し、自動的に再レンダリングすることで、アプリケーションの状態を効果的に管理することができます。 refでオブジェクトを格納できるのにわざわざreactiveを使う理由 refを使用してオブジェクトを格納することはできますが、reactiveを使う理由はいくつかあります。 ただし、refを使用してオブジェクトを格納する場合でも、ユーティリティ関数であるtoRefsを使用することで、オブジェクトのプロパティをリアクティブに扱うことができます。これにより、refとreactiveを組み合わせた使い方が可能になります。 短いコードや単純なデータ構造の場合には、refでオブジェクトを格納するだけで十分です。しかし、より複雑なデータ構造やネストされたオブジェクトを扱う場合には、reactiveを使用することでコードの可読性とメンテナンス性が向上するでしょう。 reactive(null)がエラーになる理由 reactive(null)がエラーになる理由は、reactive関数はオブジェクトを引数として受け取る必要があるためです。nullはオブジェクトではなく、プリミティブ型の一種です。 reactive関数は、与えられたオブジェクトをリアクティブにラップし、そのプロパティの変更を検知するために内部的なトラッキング機構を使用します。しかし、nullはオブジェクトではないため、トラッキングするプロパティが存在しないためエラーが発生します。 もし、nullをリアクティブに扱いたい場合は、refを使用することが適切です。refはプリミティブ型やオブジェクトの両方をラップすることができます。

Vue.jsにVuetifyのMaterial Design Iconを追加する方法

Vueにマテリアルデザインのアイコンを追加する方法

今日はVueにMaterial Designのアイコンの追加の仕方を紹介します。公式のドキュメンテーションが分かりづらかったので、役に立つと思います。 Vuetifyのインストールはこちらを確認してください。 Material Designとは Material Designは、Googleによって開発されたデザインシステムであり、ユーザーインターフェース(UI)のデザイン原則とガイドラインの集合体です。現実の物理的な素材や表面の振る舞いを模倣することで直感的なインターフェースを提供し、ユーザーエクスペリエンスを向上させます。シンプルでクリーンなデザインと視覚的な一貫性を重視し、さまざまなプラットフォームで使用されます。 Material Design Iconsとは Material Design Iconsは、Googleが提供する無料のオープンソースのアイコンセットです。Material Designシステムに基づいており、さまざまなカテゴリやテーマのアイコンが含まれています。ベクターフォーマットで提供され、拡大縮小しても画質が損なわれません。デザイナーや開発者にとって便利なリソースであり、一貫性のあるデザインを実現するのに役立ちます。オープンソースであり、自由に使用できます。 ①VuetifyからMDIをインポートする方法 MDI(Material Design Icons)をVuetifyからインポートする方法です。  src/plugins/vuetify.jsもしくはmain.jsに下記を追加 テンプレートでこのように定義できます。 ②Material DesignのSVGを使う方法 これは、アプリケーションを本番環境向けに最適化する際に推奨されるインストール方法です。Vuetifyコンポーネントで内部的に使用されるアイコンのみがアプリケーションバンドルにインポートされます。アプリケーションの他の部分には、独自のアイコンを提供する必要があります。 src/main.js ではMDIからアイコンをインストールします。 これでコンポーネントから必要なアイコンをインポートしてv-iconコンポーネントで使えるようになります。 他にも、FontAwesomeが使えたりするので必要に応じて調べてみましょう。 お疲れ様です。

VueでGoogleでログインしているユーザーのみにFirestoreのCRUD権限を与える方法

VueとFirebaseでログインしたユーザーのみにVRUD権限

今日はVue3のフレームワークを使ってGCP(Google Cloud Platform)のAuthenticationの機能からGoogleでログインしているユーザーを認知し、ログインしているユーザーのみにFirestoreのデータベースのCRUD権限を与える方法を紹介します。 まず初めにこの記事を読んで理解しておきましょう。 完成したコードはGitHubから確認してください。 https://github.com/DanNakatoshi/Vue-userLogin-Firebase-CRUD 今日の目的 VueとFirebaseを使ってGoogleでログインしているユーザーにデータベースの書き込み権限を与える(記事の投稿など) プロジェクトのセットアップ では上記の記事をもとにしてプロジェクトを作成します。 本日は、Googleの認証システムに集中するので詳しいセットアップやGoogleクラウドの説明は省きます。 では下記のようなコードをApp.vueに記載しましょう。 テンプレート(Template)セクション: スクリプト(Script)セクション: このコードは、Vue.jsとFirebaseを組み合わせて、ユーザーのログイン状態に基づいて表示内容を切り替えるシンプルなアプリケーションの一部です。ユーザーがログインしている場合、表示名やプロフィールへのリンクが表示され、ログアウトボタンが表示されます。ログアウト状態では、ログインボタンが表示されます。 では、main.jsはこのようになります。 このコードは、Vue.jsを使用して作成されたアプリケーションのエントリーポイントです。以下では、コードの主な機能と各セクションについて説明します。 ※APIキーは環境変数からインポートするようにして他人とシェアはしないように! では、vue-routerをインストールして、index.jsをこのように書きます。 このコードは、Vue Routerを使用してルーティングを設定し、Firebase Authenticationを使用して認証状態を監視するためのルーターファイルです。以下では、コードの主な機能と各セクションについて説明します。 このコードでは、Vue Routerを使用してアプリケーションのルーティングを設定し、Firebase Authenticationを使用して認証状態を監視し、必要な場合には適切なページにリダイレクトするルーターナビゲーションガードを実装しています。 ではnpm run devのコマンドでログインとログアウトができることと、ユーザー名の取得ができることを確認しましょう! ここまでできたら、次にFirestoreのデータベースを作成して、デフォルトで表示させるデータとユーザーのプロフィールページを作成してみます。状態管理はPiniaで行うとコードもスッキリするのでまずはPiniaをインストールしましょう。 詳しいPiniaの使い方はこちらの記事を参照して下さい。 ではpinia.jsなど適当なファイルを作成してPiniaを定義していきます。 App.vueではこのようにインポートしてPiniaにユーザーのデータを保管します。 下記の様にdataStoreからPiniaにユーザーのデータを保管させます。 ※必要に応じてこの記事を参照してください。 次にこちらのGitHunのリポを参考にFirestoreのデータベースに接続して初期のデータをロードできるようにしましょう。 例としてpost(記事)コレクションを作成してGoogleのユーザーに付属するuidの情報を割り当てます。これでどのユーザーが記事を作成したか、またuidが一致するユーザーのみ記事の編集や削除が行えるようにします。 まずはfirestoreをmain.jsでインポートしてイニシャライズします。必要な部分だけ追加してください。 次にApp.vueに下記の様なコードを追加します。 postsはVue.jsのリアクティブなデータ(ref)です。refはVue.jsでデータを監視し、変更を追跡するために使用されます。 onMountedはVue.jsのライフサイクルフックの1つであり、コンポーネントがマウントされた後に実行される関数です。つまり、コンポーネントが表示された後に実行される処理を指定するために使用されます。 このコードでは、コンポーネントがマウントされた後に非同期関数が実行されます。非同期関数は即時関数(() => {})として定義されています。 即時関数内部では、FirestoreのgetDocsメソッドを使用して、’post’というコレクション内のドキュメントを取得します。取得したドキュメントはquerySnapshotというオブジェクトに格納されます。 querySnapshotオブジェクトは、取得したドキュメントのスナップショットであり、forEachメソッドを使用して各ドキュメントに対してループ処理を行います。 ループ内部では、各ドキュメントのデータを取得し、postオブジェクトとして作成します。postオブジェクトには、ドキュメントのID、タイトル、および完了フラグの情報が含まれます。 また、console.logを使用してドキュメントのIDとデータをコンソールに表示し、fbPosts配列にtodoオブジェクトを追加します。その後、fbPosts配列もコンソールに表示されます。 最後に、posts.valueにfbPosts配列を代入します。これにより、Vue.jsのリアクティブなデータであるpostsが更新され、コンポーネント内でこれらのデータを使用できるようになります。 では、実際にFirestoreにデータを作成してみましょう。 ではHome.vueに下記のようなコードを書きPiniaに保管したFirestoreのデータベースを読み込ませます。 テンプレート部分では、v-forディレクティブを使用して、dataStore.posts内の各要素に対して反復処理を行います。dataStore.postsは、データストアから取得した投稿データの配列を指します。 v-forディレクティブ内では、postという名前の変数を定義し、dataStore.posts内の各要素を参照します。:keyディレクティブは、各要素の一意な識別子であるpost.idを指定します。これにより、Vue.jsが要素を効率的に追跡し、リレンダーの最適化を行うことができます。 v-cardコンポーネントは、Vue Materialのカードコンポーネントであり、データストア内の各投稿に対して表示されます。:title、:subtitle、:textなどのプロパティには、投稿のタイトル、ユーザー名、コンテンツなどのデータがバインドされます。 これでランディングページにForestoreのデータが表示されるようになりました。 … Read more

Nuxt.jsの静的サイトジェネレータ(SSG)とは

Nuxt.jsとは Nuxt.jsはVue.jsフレームワークをベースにしたJavaScriptのフレームワークであり、Nuxt.jsのSSG(Static Site Generation)はその中でも特定の機能の一つです。 ではNuxt.jsで実際にコードを書く前にSSGについて知識を深めておきましょう。 SSGとは SSGは、静的サイト生成とも呼ばれ、事前にサーバーサイドでページを生成し、それを静的なHTMLファイルとして提供する手法です。これにより、クライアントのリクエストごとにサーバーがページを生成する必要がなくなり、パフォーマンスやスケーラビリティの向上が期待できます。 Nuxt.jsのSSGは、開発者がNuxt.jsを使用して静的なサイトを構築する際に便利な機能です。 Nuxt.jsのSSGの特徴 Nuxt.jsのSSGは、サーバーサイドで動的なデータの取得やAPIの呼び出しが必要な場合には、ビルド時に事前生成するデータを取得するための特別なメソッドを提供しています。 要約すると、Nuxt.jsのSSGは開発者が静的なサイトを効率的に構築できる機能であり、パフォーマンスやSEOの向上に貢献します。 Nuxt.jsを使用したSSGの短所 Nuxt.jsのSSGにはいくつかの短所があります。以下にいくつかの一般的な短所を挙げます: 以上が一般的な短所ですが、これらの制約はプロジェクトの要件や目標によって異なる場合があります。Nuxt.jsのSSGは、静的サイトのパフォーマンスやSEOの向上に役立つ機能であり、適切な使用場面で優れた選択肢となることがあります。 では、Nuxt.jsのSSGの短所も理解できたところでNuxt.jsの強みであるSSRと比較してみましょう。 SSRとSSGの比較 SSR(サーバーサイトレンダリング)とSSG(静的サイトジェネレータ)のパフォーマンスの違いを表にしました。 SSR SSG 最新のページを表示できる ★★★ ★☆☆ リスポンススピード ★★☆ ★★★ ホスティングの柔軟性 ★★☆ ★★★ ビルドのスピード ★★★ ★★☆ 上記に上げられたようにSSRと比べてホスティングに制約がないこととサイトのリスポンスが早いことは理解できましたがSSRに比べるとビルドのスピードが遅くなることと、SSRのようにページの柔軟性がなくなります。 また状況によってはSSRとSSGを組み合わせたハイブリッドのサイトを作成することも可能になります。 Nuxt.jsのプロジェクト作成 では下記のコマンドでNuxtのプロジェクトを作成しましょう。 ではデフォルトではapp.vueがランディングページになっていることを確認します。 ちなみにこの<NuxtWelcome/>のコンポーネントはライブラリから引用されるデフォルトのコンポーネントなので消してしまってOKです。 静的サイトのビルド では下記のコマンドで静的サイトをビルドしましょう。 ビルドが終わると.output/publictディレクトリが作成されウェブサイトに必要なファイルがコンパイルされましたね。この中にindex.htmlがあるのでクリックしてください。 これがSSGのエントリーポイントになります。 まとめ Nuxtを使うことでクライアント側のレンダー、サーバー側のレンダーを意識することが増えるようになります。またSSGを意識することによってさらにウェブ開発の見方が広がることになります。是非試してみてください。

Nuxtでマウスで画面をドラッグしてスクロールさせる

Nuxtマウスでスクロール

お疲れ様です。最近のモバイルではユーザーが横幅に入りきらないボタンやメニューのアイテムをスクロールすることが当たり前ですね。 これを同じようにデスクトップで行おうとしてもブラウザではデフォルトでその機能が付いていません。 ですのでこのように見た目の汚いX軸のスクロールバーを使用するしかありません。 では今日はNuxtを使ってデスクトップでスクロールバーをなしでマウスでドラッグしてスクロールする方法を紹介します。 環境 今日はVueのSSRフレームワークのNuxtを使います。Vueの場合はクライアント側でレンダーされるのでWindowオブジェクトにアクセスできますが、Nuxtはサーバーサイドでレンダーされるのでデフォルトではwindowオブジェクトが使えません。この意味が分からない人は、まずはバニラJSでどうやってマウスを使ってスクロールができるのか知っておきましょう!Nuxtのプロジェクトができていることを想定して進めていきます。 VueUseライブラリ 今日はVueでもよくつかわれるライブラリのVueUseを使います。このuseMouseの機能を使ってVueでも簡単にマウスの現在の位置を手に入れることができるので自作で作るのが面倒な場合はこれが使えそうです。このVueUseのライブラリはSSRのNuxtも対応しています。 ではVueUseをインストールします。 インストールが完了したらNuxtのコンフィグファイルにこのモジュールを登録します。 カーソルの位置を知る ではモジュールを登録したところでグローバルでモジュールが使えるようになります。 これでカーソルが移動するたびにリアクティブに位置を取得できるようになりました。こんな簡単にできるとはすばらしいですね。 クリックイベントを作成 dえは下記の様にマウスイベントのクリック、マウスムーブ、マウスアップを作成してスクロールのポジションを変更していきます。 これでエレメント内でマウスクリックするとカーソルがつかむイラストに変わることが分かりました。 さらにつかんでいる間にマウスを移動させることでスクロールが移動できるようになりました。 const scrollcontainer=ref(null);はテンプレートrefでVueのやり方でHTMLタグにアクセスする方法です。 const{x}=useMouse();は、先ほど説明した通り現在のマウスの位置を知るモジュールです。今回はx軸だけ必要になります。 const isDragging=ref(false);はマウスがスクロールをつかんだかどうかをリアクティブに保管するための変数です。逆にisDraggingがfalaseの時は何も実行されないようにします。 const startingPosition = ref(0);x軸のスタートの位置です。初期では0にしておいて、クリックイベントで値を入れるようにします。 const postionDiff = ref(0);クリックが始まってからマウスを移動している際にリアクティブでその差を保管する変数です。では上記のデータをもとにmousedownScrollbar、mousemoveScrollbar、mouseupScrollbarを見てください。詳しい内容は関数内に書いたままになります。 最後に::-webkit-scrollbar要素を非表示にしてスクロールバーを隠して完成です!

Vue3+FirebaseでリアルタイムCRUD操作ができるアプリを作成しよう

今日はFirebaseのFirestoreデータベースを使ってリアルタイムで更新される、つまり、他のブラウザで更新されたデータベースが自分のブラウザでも更新されるCRUDアプリを作成します。 記事を始める前に知っておくべきこと 完成形はこのようになります。 完成したコードはGitHubから確認してください。 VueのToDoアプリ 今日はVueの説明は省きますがこちらのスターターテンプレートを使用するとFirebaseに集中して理解ができると思います。Gitでクローンして使ってください。 Vue-ToDoリストスターター 今日使用するテクノロジーはこちらです。 ToDoスターターのリポジトリの説明 基本的に理解しておく部分はApp.vueのみです。 App.vue 上記のようにデータベースに接続されていないので更新したデータはブラウザをリロードすると消えてしまいますね。 これからこのプロジェクトにFirebaseのFirestoreデータベースを連携させ、toDoの追加、編集、削除(CRUD操作)ができるようにします。 レッツゴー リポジトリのクローン Gitを使ったことがない人は似たようなファイルを作成しても良いですしGitHubからZipでダウンロードしてもOKです。Gitは必須ツールですので是非学んでおきましょう。Gitの使い方(YouTube) Firebaseのプロジェクトの作成 Firebaseのプロジェクトの作成の仕方はこちらの記事でくわしーく説明しているので先に確認しておきましょう。 Firebaseのモジュールをインストール では下記のコマンドでFirebaseのモジュールをインストールします。 次にプロジェクトの設定の歯車のアイコンの中にある全般のタブをクリックします。 そこにFirebaseのSDKのコードのスニペットがあるのでコピーしておきます。 これは大切な情報なので他人とシェアしないように! 次に、このコードを読み込ませるファイルを作成します。 src/plugins/firebase.js(名前は何でもOKです。) つぎにfirestoreにサンプルのtodosタスクを追加します。 Firestoreの設定 次にfirestoreの設定を行います。 公式ドキュメンテーションにも詳しい説明があるので読んでおきましょう。 こちらにも書いているようにimport { getFirestore } from ‘firebase/firestore’;を記載してそこからデータベースの操作を行うメソッドを活用していきます。 では下記の様にdb変数にFirestoreのデータベースを格納してエクスポートします。 これでどのコンポーネントでもfirestoreのデータベースが使えるようになります。 firestoreのtodosデータを表示させる こちらのfirebaseのドキュメンテーションを参考にしてデータベースのデータを1回読み取る機能を実装していきます。下記がFirebaseのデータベースからドキュメントを読み込む関数になります。 では下記のように変数todosにfirebaseから呼び出したデータを格納してみます。 これで、Vueアプリからfirebaseのデータを読み込みレンダーすることができましたね。 データをリアルタイムで更新する firebaseの強みであるリアルタイムデータベースの機能を使ってみます。 今のコードのままだとFirebaseで直接データを変更したとしてもVueアプリ側のデータは更新されません。 今回のアップデートで、複数の人が同時にデータベースを更新した際にすべてのVueアプリで表示されるデータが最新のものに更新されます。 Firebaseのリアルタイムアップデートのドキュメンテーションはこちら。 参考にするコードはこちら では下記のようにonSnapshotの関数をtodosように変更してみます。 これで試しにfirestoreにデータを追加するとブラウザをリロードすることなくデータが更新されたことが分かりました。 データの変更をリッスンしているので削除と変更にも対応しています。 Firesotreにデータを追加 次にVueアプリからFriestoreにデータを追加する機能を追加します。 公式のドキュメンテーションはこちら。 今回はIDをVue側で指定しないaddDocメソッドを使用します。 参考になるコードはこちら … Read more

Vue3 + Vite + TailwindCSSのセットアップの仕方

Vite-Vue-TailwindCSS

今日はViteのビルドツールを使ってVue3とtailwindCSSのセットアップの仕方を紹介します。 すでにTailinwdCSSを使ったことがある方ならその良さをVueで発揮したいですよね?TailwindCSSは軽量でさらにデプロイの際に使用していないCSSをファイルから除くことができる優れたユーティリティライブラリです。 GitHubからソースコードを参照してください。 Vueのプロジェクトのセットアップ ではcdのコマンドでプロジェクトのディレクトリに移動してnodeのモジュールをインストールします。 Tailwind CSSのセットアップ Node.js 12.13.0より新しいバージョンであることを確認してください。 ではTailwindCSSをインストールします。 次にTailwindcssをイニシャライズしてコンフィグファイルを生成します。 ではプロジェクトのルート直下にtailwind.config.jsファイルが作成されたのでそちらを下記の様に更新します。 またpostcss.config.jsも自動で作成されていることを確認します。ちなみにnode.jsでエラーが出る場合はファイル名をpostcss.config.cjsに変えると直ります。 使用されていないスタイルを除くには: tailwind.config.jsにあるpurge(パージ)オプションにコンパイルしたcssファイルを出力したいパスを指定します。 次にassets/styles.cssなどのようにグローバルで使用したいCSSファイルを作成し、下記の様にtailwindcssをインポートします。 次にmain.jsからVueアプリの生成時に上記のcssファイルをインポートするように指示します。 main.js では最後にApp.vueにtailwindCSSのclassを使ってスタイリングをしてみます。 これでテスト用のウェブサーバーを起動するとスタイリングがアプライされたことが確認できますね。 デプロイの際には 下記のコマンドでvueアプリをデプロイ用にビルドします。 これでブラウザの検証ツールから確認すると最小限のCSSしか使用されていないことが確認できますね。 お疲れ様でした。

【コピペだけ】NuxtJSでCodePenのクローンを作成しよう

皆さん、CodePenは使ったことがありますか?CodePenはHTML、CSS、JavaScriptを入力してその結果をブラウザで見れるウェブアプリになります。CodePenはCSSやJavaScriptを使ってアニメーションを探したりするときにつかったりします。 今日はシンプルなCodePenのクローンを作成したので紹介します。 CodePenの例: 今日は自作でJavaScript、HTML、CSSを入力できるエディターとその結果が表示されるアプリのベースを作っていきます。 完成形は画像のようになります。完成したコードはこちらのGitHubリポからどうぞ。 この記事を読む前に知っておくこと このコードで使用するテクニック リポジトリのクローン では下記のコマンドを使用してリポジトリからデモアプリをセットアップします。 ファイル構成 nuxt.config.ts Nuxtのコンフィグファイルです。 monaco editorのモジュールの登録と、PrimeVueのUIライブラリで使うスタイルのインポートをしています。 plugins/primevue.js pluginsディレクトリはNuxtで指定されているディレクトリでレンダー時にNuxtが自動で読み込んでくれます。ここでは、グローバルで使えるPrimeVueのコンポーネントを登録しています。 詳しいPrimeVueのセットアップの仕方の記事はこちらから。 pages/code.vue pagesも同じようにNuxtで指定されている、自動で読み込んでくれるディレクトリです。pages/index.vueがランディングページになります。 /codeのページに行くとcode.vueのページ(コンポーネント)が読み込まれます。 components/code/editor.vue componentsディレクトもNuxtで指定されているディレクトリになります。 ここで登録されたvueファイルはグロバーバルで<CodeEditor>のように使用することができます。ファイル名の最初が大文字になることと、componetsディレクトリからディレクトリ名を当ててパスをしてするような方法になります。 TabViewとTabPanel:PrimeVueのコンポーネントです。 MonacoEditor:monaco editorのNuxtライブラリで使えるコンポーネントです。 valueJS、valueHTML、valueCSS:初期値とユーザーが入力できるリアクティブな値 iFrameのsrcdoc:iframeDoc変数(computedのHTMLファイルをレンダーします) monacoConfig:テキストエディターのパラメーター(ダークテーマ、ミニマップの表示、行数の表示など) 上記で説明した部分が今回のメインとなるロジックになります。 追加できなかった部分 JavaScriptを実行した際にconsole.logの値をブラウザ(consoleタブ)に表示 これは、以下の理由より完成できませんでした。 お疲れ様でした。