さくっとプロトタイプできましたよーという報告を兼ねて記事にします！

内容について

※今回、サイト自体のコードは公開していません。
※機能単位の実装方法の説明は書いておりません。（機会あれば書く）
主に使った技術について調べたこと、参考書籍などを書きます。

やったこと

Demo用のWebサイトを作成しました。今回の技術スタックでいくと、おそらく慣れた人であれば2 ~ 3時間くらいで作れるようなボリューム。

https://show-cam-image-demo.firebaseapp.com/
(右上からsign inすると画像が表示されます)
（Demo用なので急に消すかもしれません！）

【今回出来上がった機能】
・簡易な会員登録、ログイン機能
・画像表示機能
・画像が時間で切り替わる機能
・画像表示フィルタ機能

ただ、サーバ側とフロント側どちらもコードを書いて作るとなると多少時間がかかるのではないでしょうか。

今回、完成度は低いものの、Vue.jsを一から勉強した割には最短経路でプロトタイプできた気がする、という経験から記事を書いてみます。
また、サーバサイドのコードを一切書いていません。

フロントエンド専門の初学者の方や、ポートフォリオを最短で作りたい方などに参考になれば幸いです。

技術紹介の前に

私は普段、ほとんどサーバサイドのコード(PHP, Laravel)を書いています。フロントのコードを書くとしてもバニラJSかJQueryを少し書くくらいでした。(最近Reactを書く必要に駆られていますが)

そんな人が書く記事だというところをわかっていただけると嬉しいです。

今回は最短で作るために、基本的なvueとfirebaseの連携がなされているテンプレートリポジトリをForkして使わせていただきました。

以下簡単な技術紹介をします。

Vue.js

Evan You 氏が作った最高にクールなフロントエンドライブラリです。

個人的な観測では、VueはFacebookが作っているReactと同じくらい人気だと思います。

学ぶにはこちらの書籍がおすすめです。

また、上記のテンプレートで使われているライブラリについても少し学習しました。

Vue Class Component

Vue Property Decorator

普段書き慣れた方法でフロントエンドが実装できることに興奮しています。

@Component
export default class Home extends Vue {
 propertyA: string = "";

 get userName(): string {
   if (this.$store.state.user) {
     return this.$store.state.user.displayName;
   }
   return "";
 }
}
</script>

↑ こういう書き方ですね。

私は滅多な理由がなければ上記リポジトリに合わせたVueの書き方に合わせていこうと思っています。

Firebase

Googleが提供するmBaaS(mobile Backend as a Service)です。

たくさんの機能がありますが、主に使う機能は以下だと思います。

・Authentication
・Database
・Storage
・Hosting
・Cloud Functions

今回はAuthentication、Storage、Hostingを使っています。

どれも設定が簡単すぎて興奮しています。

Authentication、Storageは元々設定してあるのですが、Hostingは以下の記事のビルド部から参考にしました。

といっても、これすら２コマンドくらいで終了なのですが。。

静的サイトのホスティングはこんなに簡単になったのかと感慨深い気持ちです。似たような感じで他にはAWS Amplifyもありますね。

その他

フロント弱者なのもあって、Promiseについて理解が浅いためこれらの記事を参考にしました。めちゃくちゃ丁寧な記事(と書籍)です。

Typescriptについてもまだわからないことだらけなのですが、現代Web Developerには必須になりそうなので頑張って勉強中です。

最後に

Satoshi Nakajima さんのリポジトリを元に勉強しました、非常に感謝しています。

彼もVue + Firebaseをすごく推していて、これらの勉強を始めるきっかけとなりました。

読んでいただきありがとうございました！
ここまで読んでくださったみなさんもぜひなにか作って試してみてください！

質問があれば私のtwitterまで！