プログラミング言語

axiosとは axiosは、JavaScriptで使用されるHTTPクライアントライブラリです。主にブラウザとサーバーの間でデータを送受信するために使用されます。axiosはPromiseベースのAPIを提供し、非同期でHTTPリクエストを行うことができます。 axiosを使用すると、GET、POST、PUT、DELETEなどのさまざまなHTTPメソッドを使ってリクエストを送信し、サーバーからのレスポンスを取得することができます。また、リクエストやレスポンスのヘッダーの設定、データの送信、認証の追加など、さまざまなHTTP操作を容易に行うことができます。 axiosは、ブラウザ環境だけでなく、Node.js環境でも使用することができます。これにより、フロントエンドとバックエンドの両方で同じコードを使用してHTTP通信を行うことができます。 axiosは非常に人気のあるライブラリであり、シンプルで使いやすいインターフェースを提供しています。そのため、多くの開発者がaxiosを選択し、JavaScriptプロジェクトでHTTP通信を行うために使用しています。 axiosのインストール axiosをインストールするには、以下の手順を実行します。 これでaxiosがインストールされました。 Node.jsの場合、npm install axiosコマンドを実行すると、プロジェクトのnode_modulesディレクトリにaxiosがインストールされます。その後、requireもしくはimportステートメントを使用してaxiosを使用することができます。 ブラウザの場合、axiosのCDNを使用すると、ブラウザでaxiosを直接利用することができます。CDNを使用する場合、axiosはグローバルオブジェクトaxiosとして利用可能になります。 axiosの基本的な書き方 では、JSONPlaceholderというテスト用のフェイクAPIを使用してサンプルのコードを書いていきましょう。 POSTリクエストの例: これらのコードは、axiosを使用して非同期のHTTP通信を行う基本的な例です。GETリクエストとPOSTリクエストのそれぞれの場合に、レスポンスデータを取得するためのコールバック関数が指定されています。 コードを綺麗に書くために まずは、このコードを見てください。 axiosを使う際には必ずしもasyncを使用する必要はありません。axios自体はPromiseベースの非同期処理をサポートしており、.then()と.catch()メソッドを使用して非同期なレスポンスを処理することができます。 この例では、.then()メソッドと.catch()メソッドを使用して、非同期処理の結果を取得しています。コールバック関数のネストが深くなるため、コードが読みにくくなります。 しかし、下記のようにasync/awaitを使用することでコードが見やすくなることが分かります。 async/awaitを使用することで、非同期処理のフローがフラットになり、読みやすくなります。エラーハンドリングもtry…catchブロック内で一箇所にまとめることができます。 上記のコードをasync/awaitを使った例： ですので、axiosを使用する際には、asyncキーワードを必ずしも使用する必要はありません。async/awaitを使用するか、.then()メソッドを使用するかは、コードの可読性やスタイルに合わせて選択することができます。 カスタムヘッダーとは HTTPリクエストを送る際、上記のPOSTでサーバーに送るデータはHTTPリクエストのボディに追加しています。また、HTTPリクエストにはヘッダーという箇所があり、承認の際に使用するトークンなどを付属させることができます。 以下は、axiosを使用してHTTPリクエストのヘッダー処理をするためのサンプルコードです。 上記のコードでは、axios.get()およびaxios.post()メソッドの第二引数として、オプションのオブジェクトを渡しています。このオブジェクト内のheadersプロパティを使用して、カスタムヘッダーを設定します。 例えば、Authorizationヘッダーにはトークンを指定し、Content-Typeヘッダーにはリクエストのコンテンツタイプを指定しています。これらのヘッダーはAPIの要件に合わせてカスタマイズすることができます。 このように、headersプロパティを使用してヘッダーを設定することで、axiosを使ってHTTPリクエストのヘッダー処理を簡単に行うことができます。 Bearerとは 実際に認証トークンを使い始めるとHTTPヘッダーのAuthorizationの部分にBearerのトークンを付ける機会があると思います。 Bearerは、認証スキーム（Authentication Scheme）の一種です。Bearerスキームは、トークンベースの認証方式の一部として使用されます。 Bearer認証では、APIエンドポイントへのアクセス時にクライアントが認証トークンを提供します。このトークンは、クライアントが認証されたユーザーであることをサーバーに示すために使用されます。 Bearerトークンは、一般的にはOAuthやJSON Web Token（JWT）などのプロトコルや仕様に基づいて生成されます。トークンはクライアントによって保持され、リクエストヘッダーのAuthorizationフィールドにBearerと共にトークンが含まれて送信されます。 例えば、以下はAuthorizationヘッダーのBearerトークンを使ったHTTPリクエストの例です： 上記の例では、Bearerスキームに続いて実際のトークンが含まれています。サーバーはこのトークンを検証し、リクエストを認証して適切な応答を返します。 Bearerトークンを使用することで、APIへのアクセスを制御し、認証されたユーザーのみがリソースにアクセスできるようにすることができます。トークンは一定の期間で有効期限が切れる場合があり、トークンの取得やリフレッシュには対応する認証プロトコルや仕様に基づいた手続きが必要です。 注意点として、Bearerトークンはセキュリティ上の重要な情報であるため、他人に漏らさないように注意する必要があります。また、HTTPSなどのセキュアな通信プロトコルを使用してトークンを送信することが推奨されます。 axiosを使うべきではない場面はあるか axiosは非常に人気のあるHTTPクライアントライブラリですが、特定の場面では使用を控えるべきです。 以上のような場面では、axiosの代わりに他の適切なライブラリや手段を検討することが重要です。選択肢を比較し、プロジェクトのニーズや制約に応じて最適なツールを選ぶことが良い結果を生みます。

