Webアプリ作成の練習として文字数カウンターを作ってみた
成果物
以下のものを作りました。文字を貼り付けると、文字数を数えてくれます。
Webアプリを作ってみたかった
ProgateでJavaScriptを学び、Paizaスキルチェックで問題を解いているうちに、何か自分でもWebアプリっぽいものを作りたくなってきました。しかし、まだバックエンドはまだほとんど勉強していません。ゆえに、HTML/CSS + JavaScriptだけで完結できるものを作りたい。
そんなことを考えているうちに、割と文字数カウンターなら簡単に作れそうだなということに気づきました。
「文字数 カウント」などで検索すると、類似のものがたくさん出てきます。まあでも、こんなツールなんぼあっても良いですからね。練習がてらに丁度良いと思って、自分でいちからコードを書いてみることにしました。
やったこと
実装に際しては、以下のサイトがめちゃめちゃ参考になりました(というか、このサイトにあるコード2行をコピペするだけで、コアの機能は完成してしまうという……)
大したコード量でもないし、面倒くさいので1個のHTML ファイルにまとめてstyle も script も書いています。
上記の記事にない頑張りポイントとしては、入力文字から改行とスペースを取り去って字数カウントしているということがあります。
コードを書いた後は、GitHup Pages を使って公開。ボタンをぽちぽちするだけで公開できるので最高ですね。ついでにサブドメインを切ってみました。
その他にやったことしては
GAタグを入れた
OGP設定をした
faviconを付けた
くらいです。
感想
いつもブラウザで使っている文字数カウンターが思いのほか簡単に作れたので、拍子抜けしました。JavaScript初学者が最初に作るWebアプリとして丁度良さそうだなと思います。
サポートすると、僕がハートランドビールを飲み、これからも自我を保つのに役立てさせていただきます!