目次

はじめに

対象読者について
免責事項
表記関係について
底本について

第1章 開発環境について

1.1 筆者の開発環境

第2章 YouTube Data APIを有効化する

2.1 GCPプロジェクトを作成する
2.2 APIを有効化する
2.3 APIキーを取得する
2.4 APIの割り当てについて

第3章 Go & Nuxtプロジェクトを作成する

3.1 Goプロジェクトを作成する
3.2 Nuxtプロジェクトを作成する

第4章 トップページを作成する

4.1 人気の動画を取得するAPI
4.2 人気の動画取得のアクションを作成する
4.3 人気の動画をAPIから取得して表示する

第5章 動画再生ページを作成する

5.1 Echoのコンテキストを使用する
5.2 動画の詳細情報を取得するAPIを作成する
5.3 動画再生ページを表示する
5.4 関連動画の取得APIを作成する
5.5 関連動画を表示する

第6章 検索機能を追加する

6.1 動画検索APIを作成する
6.2 検索結果を表示する

第7章 Firebaseを使ってユーザー認証機能を作る

7.1 Firebase Authenticationを設定する
7.2 Firebaseを使ったアカウント管理機能を実装する
7.3 ログイン機能を追加する
7.4 ログアウト機能を追加する
7.5 ログアウトリンクを追加する

第8章 DBを用意する

8.1 Dockerを使ってDBを用意する
8.2 Dockerのコマンドを確認する

第9章 お気に入り追加・削除機能を追加する

9.1 お気に入り追加・削除のAPIを作成する
9.2 動画再生ページにお気に入りアイコンを追加する

第10章 お気に入り一覧ページを作成する

10.1 お気に入りの動画一覧を取得するAPIを作成する
10.2 お気に入り一覧を表示する

第11章 リフレッシュトークンを使ってアクセストークンを再取得する

11.1 アクセストークンをデコードしてみる
11.2 リトライ用のメソッドを追加する
11.3 トークンを再取得する
11.4 トークン再取得処理の動作を確認する

はじめに

 本書を手に取っていただき、誠にありがとうございます。昨今のWeb開発においてGo言語(以下「Go」という)、そしてNuxt.js(以下「Nuxt」という)は高い注目を浴びています。GoやNuxtの習得に取り組んでいる方には、業務で必要としている、注目されている技術がどういったものかを把握しておきたい、などさまざまな理由があることでしょう。

 本書はGoやNuxtのドキュメントを読んだり、チュートリアルを試したりしたあとに、理解を深めるための次のステップとして、Webアプリケーションを作ってみようとお考えの方に向けて執筆しました。著者自身、実際にWebアプリケーションを作ってみることで、GoとNuxtを使った開発がどういったものになるかを理解できると考えました。当時、作ってみたかったWebアプリケーションがあったこともあり、GoとNuxtを用いてWebアプリケーションを開発しました。それが拙作の「Awesome Repository」1というサービスです。本書は主にその開発過程で得られた経験をもとに、執筆しています。本書を通じて紹介する内容が、読者がご自身で開発をする際の参考になることを願っています。

 本書で説明するコードはGitHubで公開していますので、よろしければ適宜参照してください。

 https://github.com/aiiro/youtube-manager-nuxt

 https://github.com/aiiro/youtube-manager-go

対象読者について

 本書はNuxtとGoのチュートリアルなどに触れた経験がある方を、対象読者として想定しています。

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

表記関係について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

底本について

 本書籍は、技術系同人誌即売会「技術書典7」で頒布されたものを底本としています。



1. https://awesomerepository.com

第1章 開発環境について

 本書で説明するWebアプリケーションの開発について、筆者の執筆時点での開発環境について紹介します。以下に開発環境のOSや使用したツールのバージョン等を記載しますので、ご参考にしてください。

1.1 筆者の開発環境

 ・macOS: Mojave 10.14.6

 ・Docker: docker desktop 2.1.0.1

 ・Go version: go version go1.12.7 darwin/amd64

 ・Echo version: v3.3.10

 ・node version: v11.12.0

 ・npm version: 6.10.0

 ・Nuxt.js: v2.9.1

1.1.1 使用ツール

