Reactを使った、海外向けのWebアプリケーションの個人開発の近況

前回の投稿から半年以上時間が空いてしまいました。

生きてます。財前です。

相変わらず、Reactを使った、海外向けのWebアプリの個人開発に取り組んでいます。

前回のReactのアクションゲーム第3弾を作ってみて思うことでは、Reactを用いたゲーム作成について書きました。

前回の記事の後半でも触れましたが、現在はアクションゲームではなく、「外国人向けの日本語学習Webアプリ」を作っています。

アプリのトップページはこちら：
  Lingual Ninja >>


この半年間で追加したものとしては、主に以下の３つです。

日本昔話から日本語を勉強するアプリ

こちらの機能自体は、以下のリンクからご覧いただけます：

  Japanese Folktales >>

こちらのアプリに関しては、前回の記事を記載した時点でもひな型はできていたのですが、こつこつコンテンツを投稿していました。

主にコンテンツはFacebookページに投稿していたのですが、少しずつ好評を頂き、現在では1万4000人ちょっとのフォロワーさんがいます。

また、インドネシアの高校の先生からFacebook経由で連絡を頂き、学校の日本語クラスの教材として、アプリの内容を使って頂けることになりました。

実際に誰かに使って頂けるというのは、作った側としてはとてもうれしいものです。

日本語の単語学習アプリ

上記の日本昔話のアプリも、ある程度好評を頂いたとは思うのですが、上記のアプリは少し「中級・上級者向け」であるように感じます。

日本語の文章を読める状態というのは、ある程度日本語を勉強した後の状態だと思います。

初心者を置いてけぼりにしてしまっている感覚がありました。

具体的には、私の妻を置いてけぼりにしている感覚がありました 笑

個人的な話になってしまいますが、私の妻はアメリカ人で、日本語は全く話せません。

すごーく簡単な単語（イヌとか）は知っていますが、文法の知識などは皆無なので、文章を読むことはできません。

「こんなに身近に最適なペルソナがいるのに、無視してアプリを作るのは、もったいないのではないか」という思いがありました。

ということで、もうちょっとレベルを落としたアプリを作ることにしました。

それがこの、単語クイズアプリです：

  Japanese Vocabulary Quiz >>

こちらは超シンプルな単語クイズですが、これぐらいであれば、日本語初心者の方でも、取り組むことができるかと考えました。

こちらは作成してから１か月も経っていないので、今後どうなるかはまだわかりませんが、単語をDBに登録するだけで新しいコンテンツが作れるので、私としてもコンテンツの追加が楽で助かります。

また、ついでに以下のようなクイズも作りました。

漢字クイズ：

  Japanese Kanji Quiz >>

こちらを作った経緯としては、

「どうせDBに日本語の単語を登録していくなら、ついでに漢字も登録して、２パターンのクイズを作ろう」

というものでした。

DBに以下のような単語情報を登録するだけで、「単語クイズ」と「漢字クイズ」の２つのページを同時に作成できるので、コンテンツを手軽に量産できて便利です…笑

さらについでに、単語の一覧も作りました。

単語一覧

  Japanese Vocabulary List >>

ひとつのジャンルの単語の数は少ないとはいえ、全部合わせるとかなりの単語数になります。

その全ての単語を、一気に確認できるページを、１ページだけ作りました。

意図としては、運よくSEOに引っかかってくれないかなぁ～というものです笑

一応キーワードプランナーで確認した感じでは、「Japanese Vocabulary List」はそれなりのトラフィックはありそうだったので…笑

ただ、単語を読み上げた音声をブラウザがダウンロードするのに時間がかかりすぎて、パフォーマンスは最悪なページになってしまいました…笑

作り始めてから１か月も経ってないので、まだ何とも言えませんが、検索エンジンでの上位表示は、難しいかもですね…(^ ^;)

こういう単語学習ツールを、最近は作っていました。

使用言語をJavaScriptからTypeScriptに移行した

これに関しては、完全に個人的な事情なのですが、

私自身が、仕事で来月から、フロントエンド開発チームに異動することになりました。

自分が働いている会社のフロントエンドチームでは主にTypeScriptを用いているので、練習もかねて、言語の移行を行いました。

正直かなり苦戦しましたが、無事全てTypeScriptに移行することができました。

とはいえ、前回の記事で紹介したアクションゲームなど、いろいろな機能を既にこのWebアプリに組み込んでしまっていたので、全てをきれいにTypeScriptに移行することはできませんでした…笑

具体的に言うと、結構anyを使っています。

（anyというのは、TypeScriptを使う上で、あまり推奨されていない構文です）

分量が多すぎて、全てを丁寧にカッコヨク移行することは、不可能だと判断しました…笑

そこに膨大な工数を割くのであれば、新しいコンテンツの作成にエネルギーをかけた方が生産的だと思いますし…(^ ^;)

（今後改修する予定がない機能を、一生懸命カンペキなTypeScriptに移行しても、メリットを享受できる機会がないので…）

一応上記の単語クイズなどの機能は、TypeScript移行後に作成したものなので、anyとかは使っていません。

とはいえ、まだ自分もTypeScriptを使いこなせているわけではないので、今後も開発を進めていきながら、カッコイイTypeScriptが書けるようになっていければと思います。

このReactアプリ自体は、１年以上前に作り始めたもので、その時点では自分はReactに一切触れたことがないレベルの初心者でした。

最初に作ったのは、こちらのHiragana Quizです…
  Hiragana Quiz >>

なつかしい…

一番最初に実装した機能のソースコードを改めて自分で見ると、書き直したくなるところもたくさんあります…
（折角React使ってるのに、直接DOM操作しまくってます… 直接DOMいじっちゃダメ、絶対）

今後さらにフロントエンド開発に慣れていけば、更に書き直したいような部分が増えていくのかもしれません。。。

とりあえず、機能として問題なく動いているのであれば、ある程度は目をつぶって、前向きに新しい機能の作成などにエネルギーを使っていければなぁ…などと考えている今日この頃です…

個人開発では、新規機能開発も保守も僕一人しかいないので、土日のみの開発では、かけられる工数に限度がありますしね…(;^ω^)

よっぽどひどい状態になったら、工数割いて一斉に書き直します…！！
申し訳ございません…！！

最後までお読み頂き、ありがとうございました！！

以上。生存報告でした。