はじめに
第1章 開発環境について
第2章 YouTube Data APIを有効化する
第3章 Go & Nuxtプロジェクトを作成する
第4章 トップページを作成する
第5章 動画再生ページを作成する
第6章 検索機能を追加する
第7章 Firebaseを使ってユーザー認証機能を作る
第8章 DBを用意する
第9章 お気に入り追加・削除機能を追加する
第10章 お気に入り一覧ページを作成する
第11章 リフレッシュトークンを使ってアクセストークンを再取得する
本書を手に取っていただき、誠にありがとうございます。昨今の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」で頒布されたものを底本としています。
本書で説明するWebアプリケーションの開発について、筆者の執筆時点での開発環境について紹介します。以下に開発環境のOSや使用したツールのバージョン等を記載しますので、ご参考にしてください。
・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
本書では、DBにDocker1のMySQLコンテナを使用します。Dockerの詳細については取り扱いませんが、公式ドキュメント等を参照して、DockerとDocker Composeを実行可能な環境を構築してください。Dockerは必須ではありませんので、Dockerを使用せずにDBを構築しても問題ありません。その場合は、アプリケーションからDBへの接続設定にご注意ください。
dep2はGo言語におけるパッケージ管理ツールです。depはvendorディレクトリーにパッケージをインストールするため、プロジェクトごとにパッケージを管理できます。depのインストール方法については公式サイトを参照ください。Macの場合は、HomeBrewを使ってインストールできます。
$ brew install dep
npmはNode Package Managerの略で、Node.js3のパッケージ管理に使用します。Nuxtプロジェクトで使用するパッケージをインストールする際に使用します。また、本書ではNuxtプロジェクトの作成時に、npxを使用します。npxはnpmのバージョン5.2.0からバンドルされています。
本章では、YouTube APIを使用するためのプロジェクトの作成と、APIの有効化について解説します。
本書で解説するアプリケーションはGoogleが提供しているYouTube Data API V3を使用します。APIを使用するには、Google Cloud Platform(以下「GCP」という)のプロジェクトを作成し、そのプロジェクトでAPIを有効化する必要があります。
Google Cloud Platformにログインして、ダッシュボード1を開きます。
GCPプロジェクトの作成手順の例を次に示しますので、参考にしてください。
画面上部の「プロジェクトの選択」をクリックします。
モーダル内の右上の「新しいプロジェクト」を選択します。
任意のプロジェクト名と組織を設定して作成ボタンをクリックします。
作成が完了すると、プロジェクトのダッシュボードに遷移します。プロジェクトの作成については以上です。次はAPIを有効化します。
次のURL、またはダッシュボードのメニューから「APIとサービス」2>「ライブラリー」を選択します。
ライブラリー検索画面で「YouTube Data API v3」を検索します。
検索結果に「YouTube Data API V3」が表示されるので、選択します。
APIの詳細画面で「有効にする」ボタンをクリックしてAPIを有効化します。
APIの有効化が完了したので、次はAPIキーを取得しましょう。
YouTube APIは実行時にAPIキーを必要とします。本節ではAPIキーを取得する方法を説明します。
YouTube Data APIのダッシュボードに表示されている「認証情報を作成」リンク、またはサイドバーの「認証情報」メニューから認証情報の作成画面に移ります。
「プロジェクトの認証情報の追加」では、次の手順でAPIキーを取得します。
1.「使用する API」に「YouTube Data API v3」を選択する
2.「API を呼び出す場所」に「ウェブブラウザ(Javascript)」を設定する
3.「アクセスするデータの種類」に「一般公開データ」を選択する
4.設定後に「必要な認証情報」ボタンをクリックする
設定が完了すると、APIキーが発行されます。このAPIキーはYouTube APIの実行時に使用しますので、保存しておいてください。
APIは1日あたりの利用可能なリクエスト数に制限があります。リクエスト数が割り当てられた上限を超えると、リセットされるまでAPIが利用できなくなるので注意してください。利用状況については、GCPの「IAMと管理」「割り当て」で確認できます。