前のパートに戻る 完了して次のパートへ  

  0-1 はてなブックマーク風なサービスを作ってみよう!

本教材では Vue.js を使ってブックマークサービス pitmark (techpit + bookmark) を作成します。Vue.js とは JavaScript というプログラミング言語の上で動作する Web の UI を作成するためのフレームワークです。

バックエンドには Firebase というサービスを利用しますので、主に UI を作る事に焦点を当てています。Vue.js のよく使う機能を把握してもらい、簡単なアプリなら最後まで作る事が出来るようになることが最終的な目標です。

本教材で作成するサービスは はてなブックマーク を参考にしております。はてなブックマークを使用したことがない方は、まずはどんなサービスかを見てみてください。

参考: はてなブックマーク

教材を進めて行く上で質問項目がございましたら、「質問」の箇所からご質問ください。

学習内容


  • Vue.js を使った実践的な UI 開発スキルを学びます。
  • Bulma を使った UI 開発スキルを学びます。
  • Firebase Authentication を使った認証機能の開発を行います。
  • ブックマークの登録・スター機能の開発を行います。
  • Firebase Cloud Function の使い方を学びます。
  • Firebase Hosting を使ってサービスを公開する方法を学びます。

受講における必要条件


  • HTML/CSS の基礎知識
  • JavaScript の基礎知識

JavaScript を一度も触ったことがない方は、まずは Progate 等で学習することをおすすめします。

この教材の対象者


  • ドットインストール などの Vue.js の教材を見ながら簡単なサンプルアプリケーションを作ったことがある方
  • JavaScript を学んだことがあり、何かフレームワークを使ってアプリケーションを作りたい方
  • Firebase を使った簡単なアプリケーションについて学びたい方

学ばないこと


本教材では Vue.js を使ってサービス開発の流れを把握することを一番の目的としており、HTML・CSS の詳しい解説は行いません。細かく知りたい方はご自分で調べ手見てください。

作成するアプリケーションのイメージをつかもう


実際にどういったプアリを作成するかイメージをつかむために下記のリンクにアクセスして利用してみてください。

https://pitmark-prod.firebaseapp.com/

目次


0 章: はじめに

ここでは本教材を進める上での環境を整えたり、設計を解説します。

1 章: 新規 Vue.js アプリケーションの作成

新規に Vue.js アプリケーションを作成し、開発の初期設定を行います。

2 章: Firebase の初期設定

Firebase に登録し、様々な機能を利用する準備を行います。

3 章: 認証機能

Firebase Authentication を利用して認証機能を開発します。また、Bulma という CSS フレームワークを使用しておおまかな全体のデザインを決定します。

4 章: リファクタリング

処理を外部 JavaScript ファイルに抽出したり、コンポーネントを分離して再利用しやすくします。

5 章: ブックマーク登録機能

メインの機能である Web サイトのブックマーク機能を開発します。

6 章: トップページの作成

ユーザーがサインインした後に遷移するトップページを開発します。

7 章: スター機能

ブックマークコメントに対しスターを登録できるようにします。

8 章: プロファイルページ機能

自分自身のプロファイルおよび自分がブックマークした一覧を確認できるようにします。

9 章: 公開

Firebase Hosting にサービスを公開します。

Appendix: 付録

今回の開発では必須ではないですが、今後 Vue.js で開発するにあたって知っていると便利なことを記載しています。

議論

0 質問

このコースの評価は?