プログラミング言語

JavaScriptの__proto__とは何？

by
__proto__とは

なぜ__proto__を理解するべきか __proto__のコンセプトを理解することは、JavaScriptのオブジェクトとプロトタイプの関係性を深く理解するために重要です。以下に、その重要性をいくつかのポイントで説明します。 以上の理由から、__proto__のコンセプトを理解することは、JavaScriptのオブジェクト指向プログラミングやプロトタイプベースの継承を理解し、効果的に利用するために不可欠です。 __proto__とは JavaScriptの__proto__は、オブジェクトのプロトタイプにアクセスするための特殊なプロパティです。プロトタイプは、別のオブジェクトから継承されたプロパティやメソッドのセットであり、他のオブジェクトとの関係性を定義します。 具体的には、あるオブジェクトの__proto__プロパティには、そのオブジェクトのプロトタイプオブジェクトへの参照が格納されます。プロトタイプオブジェクトは、そのオブジェクトが継承するプロパティやメソッドを持っており、__proto__を介してアクセスできます。 例えば、以下のようなコードを考えてみましょう: objオブジェクトの__proto__プロパティには、Objectというデフォルトのプロトタイプオブジェクトへの参照が格納されています。そのため、objオブジェクトはObjectのプロパティやメソッドを継承して使用することができます。 ただし、__proto__はECMAScript 6で非推奨とされ、代わりにObject.getPrototypeOf()やObject.setPrototypeOf()などのメソッドを使用することが推奨されています。 __proto__の例 もしJavaScriptで「Person」というオブジェクトを定義して、そのオブジェクトに「name」というプロパティと「greet」というメソッドを持たせたいと考えてみましょう。 ここで、新たに「Student」というオブジェクトを作成し、そのプロトタイプに「Person」オブジェクトを指定したい場合、__proto__を使用することができます。 この例では、Student.__proto__を使ってStudentオブジェクトのプロトタイプをPersonオブジェクトに設定しています。これにより、StudentオブジェクトはPersonオブジェクトのプロパティとメソッドを継承します。 例えば、以下のようにgreet()メソッドを呼び出すことができます。 この例では、Studentオブジェクト自体にnameプロパティは存在しませんが、__proto__を介してPersonオブジェクトにアクセスし、nameプロパティを継承しています。そのため、greet()メソッド内で正しい名前が表示されることが確認できます。 ただし、注意点として、__proto__はECMAScript 6で非推奨とされており、代わりにObject.setPrototypeOf()メソッドを使用することが推奨されています。上記の例をObject.setPrototypeOf()を使って書き直すと、以下のようになります。 Object.setPrototypeOf()を使用することで、同様のプロトタイプの設定が可能です。 プロトタイプチェーン プロトタイプチェーン（Prototype Chain）は、JavaScriptのオブジェクト間でプロパティやメソッドの継承を実現する仕組みです。これにより、あるオブジェクトが他のオブジェクトのプロパティやメソッドを参照できるようになります。 JavaScriptでは、すべてのオブジェクトはプロトタイプ（prototype）と呼ばれる別のオブジェクトを持っています。プロトタイプオブジェクトは、継承元となるオブジェクトのプロパティやメソッドを格納しています。 オブジェクトがプロパティにアクセスするとき、まずそのオブジェクト自体にそのプロパティが存在するかどうかを確認します。もし存在しない場合、JavaScriptはオブジェクトの__proto__（またはObject.getPrototypeOf()メソッド）をたどって、次に検索するべきプロトタイプオブジェクトを見つけます。このプロセスは継続し、プロトタイプオブジェクトのプロパティを見つけるか、プロトタイプチェーンの終点であるObject.prototypeに到達するまで繰り返されます。 例えば、以下のようなコードを考えてみましょう: 上記の例では、personオブジェクトがstudentオブジェクトのプロトタイプとなっています。したがって、studentオブジェクトにgreet()メソッドが存在しない場合、プロトタイプチェーンを通じてpersonオブジェクトのgreet()メソッドが参照されます。 プロトタイプチェーンを適切に利用することで、オブジェクト間でのコードの再利用性や継承の実現が容易になります。ただし、プロトタイプチェーンは無制限に続くわけではなく、最終的にはObject.prototypeを終点としています。 setPrototypeOfとは Object.setPrototypeOf()は、JavaScriptの組み込み関数の一つであり、オブジェクトのプロトタイプを設定するために使用されます。つまり、あるオブジェクトのプロトタイプを別のオブジェクトに変更することができます。 Object.setPrototypeOf()関数は以下のような構文を持ちます: 例えば、次のようなコードを考えてみましょう: 上記の例では、Object.setPrototypeOf()を使用してstudentオブジェクトのプロトタイプをpersonオブジェクトに設定しています。その結果、studentオブジェクトはpersonオブジェクトのプロパティやメソッドを継承するようになります。したがって、student.greet()を呼び出すことでpersonオブジェクトのgreet()メソッドが実行され、適切なメッセージが表示されます。 Object.setPrototypeOf()はプロトタイプの変更を行うための便利なメソッドですが、プロトタイプチェーンを変更するために使用される場面は比較的少ないです。通常はオブジェクトを作成する際に適切なプロトタイプを設定することが推奨されます。また、Object.create()やクラス構文を使用してプロトタイプを指定する方法もあります。 __proto__には何が含まれている？ __proto__プロパティには、オブジェクトのプロトタイプオブジェクトへの参照が格納されます。プロトタイプオブジェクト自体がさらに他のプロパティやメソッドを持っている場合、それらも__proto__プロパティを介してアクセスできます。 具体的には、__proto__プロパティに含まれる内容は、次のようになります。 以下の例を見てみましょう: 上記の例では、studentオブジェクトの__proto__プロパティはpersonオブジェクトを参照しています。したがって、student.__proto__はpersonオブジェクトのプロパティとメソッドを含むオブジェクトを返します。さらに、personオブジェクト自体はObject.prototypeをプロトタイプとして持っているため、student.__proto__.__proto__は空のオブジェクトを返します。 __proto__はなぜES6から非推奨になったのか __proto__は、ES6以前のJavaScriptにおいてプロトタイプの設定や参照に使用されていましたが、ES6でObject.setPrototypeOf()やObject.getPrototypeOf()といったメソッドが導入され、より直感的かつ安全なプロトタイプの操作が可能になったため、__proto__は非推奨となりました。 __proto__が非推奨とされる理由は以下の通りです: これらの理由から、__proto__はES6以降のJavaScriptでは非推奨とされ、代わりにObject.setPrototypeOf()やObject.getPrototypeOf()などのメソッドを使用することが推奨されています。これらのメソッドはより安全でパフォーマンスの良いプロトタイプ操作を提供し、コードの互換性とメンテナンス性を向上させることができます。 以上、__protp__の説明でした。 お疲れ様でした。

