制作物：改行ツール

文章のスペースを区切って改行にしてくれるツールを作成しました。
スペースは半角でも全角でも対応し、1文字でも連続していても1つの改行になるようにしています。

例

もうすぐ　新しい 朝が  　 来る
↓
もうすぐ
新しい
朝が
来る

web上で公開はしていません。
制作時間：約15時間

使い方

文字を入力するのみです。そうすれば処理が開始します。
改行はスペース区切りになっています。
スペース区切りで改行したい文章がある時、コピペーして貼り付ければ自動で改行します。

制作したきっかけ

仕事をしている時に、大量の文章をスペース区切りで改行したい場面があったことがきっかけです。
改行ツールはネット上にたくさんありますが、コンプラ的に社内情報を載せてもいいのだろうかと思い、自分で作ろうと思いました。
また、Go言語を使う練習にもなると思ったのも理由です。

使用技術

HTML, CSS, JavaScript, Go1.17.3

処理の流れ

textareaに文字を入力
-> fetchで文字をbodyに入れて、POSTでリクエストを送る
-> goファイルで文字を改行させ、レスポンスで返す
-> 受け取った文字をtextareaに表示する

工夫した点

• google翻訳のように、文字を入力した瞬間に処理が行われること
• 入力された文字が全て表示されるように、textareaの高さを自動調節にしたこと
• 半角と全角両方のスペースに対応するようにしたこと
• スペースが連続になっている場合、1つの改行に変換するようにしたこと
• なるべくコンポーネントを細かくするように意識したこと

苦労した点

1. httpのデータ受け渡し

http通信の実装経験がなかったため苦労しました。
headerやbodyに何を入れるべきか、jsonファイルを使うべきなのか、どのようにheaderやbodyにデータを入れられるかなど、知らないことがたくさんある状態でした。
また、GoだけでなくJavaScript内のコードでもhttp通信を行う処理を書かなくてはいけないため、時間がかかりました。

1つずつ調べてはコードを書き、トライ＆エラーをして実装を完了できました。

2. css、jsファイルをhtmlファイルに反映させること

goでhtmlファイルを表示する方法は知っていましたが、css・jsファイルをhtmlに反映させる方法は知りませんでした。
この方法のやり方自体は簡単でしたが、1字でも違うとhtmlに反映されないため、自分のコードの間違っている箇所を探すのに時間がかかりました。

そもそも方法が異なっているのでは？と考え、ネット上にあるコードをコピペして試し、その方法が正しいことを確認してから自身のコードの問題点を探しました。

修正したい部分

• スペース区切りだけでなく、カンマや句読点区切りも追加したい
• アーキテクチャをもっとしっかりしたい
• httpのheaderやbodyに設定する値をもっと明確な理由で決めたい