taisablog

taisa's engineer blog

「 JavaScript 」 一覧

Firebase Cloud Firestore 使い方の勘ドコロ

2019/06/18   -JavaScript
 

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocumentって何? となったり、doc、docRef、cityRef、cityDocRef、snapShot、docs など、本家ドキュメントの中でも若干変数名の書き方が異なっていたりします。その為、慣れてくれば大丈夫ですが、慣れるまで毎回どう書くんだっけ?と検索することが多かったので、自分なりに解釈して整理してみました。Firestoreを扱える言語は様々用意されていますが、ここでは、JavaScript(Nuxt.js)を例に進めていきます。(セットアップは省きます) 参照元:https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja Firestoreの基本的な考え方 基本的な考え方は、正にこの図にあるように「フォルダ(collection)」「ドキュメント(document)」「データ」という構成になっています。 参照元:https://firebase.google.com/docs/firestore/data-model これをFirestoreの管理画面でみるとこのようになります。 これを「フォルダ(collection)」「ドキュメント(document)」「データ」に当てはめてみるとこのようになります。イメージとしては、本棚にフォルダが並んでいてフォルダを選択するとフォルダの中のファイル一覧がみることができ、あるファイルを選択するとそのファイルに書かれている内容をみることができるという感じです。 ◯◯Refとは 本家ドキュメントをみると、◯◯Refという変数がよく出てきます。これはその名の通り「参照」です。つまり本棚にあるフォルダ(collection)やフォルダ内のドキュメントを選択した状態です。この時点ではまだ参照なので取得はしていません。usersコレクションを選択した状態であればuserRef、usersコレクションのドキュメントを選択した状態であればuserDocRefといった変数をつけると分かりやすいと思います。(本家ドキュメントではそのようなルール決めはありません。) userRef = db.collection(‘users’) userDocRef = db.collection(‘users’).doc(‘YLu7bG7PcRNYhAg3F6MY’) これらを踏まえて、実際にデータの取得、追加、更新、削除のコードを書いてみます。ここではあえて◯◯Refのように変数を使っています。 コレクション配下のドキュメントデータをすべて取得する usersコレクションを参照した状態で、get().then()を呼び出すとその時点のドキュメント一覧(snapShot)が取得できます。ドキュメントは1つしか存在しない可能性もありますが、ドキュメント一覧なのでforEachでループすることで全データを取得することができます。ユーザIDはデフォルトでドキュメントに振られるIDです。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.get().then((snapShot) => { snapShot.forEach((doc) => { this.users.push({ user: doc.data(), user_id: doc.id }) }) }) ユーザID ユーザ名 ユーザメールアドレス {{user.user_id}} {{user.user.name}} {{user.user.email}} 参考:https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja コレクション配下のドキュメントデータをフィルタして取得する フィルタするのにwhereを利用することができます。whereで対象を絞った後、同様にget().then()を呼び出すとフィルタしたドキュメント一覧が取得できます。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.where(‘name’, ‘==’, ‘山田太郎1’).get().then((snapShot) => { snapShot.forEach((doc) => { this.filteredUsers.push({ user: doc.data(), user_id: doc.id }) }) }) ユーザID ユーザ名 ユーザメールアドレス {{user.user_id}} {{user.user.name}} {{user.user.email}} 参考:https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja 単一のドキュメントデータを取得する 単一のドキュメントデータを取得するには、doc()にIDを渡し、get().then()を呼び出すと指定したドキュメントのデータが取得できます。この場合、doc()で単一のドキュメントを指定しているので、取得できるのは一覧ではなく指定したドキュメントの値となります。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.doc(‘YLu7bG7PcRNYhAg3F6MY’).get().then((doc) => { this.user = doc.data() this.user.user_id …

node-nightlyを使ってwebpackをデバッグする

webpackに限らずだけどnode-nightlyを使うと簡単にデバッグすることができる Debugging When contributing to the core repo, writing a loader/plugin, or even just working on complex project, debugging tools can be central to your workflow. Whether the problem is slow performance on a large project or an unhelpful traceback, the following utilities can make figuring it out less painful. node-nightlyをインストールする インストール後一度初期化を行う npm i -g node-nightly // 初期化 node-nightly webpackの実行環境をつくる デバッグする為にwebpackの実行環境をつくる npm initしてwebpackをディレクトリ配下にインストールする npm init npm i -D webpack //バージョンは4.12.1 npx webpack –version 4.12.1 webpack-cliをインストールする。ここではグローバルインストールとしている。 npm i -g webpack-cli //バージョンは3.0.8 webpack-cli –version 3.0.8 webpack.[prod].jsをコマンドラインから作成する webpack-cli init 以下のように聞かれるので好みの設定をする(今回はデフォルトを利用) ℹ INFO For more information and a detailed description of each question, have …