※ChatGPTで使用できるAPIは有料のサービスになります。クレジットカードを登録する必要があるので必要に応じて自己責任で進めてください。 ChatGPTとは ChatGPTは、OpenAIが開発した自然言語処理のモデルです。ChatGPTは、言語の理解や生成に関するタスクを行うことができ、対話型のコンテキストで人間のような会話を行うことができます。 ChatGPTは、GPT（Generative Pre-trained Transformer）というモデルのバリエーションです。GPTは、大規模なテキストデータセットを使用してトレーニングされたニューラルネットワークモデルであり、文章の言語モデリングや文章生成に非常に優れた性能を持っています。ChatGPTは、このGPTモデルを対話型の環境に適応させたものです。 ChatGPTは、ユーザーとの対話を通じて質問に答えたり、情報を提供したり、一般的な会話をしたりすることができます。ユーザーの入力に基づいて適切な応答を生成するため、コンテキストを理解し続けることができます。ただし、ChatGPTは、対話に関する事前の知識や特定のトピックの知識を持っているわけではありません。そのため、一部の質問や要求に対しては、正確な回答や適切な対応ができない場合もあります。 ChatGPTは、様々な用途に活用することができます。ユーザーサポート、情報提供、クリエイティブな文章生成、言語学習、エンターテイメントなど、多岐にわたる場面で利用されています。ただし、注意点として、ChatGPTは人工知能であり、完全な理解力や意識を持っているわけではないことを認識しておく必要があります。 日本でChatGPTを使用している会社 日本でもChatGPTを利用している会社はいくつかあります。以下にいくつかの例を挙げますが、これらはあくまで一部の例であり、他にも利用している会社は存在します。 これらの会社は、ChatGPTを使用して顧客サービスの向上や効率化を図ることを目的としています。ChatGPTを活用することで、自動化された対話システムを導入し、迅速かつパーソナライズされた対応を提供することが可能となります。 ChatGPTの使い方 ChatGPTを使うためには、以下の手順に従うことが一般的です。 以上が一般的なChatGPTの使い方の手順です。ただし、具体的な実装や利用方法は、選んだプラットフォームやツールによって異なる場合があります。 API KEYの取得 OpenAIのAPIキーを取得する手順は以下の通りです。 APIキーは機密情報ですので、他人と共有せず、安全な場所に保管してください。APIキーを持っていれば、OpenAIのAPIエンドポイントにアクセスしてChatGPTを利用することができます。