1.1.1.1 Docker

 本書では、DBにDocker1のMySQLコンテナを使用します。Dockerの詳細については取り扱いませんが、公式ドキュメント等を参照して、DockerとDocker Composeを実行可能な環境を構築してください。Dockerは必須ではありませんので、Dockerを使用せずにDBを構築しても問題ありません。その場合は、アプリケーションからDBへの接続設定にご注意ください。

1.1.1.2 dep

 dep2はGo言語におけるパッケージ管理ツールです。depはvendorディレクトリーにパッケージをインストールするため、プロジェクトごとにパッケージを管理できます。depのインストール方法については公式サイトを参照ください。Macの場合は、HomeBrewを使ってインストールできます。

$ brew install dep

1.1.1.3 npm

 npmはNode Package Managerの略で、Node.js3のパッケージ管理に使用します。Nuxtプロジェクトで使用するパッケージをインストールする際に使用します。また、本書ではNuxtプロジェクトの作成時に、npxを使用します。npxはnpmのバージョン5.2.0からバンドルされています。

1. https://www.docker.com/

2. https://golang.github.io/dep/

3. https://nodejs.org/ja/

第2章 YouTube Data APIを有効化する

 本章では、YouTube APIを使用するためのプロジェクトの作成と、APIの有効化について解説します。

 本書で解説するアプリケーションはGoogleが提供しているYouTube Data API V3を使用します。APIを使用するには、Google Cloud Platform(以下「GCP」という)のプロジェクトを作成し、そのプロジェクトでAPIを有効化する必要があります。

2.1 GCPプロジェクトを作成する

 Google Cloud Platformにログインして、ダッシュボード1を開きます。

図2.1: Google Cloud Platform ダッシュボード

 GCPプロジェクトの作成手順の例を次に示しますので、参考にしてください。

 画面上部の「プロジェクトの選択」をクリックします。

図2.2: 新しいプロジェクトを作成1

 モーダル内の右上の「新しいプロジェクト」を選択します。

図2.3: 新しいプロジェクトを作成2

 任意のプロジェクト名と組織を設定して作成ボタンをクリックします。

図2.4: 新しいプロジェクトを作成3

 作成が完了すると、プロジェクトのダッシュボードに遷移します。プロジェクトの作成については以上です。次はAPIを有効化します。

2.2 APIを有効化する

 次のURL、またはダッシュボードのメニューから「APIとサービス」2>「ライブラリー」を選択します。

図2.5: APIとサービス メニュー

 ライブラリー検索画面で「YouTube Data API v3」を検索します。

図2.6: ライブラリー検索画面

 検索結果に「YouTube Data API V3」が表示されるので、選択します。

図2.7: APIを検索

 APIの詳細画面で「有効にする」ボタンをクリックしてAPIを有効化します。

図2.8: APIを有効化

 APIの有効化が完了したので、次はAPIキーを取得しましょう。

2.3 APIキーを取得する

 YouTube APIは実行時にAPIキーを必要とします。本節ではAPIキーを取得する方法を説明します。

 YouTube Data APIのダッシュボードに表示されている「認証情報を作成」リンク、またはサイドバーの「認証情報」メニューから認証情報の作成画面に移ります。

図2.9: YouTube Data APIのダッシュボード

 「プロジェクトの認証情報の追加」では、次の手順でAPIキーを取得します。

 1.「使用する API」に「YouTube Data API v3」を選択する

 2.「API を呼び出す場所」に「ウェブブラウザ(Javascript)」を設定する

 3.「アクセスするデータの種類」に「一般公開データ」を選択する

 4.設定後に「必要な認証情報」ボタンをクリックする

図2.10: プロジェクトの認証情報の追加

 設定が完了すると、APIキーが発行されます。このAPIキーはYouTube APIの実行時に使用しますので、保存しておいてください。

図2.11: プロジェクトの認証情報の追加

2.4 APIの割り当てについて

 APIは1日あたりの利用可能なリクエスト数に制限があります。リクエスト数が割り当てられた上限を超えると、リセットされるまでAPIが利用できなくなるので注意してください。利用状況については、GCPの「IAMと管理」「割り当て」で確認できます。

図2.12: 割り当ての上限

1. https://console.developers.google.com

2. https://console.developers.google.com/apis/library

試し読みはここまでです。
この続きは、製品版でお楽しみください。