このポートフォリオサイトを制作した背景
海外サイトの公式ドキュメントを読み込んだり、エラーメッセージを確認する際に必ず必要になる英語スキル。
英語が使えるエンジニアになるために、英語学習アプリを開発しました。
・サイトタイトル名：Study-Tube
URL ：https://english-tube-c340d.web.app/
GitHub：https://github.com/MASAKi-cell/Study-Tube
・テスト用アカウント
メールアドレス：bje@gmail.com
パスワード ：English
※ユーザー管理はfirebaseのAuthenticationを使用してます。
※ゲストログイン機能もあります。
使用技術
・フロントエンド：Vue.js(VueRouter,Vuex,Vuetify,axios)、HTML、Sass
・バックエンド ：Firebase(Hosting,Authentication)
その他ツール
・VScode、Developer Tools
・ソースコード管理：GitHub
・進捗管理 ：Trello
主な機能一覧
・新規会員登録機能、ログイン/ゲストログイン、ログアウト、Googleアカウントのログイン機能
・New York Times APIを使用して英語記事表示機能
・Youtube Video APIから動画をキーワード検索、一覧表示
こだわりポイント
・ Vue.js上のデータフローを管理するためVuexを使用
・ シングルページアプリケーションを実現するためのVue Router使用
・ Vue.jsの開発環境を素早く立ち上げることができるVue CLI使用
・ Firebase Authenticationを使用したGoogleアカウント認証機能
・ Firebase Hostingを使用したアプリケーションの公開
・ Youtube APIで動画検索機能実装
・ New York Times APIで記事表示機能を実装
1. ファーストビュー
・ 最初にアクセスすると本サイトの説明文が記載された画面が現れます。
・ ヘッダーはvue-routerを使用し、router-linkで選択した画面が現れます。
2.新規会員登録/ログイン機能
・ ヘッダーの右側に会員登録機能、ログイン機能のボタンを配置しました。
・ ログインすると、動画検索や学習記録の欄が表示されます。
・ 新規会員登録にはサーバーとHTTP通信を行うためにaxiosを使用しました。
既に新規登録が完了している場合は、ログインボタンを押して登録したメールアドレスとパスワードを入力してログインします。
・ ログインユーザーはfirebaseのAuthenticationを使用してユーザーを管理しています。
###3.google アカウントログイン機能
・ googleアカウントでのログイン機能も追加しました。
・ stateでlogin_userを格納し、actionを使用してログイン、ログアウトの状態を管理しています。
4.動画検索
・ Youtube APIから取得した動画を表示させることができます。
・ 検索フォームからキーワードを入力して動画を検索することができます。
5.記事表示機能
・ New APIから取得した記事を表示させることができます。
6.学習記録機能
・ 日々の学習状況を記録することができます。
開発を通じて学んだこと
・firebaseの使い方
認証、デプロイといったバックエンドの実装がfirebaseを使って出来るようになりました。
・Vuexの使い方
最初はVuexについて苦手意識がありましたが、実際に使用してみると色々な機能が実装できることが分かりました。
・Vue.jsにおけるSPAの作り方
SPAの下準備から各ページ作成・Vou-router調整ができるようになりました。
今後実装していきたい機能
・ 条件を絞り込んだ検索機能
・ いいね機能
・ お気に入りをストックする機能
参考にした教材
公式ドキュメント
・axiosを利用したAPI使用例
・認証付きの簡易チャットを作る！
⇒ アプリを作成する為に、まずは公式のドキュメントを参考にしました。
Vue.jsにおけるSPAの作り方
・Vue.js】【SPA】の作り方をわかりやすくまとめてみた【初心者向け】
⇒ SPAについて詳しく記載されたサイトです。
created, mountedのライフサイクルフック
vue.jsのcreatedとmountedの違いを目で見て理解
⇒ vue.jsのcreatedとmountedの違いが判りませんでしたが、このサイトを見て理解が深まりました。
Vue.js参考書籍&動画学習
・Vue.jsのツボとコツがゼッタイにわかる本
⇒ Vue.jsの事が丁寧に解説されており、Vue.jsの初心者にとってはちょうど良い内容かと思います。
・プロフェッショナルWebプログラミング Vue.js
⇒ 同じくVue.jsの書籍です。
・Udemy 超Vue.js 2 完全パック (Vue Router, Vuex含む)
⇒ Vue.JSの基礎から、仮想DOM、Vue CLIを使った開発方法などVue.jsの全体的な内容を学ぶことができました。
・Vue.js + Firebaseで作るシングルページアプリケーション
⇒ Firebase Authenticationを使った認証機能をメインに学ぶことが出来ました。
・Learn how to build app with API in Vue js tutorial
⇒ 海外の動画ですが、Web APIをVue.jsで実装方法について理解が深まりました。
・PythonでぐるなびAPIを扱おう | Python活用シリーズ
⇒ Web APIのことが説明されています。
・初心者のためのYouTube API入門～基本編～
⇒ Youtube APIの実装方法について。
・Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例
⇒ この記事ではNew York Times APIをaxiosで実装する方法について解説されています。神記事です。
反省点
・axiosを利用したHTTPリクエストやサーバーサイドの知識を深めていく必要があると感じました。
・これまで、GitHub DesktopでGitHubにアクセスしてましたが、今回はコマンドプロンプトを使用してコードを管理しました。
ただやり方がわからず、もっと理解を深めていく必要があると感じました。
・Vuexを使用した状態管理についてもっと学習していきます。
最後に
Vue.js初心者で、いろいろコードの間違いがあると思いますので、ご指摘いただけると助かります。
最後まで読んでくださり有難うございました。