概要 今回はvue.jsとGoogleMapで遊んじゃいます。 因みに暇なときはGoogleMapで旅行するのが趣味です。 実装する機能は下記の2点です。 現在位置の緯度/経度を基準にGoogleMapを表示し、現在位置にマーカーをたてる。 公衆無線LANアクセスポイントの一覧情報を取得し、各アクセスポイントの緯度/経度を使い各地にマーカをたてる。 初期表示はこんな感じです。（現在地は渋谷駅周辺） 拡大するとこんな感じ(渋谷意外と少ない!?) 環境 node.js v10.16.3 npm 8.1.1 Vue CLI 4.5.13 vue 3.3.20 使用したAPI google-maps-api-loader APIキーの取得方法は下記を参照 公衆無線LANアクセスポイント一覧取得API 下記のサイトから「/WifiAccessPoint」を使用 事前準備 プロジェクト配下で必要なライブラリを2つインストールします。 axiosのインストール $ npm install --save axios vue-axios google-maps-api-loaderのインストール $ npm install --save google-maps-api-loader ソース Map.vue <template> <div class="map" ref="googleMap" /> </template> <script> import GoogleMapsApiLoader from 'google-maps-api-loader' import axios from 'axios' export default { data () { return { datas: [], google: null, } }, async mounted () { this.google = await GoogleMapsApiLoader({ // google-maps-api-loaderのAPIキー apiKey: '********************' }) // 公衆無線LANアクセスポイント一覧取得APIのURL 取得件数はlimitパラメータで指定 const url = 'https://api.data.metro.tokyo.lg.jp/v1/WifiAccessPoint?limit=100' // 公衆無線LANアクセスポイント一覧を取得 await axios.get(url).then(response => { this.datas = response.data[0] }) this.initializeMap() }, methods: { initializeMap () { // 現在位置の取得に成功した場合の処理 const success = (pos) => { const mapContainer = this.$refs.googleMap //現在位置の緯度と経度を取得 const latlng = new this.google.maps.LatLng(pos.coords.latitude, pos.coords.longitude) // 現在位置を基準に初期表示位置の設定 const mapConfig = {center: latlng, zoom: 12} // GoogleMapの描画 this.map = new this.google.maps.Map( mapContainer, mapConfig ) // 現在位置にマーカーを表示 const marker = new this.google.maps.Marker( { map: this.map , position: latlng , animation: this.google.maps.Animation.DROP, icon: { fillColor: "#FF0000", //塗り潰し色 fillOpacity: 0.8, //塗り潰し透過率 path: this.google.maps.SymbolPath.CIRCLE,//円を指定 scale: 50, //円のサイズ strokeColor: "#FF0000", //枠の色 strokeWeight: 1.0 //枠の透過率 }, label: { text: 'イマココ', //ラベル文字 color: '#FFFFFF', //文字の色 fontSize: '26px' //文字のサイズ } }) // 取得し公衆無線LANアクセスポイント一覧をループし各地にマーカーを表示 const marker2 = [] this.datas.forEach((item, i) => { marker2[i + 1] = new this.google.maps.Marker( { map: this.map , position: new this.google.maps.LatLng(item.設置地点.地理座標.緯度, item.設置地点.地理座標.経度) , animation: this.google.maps.Animation.DROP, }) }) } //現在位置の取得に失敗した場合の処理 const fail = () => { alert('位置情報の取得に失敗しました。') } // 現在位置を取得する処理の動作オプション const option = { enableHighAccuracy: true, // より精度の高い位置情報を取得するか（true／false） timeout : 5000, // 取得タイムアウトまでの時間（ミリ秒） maximumAge: 0, // 位置情報の有効期限（ミリ秒）0に指定すると常に新しい情報に更新しようとする。 } // 現在位置を取得 navigator.geolocation.getCurrentPosition(success,fail,option) }, } } </script> <style> .map { padding-bottom: 75%; } </style> 最後に 今回は公衆無線LANアクセスポイントの表示でしたが、基本的に緯度と経度さえ取得できれば上記のソースはある程度使い回せるかと思います。 てか今更ですが公衆無線LANアクセスポイントを使うことって僕はほぼないです。。 何か可視化できたら面白いものありますかねーー

はじめに こんにちは！ 今回は【Vue.js】監視プロパティ（ウォッチャ）の基本についてアウトプットしていきます！ 監視プロパティとは 監視プロパティとは、特定のデータまたは、算出プロパティの状態を監視して変化があったときに登録した処理を自動的に実行できるものです。 書き方・解説 HTML <div id="app"> <p> {{ message }} </p> <p> <input type="text" v-model:value="message"> </p> <pre>{{ $data }}</pre> <!-- ⏫変更された内容がわかるように記述しておきます。 --> </div> Vue.js var app = new Vue({ el: "#app", data: { message: 'Hello Vue.js!' }, watch: { //⏫監視プロパティ（ウォッチャ） message: function(newValue, oldValue){ //⏫新しい値　　　　　⏫変更前の値 console.log('new: %s , old: %s' , newValue,oldValue) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//⏫newValue,⏫oldValueがコンソールされる。 } } }) 監視プロパティ（ウォッチャ）watchを定義し、`dataのmessage`の値に変更があったらconsoleにlogに新しい値と変更前の値を表示するプログラムを記述しました。 上記のようにテキストに「abc」と続けて値を変更していくと、以下のように新しく入力した値と入力する前の値がconsoleに出力されました。 まとめ ・監視プロパティ（ウォッチャ）とは、対象の監視物に変化があったとき記述した処理が自動的に実行されるものである。 最後に 今回は監視プロパティ（ウォッチャ）の基本についてアウトプットしました。 今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！ 最後までご愛読ありがとうございました！

Nuxt3がベータになりましたね。 中身は色々変わったことが書かれているので、いちユーザーとして表面上何がどう変わったのかを見ていきたいと思います。 プロジェクト作成 新規プロジェクトは`nuxiというNuxt用の新しく作られたCLIを使います。 たった3コマンドでプロジェクトのテンプレートがもう使えちゃいます。 $ npx nuxi init nuxt3 $ cd nuxt3 $ yarn install この状態でnode modulesのインストールが完了するので、開発用サーバーを起動しましょう。 $ yarn dev -o -oオプション渡していたら以下のページが自動で開くはず。 開かなくても http://localhost:3000/ でいけますね。 ディレクトリ見てみる この状態のディレクトリ見てみるとかなりあっさりです（node周りは省略）。 /.nuxt - 生成されたVueのアプリがここに作られる。基本触らない。 app.vue - Nuxtのメイン（ルート）コンポーネント。 nuxt.config.ts - Nuxtの設定周りを記述するファイル。TSになった！ tsconfig.json - /.nuxt配下にtsconfig.jsonを生成するために必要。良い感じになってるので基本はこのままで良さそう。 Nuxt2は/pagesとか/componentsとかディレクトリすべて生成されて中にREADME.mdが格納されていたんですが、かなりミニマルな作りになったみたいですね。自分でドキュメント読みながら追加していくのが良さそう。個人的にはこっちの方が使う側もドキュメント読みながら自分で取捨選択していくようになると思うので良いんじゃないかと思いました。 ドキュメント見てみる あとはドキュメント自体が読みやすくなりましたね。 ConceptsとDocumentsがキッチリ分かれるようになってます。 ディレクトリのアイコンが分かりやすく、アプリをデプロイする為のドキュメントもキッチリ揃ってます。 かなりDeveoloper's Experienceが考えられたカイゼンが見えてイイですね！ Nuxtはディレクトリ構造がカッチリ決まってることが秩序をもたらしてくれるんですけど、 それぞれのディレクトリでどういう機能があるのかがディレクトリの名前更改も相まって理解しやすい。 pagesとcomponentsにコンポーネント作ってみる まずはpagesディレクトリを作りindex.vueを作ってみます。 /pages/index.vue <template> <div> <h1>INDEX</h1> </div> </template> このファイルを生成すると、開発サーバーが404になりました。理由はpagesディレクトリを検出時に.nuxt配下のアプリ生成がうまくいっていないか、pagesディレクトリを使うとvue-routerを使うようになるのでその切替がうまくいかないんだと思います。いったん、app.vue自体の修正も必要になるので、先に<NuxtWelcome/>コンポーネントではなく<NuxtPage/>コンポーネントに差し替えます。 app.vue <template> <div> <NuxtPage /> </div> </template> これで$ yarn dev -oし直すと、ちゃんとページが表示されました。 次はここに子コンポーネントを追加していきます。 componentsディレクトリを作り中にTitleComponent.vueを作ります。 /components/TitleComponent.vue <template> <h2>COMPONENT</h2> </template> そして、このコンポーネントを/pages/index.vue側で利用してみます。 /pages/index.vue <template> <div> <h1>INDEX</h1> <TitleComponent /> </div> </template> ドキュメント読むとなんとcomponentsディレクトリ配下のコンポーネントはすべて自動的にインポートされるらしいです。Nuxt2ではここは手動でインポートが必要でしたね。ここまでやってくれちゃうと最初にNuxt3触ってからVue触るとわけわからなくなりそうな気も。基本を理解しているなら裏で色々やってくれるのは早くてありがたいですけどね。 ここでまた開発サーバーのページを開くとエラーが出ます。どうやらNuxtの機能に関わるディレクトリの変更はホットリロードできないみたいですね。おとなしく$yarn dev -oし直すと、コンポーネントが表示されました。 感想 Nuxtというフレームワーク単体ではなく、CLI、ドキュメント、TypeScriptの導入など、総合的にDeveloper's Experienceのカイゼンを意識したエコシステムを目指し仕上げてきたなと言う印象を受けました。ここは個人的に素晴らしいポイントだと思っていて、そういうエコシステムにこそ健全なコミュニティが定着し、そのコミュニティがよりエコシステムを発展させていく良いライフサイクルが生まれることに繋がるはず。 とくにSSRのアプリのデプロイなんかは最初よくわからない人多いと思うんですが、それもメジャーなクラウドやホスティングサイトごとに説明が用意されてるのって親切ですよね。Vue3を少し触ってアプリ作るってなったらNuxt3でストレス少なく開発していくみたいな流れが良さそうです。

VSCodeでGitのエラー 背景 ローカルにVue.js用の環境構築を終え、GitHubにpushしようとターミナルで git initをした後に後述するエラーに遭遇しました。 環境 ・MacOS Catalina バージョン 10.15.7 ・Git 2.33.0 エラー文、エラー内容 The git repository at 'Users/XXXX' has too many active changes, only a subset of Git features will be enabled. と出ました。 VSCodeの変更差分の数を見ると10kと膨大な数になっていました。 上記エラー文は「変更箇所が多すぎるよ！」と言っているわけですね。 解決方法 ググると、上記エラーが出た時.gitignoreに追記して解決している方も多いのですが、 私の場合VSCodeを再起動だけしたら解決しました。

Mock化したい関数 例えば、とあるコンポーネントから呼んでいる、下記のようなapiをコールする関数をMock化したいとする api.ts export const sampleApi = async (): Promise<AxiosResponse<Sample>> => { return axios .get('sample/api') .then((res) => { return res; }) .catch((err) => { return err; }); }; Let's Mock化!! index.spec.ts // ①Mock化したい関数をimportする import { sampleApi } from 'api'; // ②module全体をMock化する jest.mock('api'); // ③関数をMock化する const sampleApiMock = sampleApi as jest.MockedFunction<typeof sampleApi>; // ④③から任意の値を返すようにしたい場合 sampleApiMock.mockResolvedValue({ status: 200, data: 'hogehoge'}); // ⑤beforeEachなりでResetするのを忘れずに sampleApiMock.mockClear(); ちなみに、axios自体をmock化したい場合も同じような形でできます index.spec.ts // ① import axios from 'axios'; // ② jest.mock('axios'); // ③ const axiosMock = axios as jest.MockedFunction<typeof axios>; 参考 モック関数(Jest公式)

触り始めたばかりで、propsを渡す時しょっちゅう書き方が忘れちゃっうから、ちょっとまとめてみようと思います 数字 <my-component :size="{{ 50 }}"><my-component> <my-component :size={{ 50 }}><my-component> <my-component :size=50><my-component> 数字(Number)タイプの変数 <my-component :size="{{ $size }}"><my-component> 文字列(String) <my-component first-name="{{ $firstName }}"><my-component> laravelのroute <my-component path="{{ route('admin.login') }}"><my-component> Boolean値 <my-component :disabled="false"><my-component> Boolean変数 <my-component :disabled="{{ $disabled? 'true' : 'false'"><my-component> 配列 <my-component :order-list='@json($orderList)'><my-compoent> 三段式 <my-component :label="{{ $total>100 ? 'green' : 'red'}}"><my-component> null <my-component :value="null"><my-component>

Nuxtでコンポーネントファイルを動的に読み込みたい場合の道2選。 さて、画面の条件によって読み込みたいコンポーネントを変えたい、差し替えたいって時ってありますよね。 動的コンポーネントのファイルパスが事前にわかる場合 <template lang="pug"> section component(:is='loadComponent') </template> <script> import customComponent1 from '~/components/customComponent1.vue' import customComponent2 from '~/components/customComponent2.vue' export default { components: { customComponent1, customComponent2 }, data() { return { // 後は条件で適当に変えて loadComponent: customComponent1, } } } </script> これで、お好みのトリガーでloadComponentの値を事前に読み込んでおいたcomponentsのどれかに差し替えれば簡単にコンポーネントの動的切り替えができる。簡単ですね。 動的コンポーネントのファイルパスが事前にわからない場合 import customComponent1 from '~/components/customComponent1.vue'のファイルパスをstoreの値やapiから取得した値など、動的に変えたいときは、以下のようにしてください。 <template lang="pug"> section component(v-if='customComponent', :is='customComponent') </template> <script> export default { data() { return { customComponent: null, } }, computed: { listCustomComponent() { return '動的に読み込みたいコンポーネントのファイル名' }, }, mounted() { if (this.listCustomComponent) { this.customComponent = () => import(`~/components/xxxx/${this.listCustomComponent}`) } }, } </script> これでcomponentの指定を動的な文字列で指定することができます。 当たり前ですがファイルパスが間違っていると読み込まれませんので要注意。 この記事が役に立ったと思ったら！LGTMボタン！お願いしゃっす！