1.ポートフォリオ紹介

https://freetalk1.web.app/
FREETALKは、普段から外国語でコミュニケーションする機会がない人たち同士が集まって外国語で会話をすることで、外国語でのコミュニケーション力を"無料"で養おうというサービスです。 語学教室を投稿でき、生徒を募集し、SNSな機能でユーザー同士が交流し合うことで　”みんなでより良い語学教室を構築していこう”　をコンセプトにしております。 モデルにした既存アプリはMeetupと言われるイベント投稿のアプリで、それにSNS機能を加えてユーザー同士の交流を発生させたら面白くなるのではと思い作成しました。

Meetup(https://www.meetup.com/ja-JP/)

◆トップページ

◆レスポンシブデザイン

スマホにも対応したUI設計です。

◆多言語対応

日本語/英語に切替可能です。

2.基本的な使い方

■語学教室を投稿してみよう！

メニューの「投稿する」にてお好みの語学教室の情報をフォームに入力し、投稿できます。投稿した時点でメンバー募集が行われております。

■語学教室に参加してみよう！

詳細画面下部の「参加する」ボタンからその英会話教室へ参加登録ができます。左側の「出席者PickUp」に参加予定者一覧が表示されています。

■SNS機能を使ってユーザーと交流しよう！

お気に入りな語学研修にいいねができます。

好きな語学研修を投稿するユーザーをフォローできます。

ユーザーへ掲示板形式のメッセージを投稿できます。

3.開発背景

●　現職の語学研修企業でなぜそこまで高額なレッスン費用になるか調査した結果、主に”講師の質”が要因となっており、外国語初学者にとって高質な講師から教わるよりもとりあえず外国語で喋る機会を多く作ることが大事なのではと思ったため。

4.使用技術

使用箇所	使用技術名
フロント	Vue.js／Vuetify
データベース	Firebase Realtime Database
ユーザーアカウント管理	Firebase Authentication
アップロードした画像の格納先	Firebase Strage
デプロイ先・独自ドメインの接続	Firebase Hosting
開発環境	VueCLI
ソース管理	Git／GitHub

5.全体構成図

システム全体の構成は以下の通り、Firebaseによるサーバレスアーキテクチャとなっております。

6.データベース設計

できるだけ浅い階層のデータベース設計を心掛けました。 FirebaseのRealtime Databaseは、データ取り出し時に親から子ノードまで全データを取得するため、データの階層が深いと思いもよらぬ無駄なデータ転送やパフォーマンス低下を招くことがあるためです。

7.工夫点

●　隙間時間にどんな語学教室があるか頻繁にチェックするという "ユーザーの滞在時間が長い" サービスになる想定だったので、ユーザーをロードする時間などで待機させないSPAで作成することを考えました。

●　アプリの多言語化する際に、不自然な翻訳になるGoogle翻訳でなく、外国の方でもわかりやすいように意訳を自由にJSONファイルへ設定できるプラグインvuei18nを使用しました。

●　以下のように様々なカテゴリーから投稿を絞り込めるようにして高いユーザービリティを心がけました。

【例１】「いいねの投稿・参加登録した投稿・自分の投稿」に絞り込みできます。

【例2】自分がフォローしたユーザーの投稿のみに絞り込みできます。

8.難しかったところ

●Realtime Database(NoSQL)でのデータベース設計

データの重複を抑えて（正規化）テーブル同士を結合させることで一貫性を持たせるRDBの設計と違い、データをあえて重複させる（非正規化）ことでデータのネストを浅くすることが求められるので、「どのデータを重複させれば効率的な設計になるか」ということを自身で考えなければいけないところに難しさがありました。NoSQLによるデータベース設計特有の「自由度の高さ」があるからこそ生じる難しさだと実感しました。

●コンポーネント間のデータのやりとり

Vue.jsの$emitとpropsを使用した親コンポーネントと子コンポーネント間でのデータやりとり方法について理解するのに苦労しました。 簡単なカウンターアプリを作成していく過程で徐々に理解度を深めていきました。

●VuetifyでのUI作成

Vuetify公式サイトでのサンプルコードを理解して自身のコードに当てはめていく要領を掴むことに時間を要しました。

９.実装機能

実装機能	説明
CRUD機能	基本機能である　Create（生成）、Read（読み取り）、Update（更新）、Delete（削除）
ユーザー登録	メールアドレスとパスワードをFirebase Authenticationsにユーザーアカウントとして登録できます。
多言語機能	プラグインvuei18nにより日本語と英語の切替を行えます。
ログインログアウト	Firebase Authenticationsに登録されているメールアドレスとパスワードで認証を行いログイン処理をします。
ゲストログイン	メールアドレスやパスワードを登録したりSNSアカウントを使用しなくても気軽にログインできます。
SNSログイン	Googleアカウントを使ってログインできます。
出席者登録／出席者一覧表示	参加したい英会話教室へ出席登録ができ、出席登録した英会話教室一覧をプロフィールで表示できます。
プロフィール画像のデフォルト設定／変更	新規でログインしたユーザー向けでデフォルトアイコンが設定されております。編集画面にて変更ができます。
メアド・パスワード変更	Firebase Authenticationsに登録されているメールアドレスやパスワードを変更できます。
バリデーション	新規登録・ログイン・登録情報変更のときにパリデーションが表示されます。
画像アップロード	英会話教室のイメージやユーザーアイコンの設定のときに画像をアップロードしてFirebase Strageへ格納できます。
いいね／いいね一覧表示	英会話教室へお気に入り登録できます。登録した英会話教室一覧をプロフィール画面で表示できます。
投稿一覧表示	ユーザーが投稿した英会話教室一覧をプロフィール画面で表示できます。
ユーザーフォロー／フォロワー	ユーザーをフォローしたり自分のフォロワーを確認できます。
絞り込み検索	自分がフォローしたユーザーのみの投稿へ絞り込みできます。
ページネーション	投稿された英会話教室一覧がページネーションで表示されます。
リアルタイム検索	検索したいキーワードに引っかかった英会話教室のみがリアルタイムで表示されます。
コメント投稿／返信投稿	各ユーザーの評判やリクエストを投稿したり返信できます。