シリーズ

Vue3のrefとreactiveの違い

by
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を追加する方法

by
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権限を与える方法

by
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

【仮想DOMの概念から】なぜSvelteがReactよりも優れているのか

by
Svelte　React　どっちが良いか

このタイトルだとReactがダメみたいなニュアンスでとられるかもしれませんが、今日の議題であるSvelteが仮想DOMを使用しないことに注目していただきたいです。現在はReactがマーケットの主役であり必須のスキルであることは明らかです。 Svelteのフレームワークは前回の記事で詳しく説明しているので是非読んでみてください。 以上を理解していただいたうえで今後のフレームワークを選ぶ材料として下記の記事を読んでいただければと思います。 DOM操作のコスト まずはDOM操作にかかるコストについて理解しましょう。 以下に主要なDOM操作のコストを記載します。 これらのコストは、DOMの変更が大きい場合や複数の要素に影響を与える場合に増加する傾向があります。したがって、効率的なDOM操作を行うことは、パフォーマンスの向上につながります。 また、注意点として、ブラウザは最適化を行っているため、すべてのDOMの変更が即座にコストを引き起こすわけではありません。一部の変更はバッチ処理されたり、最適化されたりする場合があります。しかし、大量のDOMの変更や頻繁な変更は、パフォーマンスの低下を引き起こす可能性があります。 したがって、DOMの変更は必要最小限に抑えることが重要であることが分かります。 仮想DOMの概要 仮想DOMは、実際のDOMの抽象化をさせる技術であり、Webアプリケーションのパフォーマンスを向上させるために使用されています。通常、ブラウザ上のDOMへの変更は上記のようなコストがかかるため、仮想DOMは変更を抽象化し、最小限のDOM操作に変換することで効率化を図ります。 仮想DOMの利点 仮想DOMの弱点 Reactの仮想DOM Reactでは、仮想DOMを使用してUIの変更を追跡し、必要な最小限のDOM操作を行います。コンポーネントの状態が変更されると、Reactは仮想DOMを再構築し、以前の仮想DOMとの差分を計算します。その差分を実際のDOMに適用することで、必要な部分のみを更新します。 Reactの仮想DOMの手順は以下のようになります: Reactの仮想DOMの利点は、状態の変更に応じて必要な部分のみを更新できることです。これにより、パフォーマンスが向上し、スムーズなユーザーエクスペリエンスが実現できます。 SvelteのDOM操作 Svelteは、Reactとは異なるアプローチを取っています。Svelteでは、コンパイル時する作業を行い、コンポーネント内のロジックとテンプレートが結合され、最終的にまとめられたVanilla JavaScriptのコードが生成されます。この生成されたコードには、仮想DOMの概念は存在しません。 Svelteでは、コンパイル時に変更をトラックし、直接最適なDOM操作を生成します。つまり、Svelteは実際のDOM操作を行い、仮想DOMを介さずに変更を反映します。これにより、実行時のオーバーヘッドが少なくなり、高速なアプリケーションが実現できます。 Svelteの仮想DOMの利点は、ビルド時に最適化されたコードを生成し、実行時のオーバーヘッドを減らすことです。また、Svelteは必要な最小限のコードしか生成しないため、アプリケーションのサイズも小さくなります。 SvelteがReactよりも優れている点 まとめ もちろん、フレームワークの完成度やコミュニティの大きさ、需要を理解したうえで選ぶことが大切どちらのフレームワークも優れた特徴を持っているので、プロジェクトの詳細や開発者の好みによって決めることになると思います。

Svelteを始めよう！Reactよりも使いやすい？

by
Svelteとは