正規表現を使う事でできること 正規表現を使う事で、テキストデータのパターンマッチングや検索、置換、バリデーションなど、さまざまなことができます。以下に正規表現の主な用途をいくつか示します: 正規表現は非常に柔軟で強力なツールであり、テキスト処理やパターンマッチングにおいて幅広く活用されています。しかし、正規表現の使用は適切な文脈と適切な知識に基づいて行われる必要があります。 正規表現とは 正規表現（正規表現、regexとも呼ばれる）は、開発者が文字列をパターンに一致させたり、サブマッチの情報を抽出したり、単純に文字列がそのパターンに適合するかどうかをテストしたりするためのものです。正規表現は多くのプログラミング言語で使用されており、JavaScriptの構文はPerlに触発されています。 概要 正規表現は形式言語理論における重要な概念です。正規表現は、可能性のある無限の文字列の集合（言語と呼ばれる）を記述する方法です。正規表現は、次の機能を必要とします。 有限のアルファベット（英語のアルファベットの26文字や、Unicode文字セット全体など）を想定すると、上記の機能ですべての正規言語を生成することができます。もちろん、「10桁の数字」や「スペースではない文字」といったパターンは、非常に煩雑になることが多いため、JavaScriptの正規表現には、以下で紹介する多くの省略記法が含まれています。 注：JavaScriptの正規表現は実際には正規ではありません。バックリファレンスの存在により（正規表現は有限の状態を持つ必要があります）、正規ではありません。ただし、それらは非常に便利な機能です。 正規表現の作成 正規表現は通常、パターンをスラッシュ（/）で囲むことによってリテラルとして作成されます。 正規表現はRegExp()コンストラクタを使用しても作成できます。 これらにはランタイム上の違いはありませんが、パフォーマンス、静的解析可能性、およびエスケープ文字の作成のしやすさに関連する問題に影響を与える場合があります。 正規表現フラグ フラグは、正規表現の解釈方法や入力テキストとの相互作用方法を変更できる特別なパラメータです。各フラグは、RegExpオブジェクト上の1つのアクセサプロパティに対応します。 以下のセクションでは、構文の性質に基づいてグループ化された、利用可能な正規表現構文のすべてをリストしています。 フラグ 説明 プロパティ d 部分一致のためのインデックスを生成します。 hasIndices g グローバル検索を実行します。 global i 大文字と小文字を区別しない検索を行います。 ignoreCase m ^および$が改行文字に一致するようにします。 multiline s .が改行文字に一致するようにします。 dotAll u “Unicode”。パターンをUnicodeコードポイントのシーケンスとして扱います。 unicode y “sticky”検索を実行し、対象の文字列の現在の位置から一致を開始します。 sticky フラグを使用した正規表現のサンプルコード： 上記のコードでは、それぞれのフラグに基づいて正規表現パターンを評価しています。matchメソッドやtestメソッド、execメソッドを使用して、対象の文字列においてパターンに一致する部分を取得したり、一致するかどうかをテストしたりしています。 アサーション アサーションは、指定した位置で文字列が特定の条件を満たすかどうかをテストする構造ですが、文字を消費しません。アサーションは数量化できません。 入力境界アサーション：^、$ 現在の位置が入力の先頭または末尾であること、またはmフラグが設定されている場合は行の先頭または末尾であることをアサートします。 先読みアサーション：(?=…)、(?!…) 現在の位置の後に特定のパターンが続くかどうかをアサートします。 後読みアサーション：(?<=…)、(?<!…) 現在の位置が特定のパターンに先行しているかどうかをアサートします。 単語境界アサーション：\b、\B 現在の位置が単語境界であることをアサートします。 各アサーションを使用した正規表現のサンプルコード： 上記のコードでは、各アサーションを含む正規表現パターンを使用して、対象の文字列に対してパターンマッチングを行っています。それぞれのアサーションに基づいて、文字列内での位置や条件に一致するかどうかをテストしています。 アトム … Read more

