Vue3 + TypeScript 開発環境で 環境変数 を利用する方法 (.env ファイル)

Vue.js アプリケーション を開発するにあたり、 パスワード や API Key といった 慎重に取り扱うべき データ を用いる局面が多々あります。 本記事では Vue3 + TypeScript + Vite 環境 で 環境変数 を用いることで この問題に対処する方法を紹介していきます。 また、用途別に環境を分けている場合にも有効な方法でもあります。 macOS: 12.3 vue: 3.2.31 typescript: 4.5.5 vue3 API: Composition API Vite 環境変数定義用 ファイル の作成 最初に Vite 環境変数 定義用の ファイル を作成していきます。 環境変数 を定義するための ファイル は vite.config.ts に記載することで、任意の場所に配置できますが、ここでは デフォルト の Path である プロジェクト の ルート ディレクトリ 直下 に作成していきます。 .env.[mode].local ファイル 開発環境 や 本番環境 といった環境別 ( Vite では Mode と読んでいます) に 環境変数 を使い分ける ニーズ に応えるため Vite では 環境変数 を格納する ファイル 名 を使い分ける ソリューション を提供しています。本記事では 開発環境 (development mode) を例に取り上げ進めていきます。 開発環境 でのみ有効な 環境変数 定義用 ファイル を作成するには .env の後に Mode 名 を追加することで実現可能です。 さて Mode 名は何を指定すれば良いでしょうか? Default: ‘development’ for serve, ‘production’ for build https://vitejs.dev/config/#mode 上記の通り、 npm run dev … Read more

Vue3 + TypeScript プロジェクト から Firestore に接続する サンプル

Vue3 + TypeScript プロジェクト で Firebase の リアルタイム DB である Firestore に アクセス して データ を取得する サンプル を紹介します。 本記事では、事前に Firestore に格納しておいた データ を Vue アプリケーション で表示してみようと思います。 なお、 今回は例として、開発環境で実装していきます。 vue: 3.2.33 firebase: 9.6.11 firebase-admin: 10.1.0 準備 Firestore に作成済みの データ Firestore には 以下のようなデータを作成してあります。 この データ を Vue プロジェクト で読み出して 画面に表示する アプリケーション を作っていきます。 プロジェクト作成 (Vue3 + TypeScript) まずは、Vue3 + Typescript でプロジェクトを作成します。 Vue3 プロジェクト に Firebase SDK を インストール 以下の コマンド で Firebase SDK を インストール していきます。 Firebase 接続設定情報 を Vite 環境変数に登録 Firebase に接続するためには API Key などの接続設定情報が必要になります。 これらの取得方法については 公式サイト を参照してください。この 接続設定情報 を Firebase SDK に渡すことで、Vue プロジェクト から Firebase に アクセス することができるようになります。 このように Firebase への アクセス は簡単に実現できるのですが、 逆に言うと、これらの接続設定情報 を悪用されてしまうと、第三者が簡単にあなたの課金設定済みアカウントを用いることもできてしまいます。そういった事態を避けるためにも、 Firebase 接続設定情報 は git に登録しないことが望ましいケースが多いと思います。 ここでは … Read more

Vue3 + TypeScript で Mapbox GL JS を使って マップ を表示する サンプル

Vue3 + TypeScript で Mapbox の マップ を表示する サンプル を紹介します。 create-vue で作成した プロジェクト に Mapbox の 公式 JavaScript クライアント ライブラリである Mapbox GL JS を組み入れることで 簡単に マップ を実装することができます。 一方で Vue3 + TypeScript 環境向けの サンプル はあまり見受けられません。 多少 コツ のようなものも必要でしたので、 本記事で合わせて紹介していきます。 macOS: 12.3 vue: 3.2.31 typescript: 4.5.5 mapbox-gl: 2.7.1 @type/mapbox-gl: 2.6.3 Vue3 + TypeScript プロジェクト の作成 それでは最初に 今回使用する Vue3 + TypeScript の プロジェクト を以下の要領で作成します。 create-vue で プロジェクト 作成 TypeScript のみ追加 なお プロジェクト 作成の詳細は以下の記事を参考にしてください。 Mapbox GL JS の インストール mapbox-gl の インストール 次に 作成した プロジェクト に Mapbox GL JS を 公式 サイト の手順 に従って インストール していきます。 以下の ように npm install コマンド を実行します。 無事 インストール が完了したら、 package.json に 以下のように mapbox-gl が追加されていることを確認することができます。 Type/mapbox-gl の インストール 次に … Read more

[ Vue3 + TypeScript ] 子コンポーネント で実装した ドロップダウン で選択した内容を リアクティブ に 親コンポーネント と 連携する方法