今日はSvelteのフレームワークを紹介します。 Svelteってどんなフレームワーク Svelteは、JavaScriptベースのフロントエンドフレームワークです。Svelteは、コンパイル時にコンポーネントを効果的に変換し、ブラウザで実行可能なJavaScriptコードを生成することで、高速なパフォーマンスと効率的なバンドルサイズを提供します。 Svelteの特徴的な点は、実行時にライブラリコードを含まずにコンポーネントをビルドすることです。ReactやVueなどの他のフレームワークと異なり、Svelteは仮想DOM（Virtual DOM）を使用せず、変更を追跡するための高度なリアクティビティシステムを備えています。これにより、ブラウザでの実行時のパフォーマンスが向上し、アプリケーションの応答性が向上します。 Svelteのコンポーネントは、HTML、CSS、およびJavaScriptを組み合わせて記述します。コンポーネント内の変数や状態を宣言することができ、これらの変数の変更は自動的にコンポーネントの再レンダリングを引き起こします。また、Svelteではトランジションやアニメーションの作成も容易であり、ユーザーインターフェースを豊かにするための強力なツールが提供されています。 Svelteの他の特徴には、ReactやVue.jsなどの他のフレームワークで使われている機能や構文のいくつかが組み込まれていることがあります。また、Svelteアプリケーションは、単一のJavaScriptバンドルファイルとして出力されるため、配信やホスティングが容易です。 総合的に言えば、Svelteは、高速なパフォーマンス、効率的なバンドルサイズ、シンプルな構文、および強力なリアクティビティシステムを提供するモダンなフロントエンドフレームワークです。 Svelteを開発した人は誰 Svelteは、Rich Harris（リッチ・ハリス）という開発者によって作成されました。Rich Harrisは、The New York TimesやThe Guardianなどのメディア企業でフロントエンド開発者としての経験を積んでいました。 彼は、既存のフロントエンドフレームワークが仮想DOMに基づいて動作することに対する懸念を抱いていました。そのため、Svelteを作成し、仮想DOMの代わりにコンパイル時に効率的なコードを生成することで、高速で効率的なフレームワークを提供しました。 Svelteは2016年に最初に発表され、以降、多くの開発者によって利用されています。Rich Harrisは、Svelteのリードデベロッパーとして、フレームワークの進化と改善に取り組んでいます。彼の革新的なアイデアと貢献により、Svelteはフロントエンド開発コミュニティで注目を集めています。 日本でSvelteを使っている会社 ではSvelteの利点や使うべき状況が理解できたところで早速Svelteのプロジェクトを作成します。 SvelteKitとSvelteの違い SvelteとSvelteKitは、どちらもSvelteフレームワークをベースにしたツールですが、いくつかの重要な違いがあります。 これらはSvelteとSvelteKitの主な違いです。Svelteは効率的なUIの構築に特化しており、SvelteKitはフルスタックのフレームワークであり、ルーティングやサーバーサイドレンダリングなどの機能を提供しています。どちらを選択するかは、プロジェクトの要件と目標によって異なります。 Svelte / Svelte Kitを始めよう ①Node.jsのインストール: SvelteはNode.js環境で動作しますので、まずはNode.jsをインストールしてください。公式ウェブサイト (https://nodejs.org) から最新の安定版をダウンロードし、インストールしてください。 ②Svelteアプリケーションの作成: Svelteプロジェクトを作成するために、ターミナル（コマンドプロンプト）を開き、以下のコマンドを実行します。 myappの部分は自分のプロジェクト名を入れましょう。 ※ちなみにViteでもプロジェクトの作成ができます！ では実際にnpm run devのコマンドでアプリを起動してみましょう。ダイナミックでインタラクティブなウェブアプリが表示されましたね。（demoをインストールするとサンプルコードが見れます。） Svelte Kitのファイル構成 Svelteの一般的なファイル構成は、以下のような形になります。 SvelteKitの一般的なファイル構成は、以下のような形になります。ただし、プロジェクトの設定や追加のモジュールの導入によって、構成は変化する可能性があります。 終わりに いかがでしたでしょうか？Svelteを学ぶことは、モダンなフロントエンド開発において非常に有益です。Svelteはシンプルで直感的な構文を持ち、パフォーマンスに優れたアプリケーションを構築することができます。ReactやVueと合わせて是非、活用してみてください。

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

by

今日は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のセットアップの仕方

by
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しか使用されていないことが確認できますね。 お疲れ様でした。

VueとFirebaseでGoogleアカウントを使ったログインシステムを作る

by
ユーザーをGoogleアカウントでログインさせる

前回はGoogleが提供するFirebaseのサービス（Baas:Backend as a Service）を紹介しました。 今日は、このFirebaseとJavaScriptのフレームワークのVueを使ってユーザーのログインシステムを作ってみましょう！ まずは、基本となるメールアドレスを使ってのログインのロジックを理解することが重要になります。順に従って進めていくことをお勧めします。 完成したコードはGitHubからどうぞ。 環境 なぜGoogleアカウントを使ってログインを作る必要があるか Googleアカウントである必要はありません。Twitterでも、GitHubアカウントでもOKです。数年前から見かけるようになったGoogleアカウントを使ってログインなどの認証方法はOAuthと言います、 OAuth方法を使用することで下記のメリットがあります。 以上のことから開発のスピードが速くなることとセキュリティが強化されることが理解できます。 Firebaseは必要か 詳しいFirebaseの説明は前回の記事を参照して下さい。Firebaseはあくまでもオプショナルです。しかし、無料でバックエンドのサービスを始められること、簡単にOAuthのロジックをフロントエンドに組み込められることから使っていて損はないシステムだと思います。またクライアント側はVueで作成するので必要に応じてバックエンド側のみ、フロントエンド側のみのテクノロジーを変更することができるのもメリットになります。 Vueプロジェクトの作成 今回はViteのビルドツールを使用してVueアプリを作成します。詳しいViteの使い方はこちらを参照してください。 ではテキストエディタを開いて基本のページを作成していきます。 Emailを使ったユーザー登録 では参考例として、Emailを使用したユーザー登録を作成していきます。その後にGoogleアカウントを使用したユーザーログインを作成します。 まずは、srcフォルダにFeed.vue、Home.vue、Register.vue,SignIn.vueを作成します。Feed.vueはログインしたユーザーのみアクセスさせるように進めていきます。 次にURLのラウティングを行うためにvue-routerをインストールします。下記のコマンドを実行してください。 次にsrc/routerフォルダを作成しindex.jsファイルを作成します。 ではrouter/indewx.jsに下記の様にページとなるコンポーネントを登録していきます。 つぎに作成しtarouterをmain.jsにインポートして読み込ませます。 次にデフォルトでついてきたHelloWorld.vueを削除して、App.vueに行きます。 App.vueにrouter-viewを登録してURLごとに読み込まれるページViewをレンダーさせます。 App.vue では、各Home、SignIn、Register、Feedのコンポーネントに適当なHTMLを入れてサーバーを起動するとURLごとにViewが変わることが確認できますね。 では最後にナビゲーションバーを作成して、URLではなくボタンからユーザーがページにジャンプできるようにします。 App.vue ここまで問題がないことを確認してください。 Firebaseのプロジェクトを作成 ではFirebaseのプロジェクトを作成していきます。詳しくはFirebaseを始めようの記事を参考にしてください。 手順だけ説明します。 下記のコマンドでfirebaseのライブラリをインストールします。 下記のようなコードがでるのでコピーしておきます。 認証システムを設定する firebaseの構築タブからAuthenticationを選択します。 始めるのボタンを押します。 Emailを追加します。 次にGoogleを追加します。 これで２つのプロバイダが登録されました。 では、npm install firebaseのコマンドを実行していることを再度確認してテキストエディタに戻ります。 次に先ほどコピーしておいたfirebaseのスニペットをmain.jsに貼り付けます。 initializeApp(firebaseConfig);の部分だけ変更してOKです。 認証システムを追加する では下準備が整ったところでいよいよユーザー認証のロジックをコードにしていきます。 ①ユーザー登録（Register.vue） 以上のようなテンプレートを作成します。 Vueの基本が理解されていることを前提に進めています。もしVueの基本を学びたい方はこちらのVue講座を読んでください。 今回注目してほしいところは、firebaseのライブラリからgetAuthとcreateUserWithEmailAndPasswordをインポートしてユーザー登録を完了させ、firebaseにデータを飛ばしてあげたことです。 ではfirebaseに戻り、Usersタブを見ると新しいユーザーが登録されていることが分かります。 もちろん実際には、強いパスワードのみ許可し、パスワードの再確認のインプットも作成すべきですが、今回は省きます。 … Read more

Firebaseを始めよう

by
初めてのFirebase

フロントエンドを初めて実際にプロダクトをつくろうと思って始めたけど、バックエンドのテクノロジーに圧倒されていませんか？またフロントエンドの認証システムとバックエンドの認証システムを連携させる方法が難しいと思いませんか？ そんな問題を解決してくれるのがGoogleが提供するFirebaseです。今日は、無料プランでDBを作成して実際にコードを書いてみます。 ちなみにFirebaseはトラディショナルなリレーショナルデータベース（MySQL,PostgreSQLなど）とは違うNoSQLデータベース（MongoDBなど）のデータベースを提供しています。NoSQLを使用する良い機会になるので是非試してみましょう！ Firebaseとは Google Cloud Console（グーグルクラウドコンソール）上に作成されたバックエンドサービス（Baas：Backend as a Service）のことです。では、最初にFirebaseのデータベース（Realtime Database）でできることを紹介します。この他にFirestore Databaseという最新のデータベースサービスがありますが、それは後程紹介します。 Firebase Realtime Database：リアルタイムでデータを保存してユーザー間で同期できる、クラウドホスト型 NoSQL データベースです。 新機能のCloud Firestore なら、グローバル スケールでアプリデータを保存、同期、クエリできます。 デバイス間の連携が容易：リアルタイム同期により、ユーザーはあらゆるデバイス（ウェブ、モバイル）からデータに簡単にアクセスして、他のユーザーとの共同作業を効率的にできるようになります。 サーバー不要のアプリを構築：Realtime Database にはモバイルとウェブの SDK が含まれているため、サーバーがなくてもアプリを構築できます。Cloud Functions for Firebase を使用して、データベースでトリガーされるイベントに応答するバックエンド コードを実行することもできます。 オフラインでの使用に最適：ユーザーがオフラインになると、Realtime Database SDK はデバイス上のローカル キャッシュを使用してデータを表示し、変更を保存します。デバイスがオンラインになると、ローカルデータが自動的に同期されます。 高度なユーザーベースのセキュリティ：Realtime Database と Firebase Authentication の統合により、デベロッパーはシンプルかつ直感的な認証を利用できます。Google の宣言型セキュリティ モデルを使用して、ユーザー ID、またはデータのパターン マッチングによってアクセスを許可できます。 これで開発のスピードがあげられそうですね！ そのほかに電話番号での認証やGoogleのアカウントを使っての認証も簡単に作成できてしまいます。 FirebaseではWebのみならずiOSやAndroidのアプリも作成できます。今回はWebに絞って紹介していきます。 Firebaseの料金 料金についてはこちらのリンクを参照してください。 まずは、無料プランからサービスを検証してみましょう。ではすぐに利用開始のボタンを押します。 Firebaseのプロジェクトを作成 Firebaseのプロジェクトを作成するとGoogle Cloud … Read more

Vue3とVuetifyでゲームみたいなメニューを作る

by
Vue ゲームのスタート画面

今日は前回紹介したVueのUIライブラリのVuetifyを使ってゲームのスタート画面のようなUIを作ってみます。 今日のテーマは、Vueの基礎、JavaScriptの基礎、CSSの基礎の復習や知識を固めるために練習する良い素材になると思います。 完成したコードはGitHubで公開しているので見てみてください。 前回の続きなのでVue＋Vuetifyのプロジェクトを用意して早速とりかかりましょう。 もし、Vuetifyを使いたくない方はViteでVueのプロジェクトを作成するだけでも同じことができるのでご安心を。 まずは、使えそうなレイアウトをコピペします。 v-containerは、コンテンツを左右の真ん中と、上下の真ん中に位置させることができるコンポーネントです。 v-rowは、v-colのwrapper（囲うもの）でflexを使って中のcol（カラム）のレイアウトをコントロールすることができます。 v-colはかならずv-rowの直下に位置されます。ここに表示されるコンテンツを入れることになります。 v-sheetは複数のコンポーネントで使えるベースラインになります。 レイアウトの作成 では、ゲームの画面のように左側にメニュー、右側にカードを作成します。 Vueitfyのv-colにはmax-widthが100%で設定されていたため、divに右と左のcolクラスを作成して別々のサイズにしました。 見やすいようにわざと色を付けていますが、後から外します。 背景画像 では、バックグラウンドの画像をPixabayで見つけて貼り付けます。これは商用無料で使える写真を探すときに便利なサイトです。 背景画像のファイルはsrc/assetsに、bg-img.jpgファイルで置いておきます。プロジェクトが大きくなったら、画像をまとめる用のフォルダを作成するべきですが今はOKとします。 ではスタイルに追加します。 このように背景画像が加わり、いい感じになりました。 メニューの作成 メニュー（ナビゲーションバー）を作成します。これは別のコンポーネントを作成してApp.vueにインポートする形にします。 では、components/Menu.vueファイルを作成して下記のように書きます。 次にApp.vueの方でこのコンポーネントをインポートしてあげます。 これでホバーエフェクトのあるメニューができました。次にメニューのタイトルをpropsとして親コンポーネントのApp.vueから子のMenu.vueに渡してあげます。 次に、メニューにガラスのような透明エフェクトをかけたいのでこのCSSツールから作成します。他にもデザインで使えるCSSツールを記事にしているので是非読んでください。 とりあえず、このような感じになりました。 コードはこのようになります。 Menu.vue コンテンツを作成 次に、各メニューをクリックした際に表示される右側のコンテンツのコンポーネントを作成します。ファイルはcomponents/Content.vueの名前にしました。これも同じようにApp.vueにインポートさせます。 コンテンツの中身もpropsでContent.vueに渡してあげるようにします。 次に、メニューボタンをクリックしたときに各コンテンツが切り替わるようにします。 App.vue Content.vueはとりあえずこのようにしておきます。 親のApp.vueからコンテンツのpropsをもらえるようにしておきます。 Content.vue これでクリックするとコンテンツが表示されるようにはなりました。 次にransform: perspective(600px) rotateY(10deg);のCSSを左と右のcolクラスに追加して、３Dに見えるようにします。 最後にボタンがアクティブの際にボタンに色を付けて完了です。 完成したイメージはこちらです。 完成したコードはこちら（GitHub）からどうぞ。