WebAPIs と Firebase と Vue.js 開発関係の有益な資料へのリンク

# WebAPI

- [便利ページ：Web Bluetooth APIでBLEデバイスに接続](https://qiita.com/poruruba/items/653e9bbf6b725438442e)
- [WebUSBを使ってブラウザのJavaScriptからArduinoを制御してみよう！](https://qiita.com/n0bisuke/items/b5a90ead155097dce484)
- [Geolocation API](https://royalcrab.github.io/gps.html)
- [Sensor API](https://royalcrab.github.io/acc.html)
- [Videoタグ](https://royalcrab.github.io/mp4_local.html)
- [カメラキャプチャ](https://royalcrab.github.io/rtc_camera.html)
- [WebRTCサンプル](https://webrtc.github.io/samples/)
- [[WebRTC] Vue.jsとFirebaseでWebRTC簡単入門](https://qiita.com/hond0413/items/3e330f81360bae444f32)

# Firebase

- [Firebase Authentication 7つの落とし穴 - 脆弱性を生むIDaaSの不適切な利用](https://blog.flatt.tech/entry/firebase_authentication_security)
- [Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン](https://qiita.com/taketakekaho/items/52b7c196ddbd4cb3c968)
- [Firebase で hello world と表示するページを作る方法](https://qiita.com/mml/items/d6e00d8509231051271a)
- [Firebase の web アプリにメールアドレスでユーザ登録をさせて確認メールを送る](https://qiita.com/mml/items/5e325bb19ba532ca56b7)
- [Firestore への書き込み、読み込みを最小限のコードと手順でやる](https://qiita.com/mml/items/fd836cb589aedee92981)
- [Firebase Firestoreのエミュレーターを使ってローカルで開発する](https://zenn.dev/ginpei/articles/firebase-firestore-emulator)
- [Firestore Security Rules の書き方と守るべき原則](https://zenn.dev/kosukesaigusa/articles/efc2528898954d95a6ae)

firebase emulators の storage も使えるようになりました。下記のコードでいけます (firebase v8の場合）

```.js
import firebase from 'firebase/app'; 
require("firebase/functions");
require("firebase/firestore");
require("firebase/storage");

// 以下に apiKey のコードを貼る
const firebaseConfig = {
  apiKey: "xxxxxx",
  authDomain: "yourproject.firebaseapp.com",
  projectId: "yourproject",
  storageBucket: "yourproject.appspot.com",
  messagingSenderId: "xxxxxxxxxxxx",
  appId: "1:yyyyyyyyy:web:xxxxxxxxxxx"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const isEmulating = window.location.hostname === "localhost";
if (isEmulating) {
  firebase.auth().useEmulator("http://localhost:9099");
  firebase.functions().useEmulator("localhost", 5001);
  firebase.firestore().useEmulator("localhost", 8080);
  firebase.storage().useEmulator('localhost', 9199);
}
```

storage エミュレータは windows で動かすと、400kb より大きいファイルを置こうとすると、落ちることがあるようです。どうしても落ちる場合は、storage と auth だけ emulator から外します。

## vue2 / firebase v8

yarn install 時のバージョンは下記に揃えておけば、従来通りいけるようです。

```.sh
$ npm -v
8.1.3
$ node -v
v14.18.1
(firebase ではv16 にしろと言われるかも）
$ yarn -v
1.22.11
$ firebase --version
10.2.1
$vue --version
@vue/cli 4.5.13
$ vue create myapp
(vue2)
$ cd myapp
$ vue add vuetify
(default)
$ yarn add firebase@^8.10.0
$ yarn add firebaseui@^5.0.0
$ yarn add vue-router@^3.2.0
$ yarn add @mdi/font
$ yarn dev
(動作テスト)
$ firebase init
$ yarn build
$ firebase init emulators
$ firebase emulators:start
```

## gitbun からレポジトリを clone した場合

```.sh
$ yarn install
$ firebase use myproject
# 必要に応じて
$ cd functions
$ npm i
$ cd ..
$ yarn build
$ firebase emulators:start
```

## Vue 参考資料

- [Vue.jsの <template>タグには複数の役割がある](https://qiita.com/m_norii/items/c52171fd09c4504f8b81)
- [Vue-routerで遷移時にパラメタを渡し方](https://qiita.com/godan09/items/d9941ef1ecb3b1f76b4d)
- [Vue.jsのslotの機能を初心者にわかるように解説してみた](https://future-architect.github.io/articles/20200428/)
- [Vue.js+VueRouterでページの離脱、再読込、別ルートへの移動時に警告を表示する](https://blog.hirokiky.org/entry/2019/08/22/111031)
- [【Vue.js】propsと$emitの基本の使い方を具体例を交えて解説](https://shimablogs.com/vue-props-emit)
- [Vue.js: v-forで項目インデックスをkey属性にしていいのか](https://qiita.com/FumioNonaka/items/d1d9c9335116426a8316):v-for で key を index にしている場合に、配列の要素を部分削除、追加するとおかしくなることがある。
- [【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】](https://qiita.com/ngron/items/ab2a17ae483c95a2f15e): props や component の名前の付け方のルール。絶対に知っておくべき。

# Vuetify 

- [テーブル、カレンダー、ダイアログ](https://qiita.com/is_ryo/items/6bfa55599becd2f35879)
- [Vuetifyのv-dialogを使う方法](https://poppotennis.com/posts/vuetify-dialog)
- [レイアウト微調整に便利な Spacing Helper Vuetify を使ってみる](https://riotz.works/articles/lopburny/2019/08/12/arrange-vuetify-components-with-spacing-helper/)
- [Vuetify.js 2.2のGridSystemについて](https://qiita.com/rubytomato@github/items/07fe07e64482f8f03ef3)
- [Vuetify.js で余白を設定する](https://www.paveway.info/entry/2021/03/07/vuetifyjs_spacing)

Vuetify でエラーがでないままレンダリングされない場合は、v-bind,.v-on, v-model, v-slot あたりに設定されている変数やメソッド名が、script 以下に定義されていないことが多い。

# M5Stack 

- [webbluetooth APIを使ってブラウザからm5stackを操作する](http://ryoizu.com/blog/2020/06/28/webbluetooth-api%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%8B%E3%82%89m5stack%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B/)
- [M5StackとFirebaseを連携してスマートロックみたいなものを作る！①](https://qiita.com/bigface00/items/87346c31d12346f85716)

# Javascript 関連

- [JavaScript Primer](https://jsprimer.net/): ここを100回くらい読むべき
-- [関数とthis](https://jsprimer.net/basic/function-this/): アロー関数と匿名関数は等価ではない！
-- [暗黙的な型変換](https://jsprimer.net/basic/implicit-coercion/)
-- [非同期処理:コールバック/Promise/Async Function](https://jsprimer.net/basic/async/)
- [厳格モード](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode): `'use strict'`

# 公開資料

- [ミクシィの21新卒技術研修の資料と動画を公開します！](https://mixi-developers.mixi.co.jp/21-technical-training-a0bcdbf9bca0)：モバイルアプリ、Unity 関連
- [2021年のエンジニア新人研修の講義資料を公開しました](https://blog.cybozu.io/entry/2021/07/20/100000)：Webアプリ関連
- [リテラシーレベルモデルカリキュラム対応教材](http://www.mi.u-tokyo.ac.jp/consortium/e-learning.html)：各大学の公開テキスト等