Webアプリ作成の練習として文字数カウンターを作ってみた

成果物

以下のものを作りました。文字を貼り付けると、文字数を数えてくれます。

文字数カウンター

Webアプリを作ってみたかった

ProgateでJavaScriptを学び、Paizaスキルチェックで問題を解いているうちに、何か自分でもWebアプリっぽいものを作りたくなってきました。しかし、まだバックエンドはまだほとんど勉強していません。ゆえに、HTML/CSS + JavaScriptだけで完結できるものを作りたい。

そんなことを考えているうちに、割と文字数カウンターなら簡単に作れそうだなということに気づきました。

「文字数　カウント」などで検索すると、類似のものがたくさん出てきます。まあでも、こんなツールなんぼあっても良いですからね。練習がてらに丁度良いと思って、自分でいちからコードを書いてみることにしました。

やったこと

実装に際しては、以下のサイトがめちゃめちゃ参考になりました(というか、このサイトにあるコード2行をコピペするだけで、コアの機能は完成してしまうという……)

テキスト入力欄の文字数をリアルタイム表示する方法 - JavaScript TIPSふぁくとりー

大したコード量でもないし、面倒くさいので1個のHTML ファイルにまとめてstyle も script も書いています。

上記の記事にない頑張りポイントとしては、入力文字から改行とスペースを取り去って字数カウントしているということがあります。

コードを書いた後は、GitHup Pages を使って公開。ボタンをぽちぽちするだけで公開できるので最高ですね。ついでにサブドメインを切ってみました。

その他にやったことしては

• GAタグを入れた

• OGP設定をした

• faviconを付けた

くらいです。

感想

いつもブラウザで使っている文字数カウンターが思いのほか簡単に作れたので、拍子抜けしました。JavaScript初学者が最初に作るWebアプリとして丁度良さそうだなと思います。