「はじめてのフロントエンド開発」という共著本を出版しました

『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 Amazonより 自分はこの中の第3章の環境構築を担当しています。お陰様で現在まで売れ行きは好調ですが、一方で誤植もいくつか見つかっていますので誤植情報についてもこの投稿でお知らせします。また、表紙をパッと見ただけでは分からない本書の内容についてや去年最新JavaScriptフロントエンドをキャッチアップした経緯などを書いていきます。 どんな本か 「どんな本か」については共著者である新井正貴の投稿にまとめられているので確認してみてください。 「はじめてのフロントエンド開発」という本を書きました – massa142’s blog 共著者として参加していた書籍『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に 技術評論社 さまより発売となりました。 React、Angular、Vue.js、React Nativeそれぞれが、同じサーバの APIを参照し、同様の機能を持ったアプリケーションとして作成します。 どんな本か こんな方におすすめ 書いたきっかけ パンダの由来 サポートリポジトリ 本書の内容について 書籍タイトルは『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』ですが、タイトルに出てくるワードの他にも『フロントエンドの最新動向』『環境構築』『ES2015』『TypeScript』『Firebase』についても書かれています。 表紙をパット見ただけでは内容が分からないところもあると思うので、本書がどのような内容かを簡単にまとめてみます。 アウトライン Part1:JavaScriptフロントエンドフレームワーク最新動向 第1章:JavaScriptフロントフレームワークの興隆 第2章:SPA、PWA – フロントエンド実装技術の最新トピック Part2:フロントエンドJavaScript開発のための基礎知識と環境構築 第3章:フロントエンドJavaScript開発のための環境構築 第4章:フロントエンドJavaScript開発のための基礎知識 第5章:フロントエンドJavaScript開発のためのサーバ構築 Part3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js 第6章:React入門 & 徹底活用 第7章:Angular入門 & 徹底活用 第8章:Vue.js入門 & 徹底活用 Part4:Slackライクなサンプルで学ぶ React Native 第9章:React Native 入門 & 徹底活用 大きな流れ まずPart1で「JavaScriptフロントエンドの最新動向」を解説し、Part2で「環境構築」「ES2015」「TypeScript」「FirebaseによるAPIサーバの構築」などフロントエンド開発の事前準備をします。 Part3、4では「React」「Angular」「Vue.js」「React Native」それぞれの章の最初の入門で基礎知識を解説した後、同一のAPIを利用しSlackライクなサンプルアプリを作ります。それぞれが同一APIを使って同じアプリケーションをつくることでそれぞれの特徴を掴めるような構成になっています。 各Partについて Part 1:JavaScriptフロントエンドフレームワーク最新動向 第1章では「React」「Angular」「Vue.js」「React Native」に関する解説や比較をしています。また本書で扱うフレームワーク/ライブラリ以外(Polymer、Ember.js、Riot.js、Vanilla.js、Native Script、Weex、A-Frame、React VR)についてもそれぞれジャンル分けしながら取り上げて解説しています。 第2章では「SPA」「PWA」に関連する技術的な内容(クライアントサイドルーティング、CSS in JS、コンポーネント指向、SSRとプリレンダリング、バーチャルDOM、MVCとMVPとMVVM、Flux、PWA、Electron など)を取り上げて解説しています。 Part1を読むことで最新のJavaScriptフレームワークの動向を掴みつつ、フロントエンドに関する技術的な面を把握することができると思います。 Part 2:フロントエンドJavaScript開発のための基礎知識と環境構築 第3章では「node.jsのインストール」から「npm」「package.json」「webpack」「IDE(VS Code)」まで、開発に必要な環境構築について取り上げて解説しています。既に環境がある人にとっては飛ばしても良い内容ですが、一方で環境構築周りで躓く人も一定数いると思うので、その場合はこの章を進めていけば開発環境を構築することができます。 第4章では「ES2015」「TypeScript」について解説しています。第5章では「Firebase」を使って以降の章で利用するAPIサーバの立ち上げについて解説しています。 Part 3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js、Part 4:Slackライクなサンプルで学ぶ React Native 第6、7、8、9章では、それぞれの章において各フレームワーク/ライブラリへの入門をした後サンプルアプリを作るという流れになります。 本書は(特にPart 3とPart 4)は、ただ読み進めるよりも実際にコードを書いて動かしてみてほしいというのが思いとしてあります。 中には「はじめての」というタイトルの割には敷居が高いと感じる人もいるかもしれませんが、とにかく書いて動かしてみて比較してみてほしいです。 誤植情報 誤植情報については以下のページにまとめていて、随時更新していますので何かあったらTweetしたりissuesにあげたりしてもらえると助かります。 okachijs/jsframeworkbook Contribute to jsframeworkbook development …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月前まで JSとjQueryのみ 毎回ノリで書いていた(もちろんカオスにならないように最大限工夫はしてるけど) 流れが早いからモダン情報のキャッチアップはタイミングを見計らっている けど2017年中にはなんとかしたい やるなら一気にやりたい 始める前まではこんな感じだったけど、そろそろいってもいいかな?ということでやり始めた。 速習後 もともとは既存プロダクトをどうにかするつもりで始めていたけど、タイミングよく新規プロダクトを立ち上げることになったので採用した。何もしてなかったらかなり勇気が必要だったと思う。 ES6 React VueJS Webpack Babel PostCSS Go PHP(継続) 3ヶ月でやった事 JavaScript(ES5)を速習する ES6を速習する React(でSPAを)速習する マークアップを速習する Podcastで速習する 勉強会で速習する チームメンバーと速習する JavaScript(ES5)を速習する オライリー本で速習 JavaScriptパターン ―優れたアプリケーションのための作法 Amazonより 「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」や他の本もいいけど個人的にはこの本がお薦め(発売時期がよい)。 ※デザインパターンの章は他に「JavaScriptデザインパターン」という書籍があるしここでは読み飛ばしてもよいと思う。 ES6を速習する WEB+DB PRESS Vol.87で速習 WEB+DB PRESS Vol.87 Amazonより 非常に分かりやすく端的に説明されていてとてもよい。 (こんなツイートも↓) 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7 — Takuto Wada (@t_wada) 2015年8月10日 React(でSPA)を速習する WEB+DB PRESS Vol.97 Amazonより React+Flux、クライアントサイドルーティング、サーバサイドレンダリング、webpackについて丁寧に説明されている。他にもマネジメントやPythonに関する内容があってとても読みごたえがある。 すぐに「理解できた」という訳にはいかない Reactはそれなりに初期学習コストがあるので以下のことを繰り返しながらじっくり理解を進めていった。 サンプルコードを動かす 本家サイトチェック ブログ記事チェック 今話題のReact.jsはどのようなWebアプリケーションに適しているか?(お薦め記事) サンプルコードを作る Web+DB PRESS見直す マークアップを速習する マークアップも一人でできるようになりたいというメンバーが多かったのもあり、社内のUI/UXデザイナーにハンズオンをしてもらった。このハンズオンの目的としては何から手をつけていいか分からないという状況から脱却して自分でもなんとか勉強できる状態にすることでこれだけでなんとかしようというものではない。 関連リンク – 初心者向けざっくりHTML/CSSコーディングハンズオン資料 – 社内エンジニア向けにマークアップハンズオンを開催しました その他の方法 Podcastで速習する 現場.fm 現場.fm というフロントエンドの現場について話すラジオを始めた 勉強会で速習する コミュニケーションしながら疑問点を解決してもらえたのでとても助かった。他にもReact、VueJS、Angular以外も含めたフレームワーク発表会をやったりした。またそれをうけてあたらめてReact、VueJS、Angularはいいなと実感した。 チームメンバーと速習する 今QはJSをやろうと全員で決めた(※この間業務でJS触る機会は0だった) 情報共有しやすい ここでもチームメンバーで分担してReact、VueJS、Angularを調べて発表会をした チームメンバーのJSに対する意識が全体的に変わって導入障壁が低くなった まとめ 業務でJS触る機会が0だったとしても3ヶ月あれば結構イケる 他にやりたいことができてもなるべく我慢してJSやるの大事 …