実践型英語学習サービス【ヤクシテ】の技術構成

公開:2020/11/08
更新:2020/11/08
2 min読了の目安(約1800字TECH技術記事 2

こんにちは、きたじまです。

今年(2020年)の春に未経験から転職したばかりの、駆け出しエンジニアです。

先日、【ヤクシテ】という個人開発のWebサービスを公開しました。
サービスの詳細は以下のnoteで紹介しているのですが、今回は、技術構成について書いてみたいと思います。

個人開発に興味のある方の参考になれば嬉しいです。

https://note.com/ysk_vp/n/neff616798b5b

使用している技術

ヤクシテで使用している技術は、以下の通りです。

フロントエンド

Vue.js(Vuetify)
https://vuetifyjs.com/en/

バックエンド

Firebaseの各種サービス
Authentication, Cloud Firestore, Cloud Functions, Hosting

Googleの翻訳API

Vue.js×Firebaseがオススメ

僕は約半年ほどFlutter×Firebaseで個人開発をしていて、Firebaseについては経験があったのですが、Vue.jsを使うのは今回が初めてでした。

それでも、Vue.js×Firebaseの組み合わせは参考記事も多く、比較的簡単に開発を進めることができました。

実際に開発開始からリリースまで1ヶ月もかからず、個人開発の入門としてはかなりオススメです。
(未経験からの転職のためのポートフォリオに関しては、Firebaseを使うとバックエンドの学習にならないので、気をつけてください)

Vuetifyが特にオススメ

僕は10ヶ月ほど前に、RailsでポートフォリオとしてWebアプリを作った経験があるのですが、HTMLとCSSが苦手で、デザインが素人感丸出しでした。

転職してからも今のところHTML、CSSを使う機会はなく、スキルはその時から全く変わっていません。
むしろ、忘れてひどくなっているかもしれません。

そんなレベルでも、Vuetifyを使うと、めちゃくちゃ簡単にいい感じの見た目にすることができます。

公式ドキュメントでUIごとのサンプルコードがあるため、それをコピペ参考にするだけで、簡単に再現できます。

ヤクシテの機能とロジックについて

ヤクシテの機能は、↓こんな感じで、特に難しいことはやっていません。
・ログイン認証
・翻訳
・翻訳データの記録
・翻訳データの閲覧

先ほど書いた通り、認証にはFirebase Authenticationを使い、翻訳にはGoogleのAPIを使っています。

翻訳の処理は、Cloud Functionsを介して行っており、Functions内で、
・英文の翻訳→アプリ側に訳文を返す
・英文を単語ごとに切り分けて、単語ごとに翻訳→データベースに登録
という2種類の処理を行っています。

全体像は↓のようなイメージです。

まとめ

簡単な説明でしたが、Vue.jsとFirebaseを使うことで、駆け出しエンジニアレベルでも、いい感じのWebアプリを作れますよーというお話でした。

ただ、今後ユーザーが増えたり、新たな機能追加が必要になった際に、Firebaseがベストプラクティスではなくなる可能性も考えられます。

そういった点も含めて、今後の運用で得られたことがあれば、また共有できればと思います。

とりえあず、何事もやってみて経験するのが一番の学習になると思うので、この記事が個人開発の後押しになれば嬉しいです。

余談ですが宣伝

今回のヤクシテ開発も含め、趣味として個人開発をしているのですが、ほぼ毎日のように、「英語できた方が有利だな」 と感じます。

そんな悩みを解決するために開発したのが、このヤクシテというサービスです。

翻訳データが記録されるので、苦手な×よく使う英単語がわかり、英語学習の効率がグンと上がると思います。

「毎回Google翻訳に頼っちゃう、でもいつかは自力で読めるようになりたい・・・」 という方は、是非一度使ってみてください!

https://yakshite.work