そこそこ実用的な翻訳アプリを開発しましたので、その構成や作り方を記録しておきます。コード は MITライセンスですので、参考になるところがあれば部分的にでも使ってみてください。 目次 (1) 概要編 【このページ】 (2) 開発環境の準備 (3) 翻訳サービスの実装 (4) ログサービスの実装 (5) フロントエンド側の実装 (6) 学習用データの作成 具体的にはこんなアプリです NERM (Node.js + Express + React + Material-UI) ベースなWebアプリとして実装しました。 翻訳を実行した後に 5段階の評価ボタン が有効化されるのが特徴です。利用者が評価ボタンを押すことで、翻訳結果と評価がログに保存され、ポップアップ(これはデモ用)を表示した後、次の翻訳を続けることができます。 利用者は過去の翻訳ログを参照し、コピペして再利用することができます。この
![そこそこ実用的な翻訳アプリを開発してみる (1) 概要編 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d3f2a73b09e83d55870650b9bed8ce2af8d6c2c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgxJTlEJUUzJTgxJTkzJUUzJTgxJTlEJUUzJTgxJTkzJUU1JUFFJTlGJUU3JTk0JUE4JUU3JTlBJTg0JUUzJTgxJUFBJUU3JUJGJUJCJUU4JUE4JUIzJUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUU5JTk2JThCJUU3JTk5JUJBJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThCJTIwJTI4MSUyOSUyMCVFNiVBNiU4MiVFOCVBNiU4MSVFNyVCNyVBOCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjFmNGM4ZWJkNGQyMmNiYTBlMzViNGFjMTA5MWFlODY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweWFtYWNoYW4zNjAmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWVjYjQwYzExNTA0OTg5MzEwMjRlYzE3ZDdhNGQ1MTU2%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De868d668b83e87ddd1b9b470b84ec415)