JavaScriptにおけるプロトタイプと継承について徹底解説

by
JavaScriptのプロトタイプ

プロトタイプ継承は、JavaScriptにおいてオブジェクト間の継承を実現する仕組みです。あるオブジェクトが別のオブジェクトを参照し、プロトタイプのプロパティやメソッドを自動的に継承します。これにより、コードの再利用性や拡張性を高めることができます。 では詳しく見ていきましょう。 プロトタイプを例に例えると プロトタイプを身近なものに例えると、料理のレシピや調理手順の書かれた本と似ています。レシピ本は、様々な料理を作る際の手順や材料の情報を提供します。これをプロトタイプと考えると、実際の料理はオブジェクトであり、レシピ本がそのプロトタイプです。 例えば、あなたが特定のレシピ本を持っていて、そのレシピ本にはチョコレートケーキの作り方が書かれています。新しいケーキを作るとき、そのケーキはチョコレートケーキのレシピ本を参照し、手順や材料を継承します。レシピ本には他のケーキのレシピも含まれているかもしれませんが、チョコレートケーキを作る場合には、そのレシピだけを参照します。 同様に、JavaScriptのオブジェクトもプロトタイプを参照し、プロトタイプのプロパティやメソッドを継承します。プロトタイプは共通の情報や機能を提供し、オブジェクトはそれを利用して特定の目的や動作を実現します。 プロトタイプとはなにか プロトタイプは、JavaScriptにおいてオブジェクト間の継承を実現するための仕組みです。プロトタイプとは、あるオブジェクトが別のオブジェクトを参照するプロパティのことを指します。 オブジェクトはプロパティとメソッドを持っており、それらの定義はオブジェクト自体に直接格納されます。しかし、オブジェクトが持つプロパティやメソッドを見つけるために、JavaScriptはまずオブジェクト自身を調べます。もし見つからない場合、JavaScriptはオブジェクトのプロトタイプを調べ、そこからプロパティやメソッドを探します。このプロトタイプチェーンをたどって、最終的に目的のプロパティやメソッドを見つけることができるのです。 プロトタイプは、新しいオブジェクトを作成する際に役立ちます。新しいオブジェクトを作成するとき、それを作成したオブジェクトのプロトタイプを指定することができます。これにより、新しいオブジェクトはプロトタイプのプロパティやメソッドを自動的に継承します。 例えば、以下のようなコードを考えてみましょう： この例では、parentオブジェクトが親となり、childオブジェクトがそのプロトタイプとして指定されています。childオブジェクトはparentオブジェクトのプロパティとメソッドを継承し、sayHelloメソッドを呼び出すことができます。 プロトタイプは、オブジェクトの階層構造を作成し、継承を実現するための重要な概念です。プロトタイプを活用することで、コードの再利用性や拡張性を高めることができます。初心者の方にとっては最初は少し難しく感じるかもしれませんが、プロトタイプの理解はJavaScriptの基礎を理解する上で重要なステップです。 プロトタイプの種類は？ JavaScriptにおいて、プロトタイプの種類は大きく分けて2つあります。 このように、オブジェクトのプロトタイプとカスタムプロトタイプの2つのプロトタイプがあります。それぞれのオブジェクトは、これらのプロトタイプを参照することで、継承やメソッドの呼び出し、プロパティのアクセスなどを行います。 Object Prototypeの中身は？ Object.prototypeは、すべてのJavaScriptオブジェクトが継承するプロトタイプオブジェクトです。以下に、Object.prototypeが持ついくつかの主要なプロパティとメソッドを示します： これらはいくつかの主要なプロパティとメソッドですが、Object.prototypeは他にもさまざまなプロパティやメソッドを持っています。JavaScriptのオブジェクトは、必要な場合にはObject.prototypeからこれらのプロパティやメソッドを継承し、利用することができます。 プロトタイプを継承している親のオブジェクトを変更する プロトタイプを継承している親のオブジェクトを変更すると、それを継承している子のオブジェクトにも影響が及びます。 具体的には、子のオブジェクトは親のオブジェクトのプロパティやメソッドを継承しています。もし親のオブジェクトのプロパティやメソッドが変更されると、子のオブジェクトもそれを反映します。これは、プロトタイプベースの継承の仕組みによるものです。 例を見てみましょう： 上記の例では、parentオブジェクトを定義し、それを継承してchildオブジェクトを作成しています。childオブジェクトはparentオブジェクトのプロパティを継承しており、child.propertyとしてアクセスすることができます。 その後、parentオブジェクトのpropertyプロパティが変更されます。この変更は、childオブジェクトにも反映され、child.propertyを参照すると新しい値が表示されます。 このように、プロトタイプ継承では親のオブジェクトの変更が子のオブジェクトにも影響を与えます。プロトタイプチェーンを通じてプロパティやメソッドが参照されるため、親オブジェクトが変更されるとそれを継承している子オブジェクトも変更が反映される特性があります。 コンストラクタ関数とは constructor function（コンストラクタ関数）は、JavaScriptにおいてオブジェクトを作成するための特別な関数です。コンストラクタ関数は、その名前が示すように、オブジェクトの初期化（構築）を担当します。 コンストラクタ関数は、通常大文字で始まる名前を持ち、newキーワードを使って呼び出されます。コンストラクタ関数を呼び出すと、新しいオブジェクトが作成され、そのオブジェクトのthisキーワードがコンストラクタ関数のインスタンスにバインドされます。また、コンストラクタ関数内では、thisを通じて新しいオブジェクトにプロパティやメソッドを追加することができます。 以下は、コンストラクタ関数の例です： 上記の例では、Personというコンストラクタ関数が定義されています。このコンストラクタ関数は、nameとageという引数を受け取り、新しいオブジェクトに対してそれぞれの値を設定します。 newキーワードを使ってPersonコンストラクタ関数を呼び出すと、新しいオブジェクトが作成されます。このオブジェクトはjohnという変数に割り当てられ、nameプロパティとageプロパティを持つようになります。 コンストラクタ関数は、同じ構造のオブジェクトを複数作成する際に便利です。また、コンストラクタ関数を使うことで、作成されたオブジェクトの状態を初期化することができます。 Property（プロパティ）とMethod（メソッド） Property（プロパティ）とMethod（メソッド）は、オブジェクト指向プログラミングにおいて重要な概念です。以下にそれぞれの違いを詳しく説明します。 プロパティ（Property）: プロパティは、オブジェクトが持つデータや値を表現します。オブジェクトの特徴や状態を示す変数のようなものです。プロパティは、オブジェクト内でキーと値のペアとして定義されます。プロパティには、数値、文字列、真偽値、関数、配列など、さまざまなデータ型の値を持つことができます。 例えば、以下のようなオブジェクトにおいて、nameとageがプロパティです： プロパティは、オブジェクトに関連付けられたデータを取得したり設定したりするために使用されます。プロパティへのアクセスは、ドット記法（object.property）またはブラケット記法（object[“property”]）を使用して行われます。 メソッド（Method）: メソッドは、オブジェクトに紐付いた関数のことを指します。メソッドは、オブジェクトが実行できる操作や機能を表現します。メソッドは、オブジェクト内で関数として定義されます。 例えば、以下のようなオブジェクトにおいて、greetがメソッドです： メソッドは、オブジェクトに関連付けられた特定のアクションを実行します。他のプロパティやメソッドにアクセスするために、thisキーワードを使用することが一般的です。 メソッドは、オブジェクトの状態を変更するための処理や、オブジェクトが持つデータを操作するための処理などを行います。 プロパティとメソッドは、オブジェクト指向プログラミングにおいてオブジェクトの振る舞いや特性を表現するために使用されます。プロパティはデータを保持し、メソッドはそのデータに対する操作や処理を実行します。 プロトタイプ継承の方法 以下に、new演算子、Object.createメソッド、およびObject.setPrototypeOfメソッドを使用したプロトタイプ継承の例と説明を示します。 1. new演算子を使用したプロトタイプ継承: この例では、ParentとChildという2つの関数を定義しています。Parent関数は親クラス（スーパークラス）を表し、Child関数は子クラス（サブクラス）を表します。 Child関数内で、Parent.call(this, name)を使用して親クラスのコンストラクタを呼び出し、子クラスのインスタンスに親クラスのプロパティを設定します。その後、Child.prototypeをParent.prototypeを継承する新しいオブジェクトに置き換えます。これにより、ChildのインスタンスはParentのメソッドを継承します。 2. … Read more

