メソッド・変数名を日本語から変換するWebアプリ作りました

構成と仕組み、使った技術について書いていきます。

こんなアプリです。

 

フロントエンド側のコードはこちら↓

https://github.com/pei223/MethodNameCreator

 

このアプリで使ったプログレスバーについて記事書いてます。

CSS,HTML,画像使ってシンプルな円のプログレスバーを作る

 

構成


サーバーサイドはGoogle Apps Scriptで書かれていて、リクエストを受け取ってJSON形式のデータを返します。

フロントエンドはリクエストを整形して投げて、返ってきたJSONデータを使って画面にレンダリングします。

GASでLanguageAppという翻訳ライブラリを使って翻訳をし、カンマやit、theなどの一般的にメソッド名には不要な単語や記号、空白を削除し、スネークケースなどの指定した命名規則にあった形に変換します。

翻訳だけサーバーサイドでやって、その他の処理はフロントエンドでもよかったような気もしますが。。。

 

使った技術


サーバーサイド:Google Apps Script, LanguageApp

フロントエンド:React.js, Google client api, Bootstrap