classとは JavaScriptのclassは、オブジェクト指向プログラミング（OOP）の概念を実現するための構文です。クラスは、同じプロパティやメソッドを持つオブジェクトの設計図となるものです。 classキーワードを使用してクラスを宣言し、そのクラス内でプロパティやメソッドを定義します。クラス内で定義されたメソッドは、そのクラスから作成されたオブジェクト（インスタンス）で使用することができます。 以下に、JavaScriptのclassの基本的な構文を示します。 上記の例では、MyClassというクラスを定義しています。constructorメソッドは、newキーワードを使用してインスタンスを作成する際に呼び出される特別なメソッドです。その他のメソッドは、クラスから作成されたインスタンスで呼び出すことができます。 クラスからインスタンスを作成するには、newキーワードを使用します。 myObjectはMyClassのインスタンスであり、MyClassのメソッドを呼び出すことができます。 クラスは、コードの再利用性やメンテナンス性を向上させるための重要な機能です。また、クラスの継承やポリモーフィズムなどのOOPの概念を利用することもできます。 巻き上げ (ホイスティング) JavaScriptのclass定義は、通常の関数宣言とは異なり、巻き上げ（ホイスティング）の動作が異なります。 巻き上げ（ホイスティング）とは、コードの実行前に関数や変数の宣言がスコープの先頭に移動する動作のことを指します。通常の関数宣言では、関数は巻き上げられて関数の宣言が行われる前に呼び出すことができます。 しかし、classの場合は、クラスの宣言自体は巻き上げられますが、クラスのメソッドは巻き上げられません。つまり、クラスを宣言する前にクラスのコンストラクタやメソッドを呼び出すことはできません。 以下に、classの巻き上げの例を示します。 上記の例では、MyClassのインスタンスを作成する前にnew MyClass()という行があります。通常の関数ならば、関数の宣言が巻き上げられるため、これは問題ありません。しかし、classの場合は、MyClassが宣言される前にMyClassのインスタンスを作成しようとすると、エラーが発生します。 classの巻き上げの挙動に注意する必要があります。クラスを使用する場合は、クラスの宣言よりも後ろでクラスのインスタンスを作成するようにしてください。 クラス式 クラス式は、名前を持つ場合と持たない場合の2つの形式で定義できます。 名前を持たないクラス式の場合、クラス自体には名前がありません。例えば、以下のように定義されるクラスは無名クラス式です。 無名クラス式の場合、Rectangleという変数に代入されたクラスオブジェクトを参照することができます。また、クラスオブジェクトのnameプロパティを通じて、クラスの名前にアクセスすることもできます。 一方、名前を持つクラス式の場合、クラス自体に名前があります。以下のように定義されるクラスは名前付きクラス式です。 名前付きクラス式では、クラス内部でその名前を使用することができます。また、クラスオブジェクトのnameプロパティを通じて、クラスの名前にアクセスすることもできます。 名前付きクラス式は、クラス内で自己参照する場合やデバッグ情報などで使用されることがあります。一方、無名クラス式は、一度だけ使用する小さなクラスを定義する際などに便利です。 classで使用するconstructor() constructor()は、JavaScriptのclass内で使用される特別なメソッドです。クラスから新しいインスタンス（オブジェクト）を作成する際に、newキーワードと共に自動的に呼び出されます。constructor()メソッドは、インスタンスの初期化処理を行うために使用されます。 以下に、constructor()メソッドの詳細と使い方を説明します。 以下は、constructor()メソッドを使用した例です。 上記の例では、Personクラスのconstructor()メソッドが定義されています。constructor()メソッドは2つの引数を受け取り、nameとageというインスタンス変数を初期化します。console.log()文は、constructor()メソッドが呼び出されたことを示すために表示されます。 classを定義する際に必ずconstructorが必要か classを定義する際には必ずしもconstructorを記述する必要はありません。constructorは、クラスがインスタンス化されるときにインスタンスの初期化を行うために使用される特別なメソッドです。 constructorが定義されていない場合、classはデフォルトの空のconstructorを持つことになります。この場合、インスタンス化されたオブジェクトは特別な初期化処理を持たず、classのプロパティやメソッドのみを利用できます。 以下はconstructorを省略した場合の例です： この場合、MyClassのインスタンスを作成するときには引数を指定せずに作成することができます。ただし、インスタンスが作成される際には自動的に空の初期化処理が実行されます。 constructorが不要な場合は、class内のプロパティやメソッドのみを使用する場合に適しています。一方、インスタンスの初期化が必要な場合や特定の設定を行いたい場合には、constructorを定義して初期化処理を記述する必要があります。 したがって、constructorはclass定義内で必須ではなく、必要に応じて使用することができます。 constractorを使用しない方法 「constructor」を使用せずに、コードを書き直す例を以下に示します。 この例では、constructorを使用せずにインスタンス変数を直接クラスに定義し、メソッドを使用して値を設定します。setNameメソッドとsetAgeメソッドを使用して名前と年齢を設定し、introduceメソッドを使用して情報を出力します。 constructorを使用しない場合、インスタンス作成後にメソッドを呼び出して値を設定する必要があります。また、インスタンス変数は明示的に宣言する必要があります。 この方法では、初期化処理がconstructor内に集約されないため、コードの可読性や保守性が低下する可能性があります。constructorを使用することで、インスタンスの初期化がより明示的かつ一貫した方法で行われるため、一般的には推奨されます。ただし、特定のケースではconstructorを使用せずにクラスを定義することも可能です。 classの登場 classは、ECMAScript 2015（またはES6）で導入されました。ES6は、JavaScriptの最新の標準規格であり、2015年にリリースされました。 ES6の導入により、classキーワードを使用してクラスベースのオブジェクト指向プログラミングがサポートされるようになりました。これにより、クラス、コンストラクタ、メソッド、継承などのオブジェクト指向の概念をより直感的に利用できるようになりました。 それ以前のJavaScriptでは、プロトタイプベースのオブジェクト指向プログラミングが主流であり、クラスの概念はありませんでした。しかし、ES6以前でもオブジェクト指向のパターンを実現するために、関数やプロトタイプを使用する方法がありました。 ES6の導入により、class構文が追加されたことで、より直感的で明瞭なクラスベースのオブジェクト指向プログラミングが可能となりました。この機能の導入により、JavaScriptの開発者はより効果的にオブジェクト指向のコードを書くことができるようになりました。 classをfunctionに置き換える方法 上記で紹介したように古いやり方で同じことができます。おまけとして理解しておくくらいでOKです。 classを使用せずにfunctionで同じコードを書き換えると以下のようになります： 上記のコードでは、classの代わりにfunctionを使用してPerson関数を定義しました。functionの場合、コンストラクタとして使用する関数の名前は大文字で始める慣例があります（パスカルケース）。 Person関数内部では、thisキーワードを使用してインスタンス変数を初期化します。thisは、新しく作成されるインスタンスを指します。console.log()文は、インスタンスが作成されたことを示すために表示されます。 インスタンスの作成にはnewキーワードを使用し、Person関数に適切な引数を渡します。インスタンス変数には、person1.nameやperson1.ageのようにアクセスできます。 classを使ったモジュールの例 以下は、classを使用して簡単なモジュールを作成する例です。このモジュールは、数値の加算と乗算を行う機能を提供します。 … Read more

