はじめに
この記事は鈴鹿高専AdventCalendar2021の10日目の記事です。
問題提起
皆さんTwitterは使っていますよね？
Twitterを使っていると感情が昂ることが多々あると思います。
図1：Twitterで感情が昂るシーンの例
そんなとき、以下のようなツイートをすることはありませんか？
図2：オタクのツイート
このように文字の間にスペースを入れると、単純に「最高すぎる！」と呟くより感情の昂りを表現できますよね。
しかし、この文字の間にスペースを入れる表現に関して、自分は一つ納得いかないことがあります。
それは、、、
感情の昂りを表現したいのに「文字の間にスペースを入れる」冷静さが求められる
これです。
例えば上記のツイートをする場面を考えてみてください。
一つ一つ整理すると、以下の手順を踏む必要があることがわかります。
１. 文字の間にスペースが入っていない文章を入力する。
最高すぎる！|
２. 最初の文字の後ろにカーソルを持っていく
最|高すぎる！
３. スペースを入力する
最 |高すぎる！
４. カーソルを1つ右にずらす
最 高|すぎる！
５. 手順3, 4を繰り返す
これを見て思いませんか？
え！！感情が昂っているのに、こんな精密な作業を！？と
感情が昂っているため、本来であればこのような精密な作業はできるはずがありません。
しかし、インターネット上で自分の感情の昂りを表現するには、このような精密な作業をするための冷静さが求められるのです。
BLEACHの5巻冒頭と全く同じですね。1
この矛盾をなんとかするためには、普段通り文字を入力しつつも、
自動で文字の間にスペースを入力してくれる仕組みが必要なわけです。
というわけで作りました。
その名も「文字の間にスペースを入力してくれるジェネレーター」です！！
文字の間にスペースを入力してくれるジェネレーターとは？
アプリを開くと入力欄が表示されます。
このままだったら単なるhtml/cssを学び始めた人が作った画面。しかし、皆さんここに文字を入力してください。
ここからがマグマなんです。2
文字を入力すると、、、
自動で文字の間にスペースを入力してくれる！！！
あ と は こ れ を コ ピ ー す る だ け で 、 精 密 な 作 業 い ら ず で 文 字 の 間 に ス ペ ー ス が 入 っ た 文 章 を 用 意 で き る わ け で す ！
これでいつでも、冷静さを求められない感情が昂ったままのツイートができますね。
（もちろんインターネット上での発言には細心の注意を払いましょう）
こちらで公開しているので、皆さんもぜひ利用してください！
さいごに
Q：
感情が昂っているときに別のアプリを使って文字を入力なんてできなくない？
そっちの方が冷静さが求められそう....
そりゃそうだ
利用させていただいたもの
参考にさせていただいたもの
感想
Vueを使って何かを作るのは初めてでしたが、データプロパティ・算出プロパティを利用することで、
スペースを入れ込む処理や文字数をカウントする処理などを簡単に実装でき、触っていて楽しかったです。
また、GitHubPagesを使ったアプリの公開も、難しい設定なくできたのでオススメです。
今度はちゃんとしたものを作りたいと思います！