リアクティブ な アプリケーション を 再利用可能で 独立した コンポーネント と言う概念を使ってが容易に実装できるのが Vue.js の利点の一つだといえます。 この コンポーネント の利点を活かすために 各 コンポーネント をあまり大きなサイズ にしないことが一つの ポイント になってきます。 一方で 単一の コンポーネント 内部で リアクティブ に実現できていた機能を コンポーネント に分割して実現しようとすると コンポーネント 間で データ のやりとりを実現する必要があります。  本記事では 通常 ツリー 構造となる コンポーネント の 「親 コンポーネント から 子 コンポーネント」、 「子 コンポーネント から 親 コンポーネント」 のそれぞれについて リアクティブ な データ のやりとりを TypeScript で実現する方法について ドロップボックス (Select) を例に用いて 整理していきます。 macOS: 12.3 vue: 3.2.31 typescript: 4.5.5 vue3 API: Composition API bootstrap: 5.1.3 Vue3 + TypeScript + Bootstrap5 プロジェクトの準備 今回の記事で使用するプロジェクトを用意します。 npm int [email protected] を使ってプロジェクト作成 TypeScriptを有効にする bootstrap 5 をインストール 参考記事: 親 コンポーネント (App.vue) create-vue で作成された プロジェクト に存在する App.vue を 親 コンポーネント として利用します。 以下のように 子 コンポーネント として 新規に作成する Child.vue を インポート し それを template で呼び出す形にします。 style … Read more

Vue3 + TypeScript + Bootstrap 5 で ボタン を設置する

こちらの記事で Vue CLI で作成した Vue3 プロジェクト で Bootstrap 5 を用いて ボタン を実装 する方法を紹介しましたが、 今回は こちらの記事で作成した Vue3 + TypeScript の環境での Bootstrap5 での ボタン 実装 について紹介していきます。  結論からいうと TypeScript 環境においても JavaScript 環境においても Bootstrap5 を利用する方法は特に違いはありませんが、 手順など参考にしていただければと思います。 macOS: 12.3 vue: 3.2.1 typescript: 4.5.5 bootstrap: 5.1.3 プロジェクト 作成 Vue3 プロジェクト 以下の関連記事で作成した方法と同様のものを使います。 プロジェクト 作成の ポイント は以下の通りです。 Vue CLI ではなく “npm init [email protected]” コマンド (create-vue) で vue3 プロジェクト を作成 ✔ Add TypeScript? で Yes を選択 プロジェクト の作成についての詳細は以下を参照してください。 Bootstrap 5 の インストール Vue 3 プロジェクト が作成できたところで、引き続き Bootstrap 5 を プロジェクト に インストール していきます。 以下のように npm install コマンド を実行することで 最新版を インストール することができます。 npm install 完了後 Vue 3 プロジェクト 内の package.json ファイル を確認すると dependencies に bootstrap が追加されていることが分かります。 今回の タイミング では 5.1.3 … Read more

TypeScript コンポーネント を Vue3 プロジェクト に追加

こちらの記事で TypeScript を有効にした プロジェクト を作成しました。 今回は Vue3 プロジェクト に TypeScript コンポーネント を追加して 実際に Vue.js のなかで TypeScript を使っていきたいと思います。 macOS: 12.1 vue: 3.2.1 typeScript: 4.5.5 Vue3 における TypeScript コンポーネント 必須要素 TypeScript の コンポーネント とはいえ Vue.js の中では 素の JavaScript 同様に 拡張子 を vue として コンポーネント を作成していく形になります。 本記事では src / components ディレクトリ に TypeScriptSample.vue という ファイル を作成していきます。 vue ファイル に含める要素は JavaScript 同様に以下です。 template タグ script タグ style タグ JavaScript では template -> script -> style の順番で記載することが多かった印象ですが、 TypeScript では script -> template -> style と HelloWorld.vue 記載されています。 本 ブログ でもその形式で進めたいと思います。 なお スタイルガイド によると style タグ が最後であれば template と script の順番はどちらが先でもよく プロジェクト 内で一貫していれば良さそうです。 JavaScript と異なる点としては 以下の2点が挙げられます。 script タグ に lang=”ts” を指定 script タグ 内で defineComponent() を記載 … Read more

TypeScript に対応した Vue 3 プロジェクト の作成

Vue.js では JavaScript だけでなく TypeScript を サポート しています。 以下の グラフ でもわかるように、 素の JavaScript は長年 人気 No.1 の座を維持していますが、 ここ数年で TypeScript の人気が上昇してきています。 引用元: GitHub Octoverse TypeScript は JavaScript の雰囲気をもつものですが、 以下のような 特徴 が人気の要因かもしれません。 JavaScript の機能を サポート している 高度な型 システム IDE の サポート こういった背景もあり、本記事では TypeScript を用いて Vue プロジェクト を作成していこうと思います。 なお Vue.js では 2022 年 2 月 より それまでの Vue2 に代わり Vue3 が デフォルト となっていますので、本記事でも Vue3 で進めていきたいと思います。 macOS: 12.1 vue: 3.2.1 typescript: 4.5.5 Vue 3 プロジェクト 作成 Quick Start | Vue.js の手順を参考に、 create-vue を用いて Vue3 プロジェクト を作成していきます。  以前は Vue CLI の vue create コマンド を利用することが推奨されていましたが Vue CLI は 既に メンテナンス モード となっているため create-vue が推奨となっています。 npm init [email protected] コマンド を実行すると対話式で プロジェクト 名称 や 言語や フレームワーク の … Read more

