今回は jQuery を使ったテキストカウンターの作り方を紹介します。
作るのはカウントアップとカウントダウンの二種類です。
カウントアップは、ユーザーが入力した文字数をカウントして表示するという基本的な文字数カウンターです。
カウントダウンは、あと何文字入力できるか、残りの文字数を表示します。入力できる文字数が決められているときに便利な機能です。
たとえば、Twitter では入力制限を超えると赤い文字で超過文字数を表示してくれます。
簡単に実装できるものですが、あると便利な機能です。
ぜひご自身のサイトにも実装してみてください🙂
JavaScript での実装方法はこちら
動画
解説
HTML の作成
まずは HTML でフォームを用意します。
今回はテキストエリアや文字を見やすくするために Bootstrap を使用していきます。
Bootstrap を使えば自分で CSS を書かずにキレイなフォームやボタンを使うことができるのでとてもオススメです。
これから書く HTML の6行目はこちらのリンクの CSS をコピペしています。
Bootstrap の詳しい使い方はこちらでも紹介しています。
HTML ファイルを作成して、以下のコードを追加してください。
id 名について
id 名（id="この部分"）は jQuery で要素を取得するために使います。
クラス名について
クラス名（class="この部分"）は全て BootStrap のスタイルを反映するために書いています。
Bootstrap で指定されているものなので、変更してしまうとスタイルが反映されないのでご注意ください。
CSS の追加
このままだとフォームが見づらいので、少しだけスタイルを調整します。
7~16行目を追加してください。
このようになっていれば準備完了です。
jQuery の読み込み
jQueryを読み込む方法は２つあります。
- ファイルをダウンロードする
- CDNを利用する
今回はダウンロードではなく CDN（コンテンツデリバリネットワーク）を利用します。
CDN を使うとインターネット経由でファイルを読み込むことができるので、ダウンロード不要で簡単に使うことができます。
CDN を提供しているサイトはいくつかありますが、今回は私がいつも使っている「Google Hosted Libraries」を紹介します。
「Google Hosted Libraries」で検索、または Google Hosted Libraries にアクセスして jQuery のコードをコピペします。
4~9行目を追加します。
カウントアップの実装
カウントアップは、文字を入力する毎にテキストエリアの文字数を取得・表示していきます。
3~5行目を追加します。
keyup はキーボードを押して指を離した時に呼ばれるイベントです。
4行目では「テキストエリアの文字数を取得して #count1 に文字数を表示する」という処理を書いています。
#countUp に対して keyup イベントをセットしているので $(this) は #countUp を指しています。
カウントダウンの実装
カウントダウンでは入力できる残りの文字数を表示します。
ここでは文字制限数を30文字にして、30文字を超えた場合は -2 のように超過文字数を表示します。
6~15行目を追加します。
remain は入力できる残りの文字数です。
remain が 0 より小さくなった場合は テキスト色を赤に、まだ入力できる場合はテキスト色をグレーにしています。
完成
上手く動かないときは最後にサンプルコードを載せているので、そちらと比較してみてください。
どこでエラーが起きているかわからない時
ブラウザのデベロッパーツール（開発ツール）を開いて、コンソールを確認してみてください。
Chrome の場合
ブラウザの右上にあるメニューから「その他のツール」→「デベロッパーツール」を開きます。
「Console」を選択するとエラーを確認できます。
サンプルコード
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
1. TechAcademy（テックアカデミー）
オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。
2. CodeCamp（コードキャンプ）
一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。