ライブラリとモジュールの違い ライブラリとモジュールは、両方ともコードの再利用を促進するために使用される概念ですが、意味や使用方法においていくつかの違いがあります。 ライブラリ: モジュール: 要約すると、ライブラリは一般的な問題の解決に使用される再利用可能なコードの集まりであり、独立して使用されることが意図されています。一方、モジュールはコードの組織化と再利用を容易にするための小さな単位であり、プロジェクト内の特定の範囲や機能に焦点を当てています。 モジュールとは JavaScriptのモジュールは、先ほども説明したように再利用可能なコードブロックをカプセル化し、他のJavaScriptファイルから簡単にインポートまたはエクスポートできるようにする機能です。以下に、モジュールの作り方と使用方法の基本的な手順を示します。 これが基本的なJavaScriptモジュールの作り方と使用方法です。モジュールを使用することで、コードの再利用性や保守性を向上させることができます。詳細な機能やモジュールの分割方法については、ECMAScriptモジュールに関するドキュメントを参照してください。 classとfunctionのどちらを使ってモジュールを作るべき？ classとfunctionのどちらを使用してモジュールを作成するかは、が達成したい目的やプロジェクトの要件によります。それぞれのアプローチには異なる特徴があります。 classを使用する場合: 例: functionを使用する場合: 例: 上記の例では、クラスベースのモジュールではMyModuleという名前のクラスをエクスポートし、関数ベースのモジュールでは複数の関数をエクスポートしています。 どちらのアプローチを選ぶかは、プロジェクトのニーズや開発スタイルによるものです。一般的には、オブジェクト指向の原則や状態の管理が必要な場合はclassを、シンプルな関数やヘルパー関数を作成する場合はfunctionを使用することが一般的です。 classを使って今日の日付を出力できるモジュールの例 以下は、classを使用して今日の日付をmm/dd/yyyyの形式で出力するモジュールの例です。 この例では、DateFormatterという名前のクラスを作成しています。クラスのコンストラクタでは、現在の日付を取得してthis.dateに格納します。そして、getFormattedDateメソッドを使用して日付をmm/dd/yyyyの形式で取得します。padZeroメソッドは、一桁の値を2桁にパディングするためのヘルパーメソッドです。 このモジュールを使用する場合は、以下のようになります: モジュールをインポートして、DateFormatterクラスのインスタンスを作成し、getFormattedDateメソッドを呼び出すことで、今日の日付がmm/dd/yyyyの形式で取得できます。 モジュールのファイル名の付け方にルールはあるか モジュール名とファイル名の付け方にはいくつかの一般的なルールとベストプラクティスがありますが、厳密な規則はありません。以下にいくつかの一般的なガイドラインを示します: これらは一般的なガイドラインであり、プロジェクトやチームのスタイルガイドに従うことも重要です。また、特定の開発フレームワークや環境では、さらなる命名規則が存在する場合があります。開発者コミュニティの慣習やプロジェクトのコーディングスタイルを参考にすることをおすすめします。 参考にできるモジュールのGitHubリポジトリ 以下は、JavaScriptのモジュールのGitHubリポジトリのいくつかの例です。これらのリポジトリは、高品質なモジュールの設計やベストプラクティスの参考になるかもしれません。 これらのリポジトリは、多くの開発者によって信頼されており、ソフトウェア開発におけるモジュールの設計や実装のベストプラクティスを反映しています。それぞれのリポジトリを探索し、コードの構造やドキュメンテーションを調べることで、良質なモジュールの実装について学ぶことができます。 classベースのライブラリの例 以下は、GitHub上でclassを使用して作成されたモジュールのいくつかの例です。 これらのリポジトリは、クラスを使用して複雑な機能やコンポーネントを実装しています。それぞれのリポジトリを調査して、クラスの設計や機能の実装方法について学ぶことができます。 functionベースのライブラリの例 以下は、GitHub上で関数ベースのモジュールが含まれるいくつかのリポジトリの例です。 これらのリポジトリは、関数を中心にしたモジュールやユーティリティを提供しています。それぞれのリポジトリを調査し、関数の実装方法やモジュールの構造について学ぶことができます。 モジュールの探し方 これらのリポジトリでは、実際に使えるモジュールがどのフォルダに含まれているかはリポジトリの構造やドキュメンテーションによって異なります。一般的には、以下の場所でモジュールを見つけることができます。 これらのリポジトリのGitHubページやドキュメンテーションを調べることで、モジュールの実際の使用方法や提供される関数やクラスについて詳細を確認することができます。各リポジトリには一般的にドキュメンテーションが提供されているため、そこから必要な情報を見つけることができます。 まとめ モジュールは、プログラミングの世界で非常に重要な概念です。モジュールは、コードの再利用性、保守性、可読性を向上させるための強力なツールです。 モジュールを学ぶと、コードの分割、関心の分離、インターフェースの設計など、ソフトウェアの設計とアーキテクチャにおける重要なスキルを身につけることができます。モジュールは、大規模なアプリケーションの構築やチームでの協力開発において不可欠です。 モジュールを使いこなすことは、より効率的なコーディングとソフトウェアの開発において重要なスキルです。積極的に学習し、実際のプロジェクトでの活用を試みることで、より良いコードを書くことができるでしょう。

JavaScriptで緯度と経度のデータから住所のデータを取得するには、逆ジオコーディング（reverse geocoding）と呼ばれる技術を使用します。逆ジオコーディングは、緯度と経度の情報を基に、その位置に関連する住所や地名などの情報を取得するプロセスです。 JavaScriptで逆ジオコーディングを実行するには、次の手順を実行します。 以下に、Google Maps Geocoding APIを使用した逆ジオコーディングの例を示します。 下記の記事を参考にしてMAP APIを取得してください。 上記のコードでは、latとlngに緯度と経度のデータを設定し、Google Maps Geocoding APIのエンドポイントにリクエストを送信しています。APIキーを適切な値に置き換える必要があります。レスポンスデータから取得した住所情報を利用することができます。 これで下記の結果を得ることができました。 コードの例 下記ではVueのフレームワークを使ってユーザーが入力した緯度と経度から市、県、国名を表示させるフォームを紹介します。 実際に緯度と経度から住所を返す関数はfetchAddress()の部分になります。 ※VuetifyのUIコンポーネントを使用しています。