Nodeで.envファイルを活用しよう

by
.envってなに

環境変数は、プログラムの外部で設定される変数です。主にクラウドプロバイダやオペレーティングシステムを介して設定されます。 Node.jsにおいて、環境変数を利用することで、URLや認証キー、パスワードなどの頻繁に変更されない設定を安全かつ便利に構成することができます。これにより、プログラム内部のハードコーディングされた値を避け、柔軟性とセキュリティを向上させることができます。環境変数を使用することで、プログラムを異なる環境で簡単に設定でき、再利用性も高まります。 またGitHubなどにリポジトリを公開する際はこの.envファイルを.gitignoreファイルに登録して大事なキーなどを公開しないようにすることが一般的です。 環境変数の作成方法 Node.jsでは、環境変数はデフォルトでサポートされており、envオブジェクトを介して利用することができます（このオブジェクトはprocessグローバルオブジェクトの一部です）。 具体的に使ってみるために、NodeのREPL（対話型シェル）で環境変数を自分で作成することができます。そのためには、process.envオブジェクトに直接変数を追加するだけです。 例えば、スーツケースパスワードを保存するための環境変数を作成する場合は、次のように変数に値を割り当てます：process.env.LUGGAGE_COMBO=“12345”。 （ちなみに、環境変数は通常、全て大文字で書かれるのが一般的です。） ただし、アプリケーションでは通常、NodeのREPLを使って環境変数を作成することはありません。実際のアプリケーションで環境変数を作成するには、DotEnvなどのパッケージを使用することが一般的です。これにより、プロジェクト内の環境変数を簡単に管理できます。 NodeのREPL（Read-Eval-Print Loop）は、Node.jsの対話型シェル環境を指します。REPLは、コマンドを入力し、それを評価（実行）、結果を表示し、次のコマンドの入力を待ち受けるというループ形式で動作します。 REPLは、開発者がNode.jsのコードを素早くテストしたり、JavaScriptの試し書きやデバッグを行ったりするための便利なツールです。コマンドラインでnodeと入力すると、デフォルトでREPLが起動します。 REPLは、JavaScriptのコードを直接実行し、その結果を即座に表示するため、コードの試行錯誤や動作確認に役立ちます。また、変数の値を確認したり、関数をテストしたりする際にも便利です。 REPLは、Node.jsの開発やデバッグの初期段階で特に役立つツールですが、実際のアプリケーションの開発では、通常はエディタや開発環境を使用してコードを作成・実行します。 DotEnvの使い方 DotEnvは、軽量なnpmパッケージであり、.envファイルに定義された環境変数を自動的にprocess.envオブジェクトに読み込みます。 DotEnvを使用するには、まずコマンドを使用してインストールします: npm i dotenv。その後、アプリ内で以下のようにDotEnvをrequireして設定します: require(‘dotenv’).config()。 なお、一部のパッケージ（例: Create React App）にはDotEnvが既に含まれている場合があり、クラウドプロバイダによっては環境変数の設定方法が異なる場合もあります。したがって、この記事のアドバイスを実行する前に、使用しているパッケージやプロバイダのドキュメントを確認してください。 .envファイルの作成の仕方 DotEnvをインストールして設定した後、ファイル構造のトップレベルに.envというファイルを作成します。ここに、すべての環境変数をNAME=valueの形式で記述します。例えば、ポート変数を3000に設定する場合は、以下のように記述します: PORT=3000。 .envファイルで複数の変数を宣言することもできます。例えば、以下のようにデータベース関連の環境変数を設定することができます: 文字列を引用符で囲む必要はありません。DotEnvが自動的に処理してくれます。 このファイルを作成したら、認証キーやパスワードなどの機密データが含まれている可能性があるため、GitHubにプッシュしないように注意してください。.gitignoreファイルに追加して、誤って公開リポジトリにプッシュされないようにします。 環境変数にアクセスする方法 環境変数へのアクセスは非常に簡単です。グローバルにアクセスできるprocess.envオブジェクトに格納されているため、process.env.KEYのパターンを使ってアクセスすることができます。 もし環境変数の値を変更する必要がある場合は、単に.envファイルを編集すればOKです。 process is not defined エラー process is not defined エラーは、おそらくブラウザ環境でprocessオブジェクトにアクセスしようとした場合に発生するものです。processオブジェクトは通常、Node.jsの環境で利用されるグローバルオブジェクトですが、ブラウザ環境では直接使用することはできません。 もしブラウザ環境で環境変数を扱う必要がある場合は、以下の方法を検討してください: Viteを使って.envを使う これは2つの環境変数を定義しており、VITE_でプレフィックスが付いているものはVueクライアントアプリからアクセス可能であり、プレフィックスのないものはサーバーサイドのコードからのみアクセス可能です。 Vueでインポートしたい場合はこのように記載しましょう。 Vueのようにクライアントが側で使用したい場合はVITE_を環境変数の頭につけることが必要になります。

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と合わせて是非、活用してみてください。

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

