JapaneseVue3 + TypeScript で Vite4 環境変数を用いる方法
Vue3プログラムで必要な変数を外部ファイルから取得する方法を、Viteの環境変数を使用した具体例を交えて解説します。環境変数を用いることで、APIキーやパスワードなどの機密情報を安全に設定することができます。本記事では、Viteにおけるモードの理解やビルトイン環境変数の設定、独自の環境変数の作成方法、そして作成した環境変数の参照方法についても解説します。
Tech
Japanese
JapaneseVue3 + TypeScript で Mapbox GL JS を使って マップ を レスポンシブ に画面全体に表示
Vue3, TypeScript 環境 で Mapbox地図をレスポンシブ表示する方法を紹介しています。 主にCSSの設定が参考になれば幸いです。
Japanese[WordPress] プラグイン を使って 投稿 を “連載” シリーズ として公開する方法
本記事では、プラグイン を用いて WordPress での投稿を ”連載” シリーズ として公開する方法を紹介します。 プラグイン の設定についても スクリーンショット を用いながら実際の設定を交えて紹介しています。
JapaneseWordPress で Discussion セクション を再表示する方法
WordPress の 各投稿の設定の一つである Discussion について、 設定変更しようとしても 稀に Discussion セクション が表示されていないことがあります。今回の記事では 消えてしまった Discussion セクション を再表示する方法について紹介していきます。
JapaneseVue3 + TypeScript 開発環境で 環境変数 を利用する方法 (.env ファイル)
Vue.js アプリケーション を開発するにあたり、 パスワード や API Key といった 慎重に取り扱うべき データ を用いる局面が多々あります。 本記事では Vue3 + TypeScript + Vite 環境 で 環境変数 を用いることで この問題に対処する方法を紹介していきます。
JapaneseVue3 + TypeScript プロジェクト から Firestore に接続する サンプル
Vue3 + TypeScript プロジェクト で Firebase の リアルタイム DB である Firestore に アクセス して データ を取得する サンプル を紹介します。 本記事では、事前に Firestore に格納しておいた データ を Vue アプリケーション で表示してみようと思います。 なお、 今回は例として、開発環境で実装していきます。
JapaneseVue3 + TypeScript で Mapbox GL JS を使って マップ を表示する サンプル
Vue3 + TypeScript で Mapbox の マップ を表示する サンプル を紹介します。 create-vue で作成した プロジェクト に Mapbox の 公式 JavaScript クライアント ライブラリである Mapbox GL JS を組み入れることで 簡単に マップ を実装することができます。 一方で Vue3 + TypeScript 環境向けの サンプル はあまり見受けられません。 多少 コツ のようなものも必要でしたので、 本記事で合わせて紹介していきます。
Japanese[ Vue3 + TypeScript ] 子コンポーネント で実装した ドロップダウン で選択した内容を リアクティブ に 親コンポーネント と 連携する方法
本記事では 通常 ツリー 構造となる コンポーネント の 「親 コンポーネント から 子 コンポーネント」、 「子 コンポーネント から 親 コンポーネント」 のそれぞれについて リアクティブ な データ のやりとりを TypeScript で実現する方法について ドロップボックス (Select) を例に用いて 整理していきます。
JapaneseVue3 + TypeScript + Bootstrap 5 で ボタン を設置する
今回は 前回の記事で作成した Vue3 + TypeScript の環境での Bootstrap5 での ボタン 実装 について紹介していきます。
JapaneseTypeScript コンポーネント を Vue3 プロジェクト に追加
前回の記事に引き続き、今回は Vue3 プロジェクト にTypeScript コンポーネント を追加して 実際に Vue.js のなかで TypeScript を使っていきたいと思います。