[Swift] プロトコル の メリット とその使いどころ

eye-catch

Swift や SwiftUI を用いて開発を進めていく中で、 Swift 固有のお作法や機能に直面することもあります。 プロトコル もその一部ではないでしょうか。「変数」「構造体」「クラス」といった他の オブジェクト 志向言語にも同様の概念がある一方で プロトコル については 他の言語ではあまり馴染みがないかもしれません。 本記事では プロトコル とはどういったもので、 どのような メリット や 活用事例 があるのかを 具体例を使って紹介していこうと思います。 Swift: 5.5 Swift Community の プロトコル に関する記載 まず Swift community での プロトコル の定義 を確認してみます。 A protocol defines a blueprint of methods, properties, and other requirements that suit a particular task or piece of functionality. The protocol can then be adopted by a class, structure, or enumeration to provide an actual implementation of those requirements. Any type that satisfies the requirements of a protocol is said to conform to that protocol. プロトコル は、特定の タスク や機能の一部に適した メソッド 、 プロパティ 、およびその他の必要な要素を定義するものです。 クラス 、 構造体 、列挙体 を適用することができ、これらを使って構成することができます。 また プロトコル の必要事項を満たしている型は、その プロトコル に準拠していると呼ぶことができます。 … Read more

[ SwiftUI ][ Mapbox ] iOS アプリ で Mapbox 地図に マーカー ピン を立てる

eye-catch

関連する 前回の記事で SwiftUI を使って iOS 上に Mapbox の地図を表示することができたので、次の ステップ として地図に マーカー (ピン) を立てて、特定の地点を指し示すようにしてみたいと思います。 Xcode: 13.2.1 iOS: 15.2 Swift: 5.5 mapbox-maps-ios: v10.2.0 Mapbox 公式 ドキュメント の説明 Mapbox 公式 ドキュメント には Example として、以下のように コペンハーゲン に マーカー を表示する サンプル が掲載されています。まずは、その サンプル の内容を確認していくことにします。 引用元: https://docs.mapbox.com/ios/maps/examples/point-annotation/ UIViewController 前回の記事同様、 公式 サイト で提供されているのは UIViewController のものですので、 SwiftUI で扱うためには UIViewControllerRepresentable を用いる必要があります。 考え方は前回の記事と同様ですので、詳細については前回の記事を参考にしてください。 MapBox MapView の生成 サンプル で紹介されている ViewController では最初に マップ の中心を指定し、 マップ を生成しています。 ただし、このままでは マップ を表示することができないため、以下のように修正していきます。 ”Your Access Token” には有効な アクセストークン を指定してください。 myResourceOptions として アクセストークンをセット MapInitOptions に resourceOptions パラメータ を追加 ここで、いくつか馴染みの薄そうな アイテム について補足していきます。 CLLocationCoordinate2D CLLocationCoordinate2D は 緯度  と 経度 を パラメータ として生成する位置情報のオブジェクトです。今回の例では マップ の中心座標として利用しています。 MapInitOptions ResourceOptions として accessToken を指定したり、 CameraOptions として 中心座標や縮尺などを指定した マップ 生成時の オプション 用 オブジェクト です。  cameraState … Read more

[SwiftUI] Mapbox の地図を Maps SDK for iOS を用いて実装する – 実装編

前回の記事 で環境準備が整いましたので、早速 Mapbox の地図 を SwiftUI で実装していきたいと思います。 Maps SDK for iOS を用いて実装してきますので、 Maps SDK for iOS の インストール ができていない場合は 前回の記事 を参考に インストール した後に本記事を参照ください。 Mapbox 公式 サイト が提供している サンプルコード は そのままでは SwiftUI に組み入れることができないため UIViewRepresentable を活用して実装していますので、 UIViewRepresentable についても簡単に解説しながら進めていきます。 Xcode: 13.2.1 iOS: 15.2 Swift: 5 Maps SDK for iOS: v10.2.0 公式 サイト で紹介されている Maps SDK for iOS サンプル コード Mapbox の公式サイト には 簡単な サンプル が紹介されているのですが、 残念ながら SwiftUI を用いた そのものズバリのものは紹介されておらず、 UIViewController を用いたもののみが紹介されています。 UIViewController は iOS 2.0 以降で実装可能な “枯れた” 技術ではありますが、 SwiftUI で実装するためには UIViewRepresentable を用いてひと手間加える必要があります。 UIViewRepresentable について Apple Developer サイト によると UIViewRepresentable は以下のように紹介されています。 A wrapper for a UIKit view that you use to integrate that view into your SwiftUI view hierarchy. https://developer.apple.com/documentation/swiftui/uiviewrepresentable つまり、iOS 2.0 以降 サポート … Read more