by

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でマウスで画面をドラッグしてスクロールさせる

by
Nuxtマウスでスクロール

お疲れ様です。最近のモバイルではユーザーが横幅に入りきらないボタンやメニューのアイテムをスクロールすることが当たり前ですね。 これを同じようにデスクトップで行おうとしてもブラウザではデフォルトでその機能が付いていません。 ですのでこのように見た目の汚いX軸のスクロールバーを使用するしかありません。 では今日はNuxtを使ってデスクトップでスクロールバーをなしでマウスでドラッグしてスクロールする方法を紹介します。 環境 今日はVueのSSRフレームワークのNuxtを使います。Vueの場合はクライアント側でレンダーされるのでWindowオブジェクトにアクセスできますが、Nuxtはサーバーサイドでレンダーされるのでデフォルトではwindowオブジェクトが使えません。この意味が分からない人は、まずはバニラJSでどうやってマウスを使ってスクロールができるのか知っておきましょう！Nuxtのプロジェクトができていることを想定して進めていきます。 VueUseライブラリ 今日はVueでもよくつかわれるライブラリのVueUseを使います。このuseMouseの機能を使ってVueでも簡単にマウスの現在の位置を手に入れることができるので自作で作るのが面倒な場合はこれが使えそうです。このVueUseのライブラリはSSRのNuxtも対応しています。 ではVueUseをインストールします。 インストールが完了したらNuxtのコンフィグファイルにこのモジュールを登録します。 カーソルの位置を知る ではモジュールを登録したところでグローバルでモジュールが使えるようになります。 これでカーソルが移動するたびにリアクティブに位置を取得できるようになりました。こんな簡単にできるとはすばらしいですね。 クリックイベントを作成 ｄえは下記の様にマウスイベントのクリック、マウスムーブ、マウスアップを作成してスクロールのポジションを変更していきます。 これでエレメント内でマウスクリックするとカーソルがつかむイラストに変わることが分かりました。 さらにつかんでいる間にマウスを移動させることでスクロールが移動できるようになりました。 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操作ができるアプリを作成しよう

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