知らない言語でウェブアプリ作ってみた

はい、というわけで、JavaScriptもCSSもぜんぜん書いたことないし読んだこともないのに、「こんなの作りたい」とChatGPTに相談して教えてもらいながら、作ってみました。朝日新聞の記事編集ソフトの動作をまねするウェブのアプリです。書評委員をつとめている方から、「指定通りの行数で書いたつもりなのに、なぜかずれてしまう。朝日の独自ソフトを手元で使える小宮山さんがうらやましい」と言われたので、それなら同じ動作をするアプリを作ったらいいんでは、と思いついたからです。

アプリはここ。

（新聞記事は行頭に句読点が来てはいけないとか、行末で括弧を開いてはいけないとか、MSWordでは再現が難しい独自仕様がいろいろあるらしいのです。なので、「この文章は新聞だと何行分になるのかな？」というのを確かめられるようにしたかったのです）

拡張子が.jsとか.cssとかなっているファイルなんかいじったこともなく、今回使ったReactというライブラリなんか名前すら聞いたことがなく、本当に何も知らない状態からだったのですが、週末の空き時間で何とかできました。

JavaScriptの編集画面。黒くて文字ばっかで、それだけでじゅうぶん怖い

句読点やカギ括弧を0.5文字分として扱うことで、行数を短くしたときに何行分になるかを確かめられる「圧縮モード」も実装できました（これは朝日の社内ソフトにはない機能）。

句読点や括弧などの特殊文字を処理したときに、記事全体が何行になるか調べられる。これは1行12字に設定しているとき

で、感想ですが、ひとまず形になるところまで持って行くのには、ChatGPTはものすごく役に立つ。でも指定したようには動いてくれないバグがいろいろ出て、それにいちいち「ちがうじゃん」「ここはダメ」と注文をつけても、バグはなかなか消えてくれない。というか、そのバグが直ってもほかのバグが出る。

句読点や括弧などの処理方法を記したコードはこんな感じです。

      if (!compressionMode) {
        currentLine += words[i];
        specialCharCount += 1;

        if (specialCharCount >= charsPerLine) {
          if (forbiddenChars2.includes(words[i + 1]) || forbiddenChars1.includes(words[i])) {
            output.push(currentLine.slice(0, -1));
            i--;
          } else {
            output.push(currentLine);
          }
          currentLine = '';
          specialCharCount = 0;
        }
      } else {
        const charCount = forbiddenChars1.includes(words[i]) || forbiddenChars2.includes(words[i]) || compressibleChars.includes(words[i])? 0.5 : 1;
        currentLine += words[i];
        specialCharCount += charCount;

        if (specialCharCount >= charsPerLine + 0.5) {
          if (forbiddenChars2.includes(words[i]) || forbiddenChars1.includes(words[i-1])) {
            output.push(currentLine.slice(0, -2));
            i = i - 2;
          } else {
            output.push(currentLine.slice(0, -1));
            i = i - 1;
          }
          currentLine = '';
          specialCharCount = 0;
        }
      }

プログラミング言語で表現すべきアルゴリズムを誤解の余地のない日本語にしたうえで指示を出すようにしたら、だいぶ改善されました。正直めんどくさいので、しゃあない正面から取り組むべぇと決心するまではかなりの時間を要しました。さらに、それでも残るバグについては、JavaScriptのコードをChatGPTに読んでもらって、「ここは何してるの」と質問することで意味を解読して、おかしなところを手作業で修正していきました。こんなことやりたくなかったけど、でもJavaScriptがすこーしだけわかるようになって、勉強になりました（今後使う機会があるか知らんけど）。

11/1追記：バグがあったので修正しました。やれやれ。あと、noteにはコードを公開する機能があるのに気づいたので，それを使ってみた。