Posted at

たぶん json だろうと思われる文字列を stringify するサービスを作った


概要

この記事は 個人開発 #2 Advent Calendar 2018 の 9 日目です。

ほぼタイトルだけで説明がつく感じにしました。


成果

POWERJson

https://fathomless-temple-88463.herokuapp.com/


アプリについて

Web アプリです。アーキテクチャは主に


  • 開発


    • AWS Cloud9



  • 言語・フレームワークなど


    • React

    • Material-UI

    • Webpack



  • デプロイ


    • Heroku



などです。個人利用がメインなので Heroku は今のところ無料枠ですが、アクセスが増えたら考えます。

単純に stringify するだけなので サーバ側でのデータ収集はしていません。機密情報が含まれる json をペーストしたりすることもあるので、敢えて集めないほうがいい場面もあるなと思ったのが理由です。

補足としては「たぶん json だろう」と思って stringify しているので、実際 json じゃないやつは Unexpected type エラーになります。が、それだけだと流石に分かりづらいので、そこから更に「Position n がなんの文字か」を補足するようにしています。以下サンプル。

こんな感じで前後数文字を併せて表示しています。あ、ここ間違ってるな!みたいなのはこれで判別できる。

また「文字列 value に json っぽい文字列がある場合」はエスケープ文字などを無視して無理やり json として展開します。以下サンプル。

どちらかというとこれがやりたかった、というのが正直なところ。


作った背景

デバッグ作業で気味の悪い拡張子でもおなじみの json データを stringify するのが最高にかったるい時があり、エディタであれこれしてもなんとかなることはなるんですが、もうなんかできればコピペだけで何とかならんかこれと思い、ある程度ざっくりとやってみたらまぁまぁ自分にとって必要なものができました。


コーディング開始からデプロイまで

3〜4時間、日数換算だと3日(一日1時間弱程度)。


作ってみて

AWS Cloud9 でコーディングしたものを Heroku にデプロイするという感じで、ローカル環境に開発アセットを持たないかたちでやってみましたが、思いの外ストレスなく、簡単に作ることができました。

Go で CLI ツールを作るように、React + Material-UI と Heroku で Web アプリを割とお手軽な感じで作れるのが良かったです。Web アプリとなると「あぁ〜デプロイもぉ〜めんどい〜」みたいになりがちですが Heroku なので簡単。もうちょっと色々やろうとするとお金がかかるのはご愛嬌ですが、シンプルなアプリであれば全然これでいいなと。

React であれば GitHub Pages でいいんじゃないのという気もしますが、まぁこれが一番慣れているので。


今後やりたいこと


  • もっと「たぶん json だろう」の範囲を広げたい


    • 文字列 value に入っている値をどこまでパースするか

    • ruby のハッシュ記法 { hoge: “fuga” } とかも強制的に json 化できたら見やすいのでは


      • かえって混乱するかも





  • ブラウザで結果をキャッシュさせてクリップボードみたいな使い方をさせてもよいかも

  • AI とか使って「この文字列の json っぽさは n %です」みたいなのも良いかもね


    • json ぽいからってなんの意味があるのか



  • 本当はあんまり json 使いたくない


明日

明日 10 日目は @yuji_saito さんの投稿です。開発中 json っぽい文字列のパースで困ったら是非こちらをご利用ください!