おはようございます。今日もnoteを書いていきます。まずは50日連続を目指します。これまでの取り組みは以下にまとめてあります。

現在、コメントを入力した内容をajaxで送信して、データベース上へ登録できるように取り組み中であり、（JRuby on Rails）を用いております。

今日はjqueryを用いて、テキストエリアのキーボードイベント＆キーコード取得ができるようにします。

動作環境（前提条件）

・Windows 10
・JRuby 9.1.17
・Rails 4.2.4
・bundler 1.17.3　（※バージョン「2.3.15」も同時にインストール済）

テキストエリアのHTML定義内容の確認

最初は、javascriptファイルへjqueryを用いたコードを記述する前に、（Railsアプリケーションプロジェクトデータの）HTML部分を定義するコードにて、テキストエリアがどのように定義しているのか、あらかじめ確認しておきます。

これまでで、chatコントローラーを作成済であり、chatコントローラーにてindexアクションにて取得できるWebページの内容を定義済ですので、その内容から、テキストエリアの定義を把握します。

Webページの内容を定義しているファイル名は「index.html.erb」であり、対象とするRailsアプリケーションプロジェクトデータの「app」⇒「view」⇒「chat」フォルダの下にあります。（以下はVisual Studio Codeを起動した場合の例です。）

その「index.html.erb」のファイル内容を以下に示します。

1  <div class = "real_chat">
2      <div id = "free_space">
3          <div id = "input_area">
4              <textarea name="comment"></textarea>
5          </div>
6      </div>
7
8      <div id = "history_space">
9          <div id = "output_area">
10             <table id = "result">
11             </table>
12         </div>
13     </div>
14 </div>

ここで、注目してほしいのは上記の4行目のところです。（4行目のみ以下に抜き出しますね。）

4  <textarea name="comment"></textarea>

textareaというタグが、今回対象とするテキストエリアを指しており、またそのテキストエリアに【name="comment"】というname属性が付いていて、「comment」という名前が付けられております。この【name="comment"】を利用して、jqueryからテキストエリアのキーボードイベントを呼び出すことが可能です。

テキストエリアのキーボードイベント＆キーコード取得

前章にてテキストエリアが【name="comment"】という名前が付けられているということがわかったので、その名前を用いて、javascriptファイルへテキストエリアのキーボードイベントの定義とキーコード取得を行ないます。

昨日、javascriptファイル「chat.js」をRails上で新規作成しましたので、そのjavascriptファイルを用います。（昨日の記事はこちら）

javascriptファイル「chat.js」の場所は対象とするRailsアプリケーションプロジェクトデータの「app」⇒「assets」⇒「javascripts」フォルダの下にあります。（以下はVisual Studio Codeを起動した場合の例です。）

作成したjavasciptファイル「chat.js」はまだ何も定義されていません。そこで、新しくテキストエリアのキーボードイベントの定義とキーコード取得を行なうコードを追加してみます。コードは以下を参考にします。

上記の場合は、javascriptファイルではなく、htmlファイルへ直接記載しているようですが、javascriptファイルに対しても同じように記載することができます。

新しく追加したコードの内容は以下の通りであり、全部で5行です。

1  $(function(){
2      $('textarea[name="comment"]').keydown(function(event) {
3          console.log(event.key);
4      });
5  })

1行目と5行目が気になる方もいるかと思いますが、説明が長くなりそうですので、その説明は次回に回します。すみませんm(_ _)m

まず、2～4行目から先に説明しますね。2～4行目がテキストエリアのキーボートイベントの定義部分です。

2行目にて以下が定義されているかと思いますが、前章にてHTML部分ではテキストエリアが【name="comment"】という名前が付けられていることがわかったので、jqueryにて【name="comment"】を用いてキーボードイベント（keydown：キーを押したときにイベント発生）を呼び出しています。

$('textarea[name="comment"]').keydown(function(event) {

また、eventという引数も定義されていますが、このeventの中に、キーコード（event.key等）のデータがあるので、eventというデータも使います。

3行目にて以下が定義されていると思いますが、console.logというメソッドはWebページにて「デベロッパーツール」を用いた時のconsole画面に、console.logメソッドの引数で指定したデータが文字列で出力することができます。

console.log(event.key);

4行目は『 }); 』というように、カッコの終わりが記載されていると思いますが、2行目から始まったテキストエリアのkeydownイベントの終わりを意味します。

実際に、Railsアプリケーションを起動して動きを確認してみましょう。起動して、ブラウザを開いてチャット画面にアクセスしてみる（例：localhost:3000/chat/index）と、以下のような画面が出てくると思います。

上の画面が出てきたら、「デベロッパーツール」を開いてください。「デベロッパーツール」の開き方は以下の通りで、「Google Chrome」「Brave」「Microsoft Edge」ブラウザ（chroniumをベースにしたブラウザ）ならば同じように開くことができると思います。（以下は筆者が記載した過去の記事の図からそのままコピペしたものであるため、現在とは少しチャット画面の構成が異なっています。）

「デベロッパーツール」を開いたら、以下のように「Console」タブを選択しておいてください。3行目にて定義した『console.log(event.key);』がこの「Console」タブ内の表示欄に出てきます。

そこで、テキストエリアに対して、何かしら文字を打ってみてください。
例えば、以下のような(1)～(3)の操作を実施すると、「デベロッパーツール」の「Console」タブの表示欄にその操作に対応する出力結果が表示されます。

これで、テキストエリアのキーボードイベント＆キーコード取得ができたことになります。

おわりに

ここまで読んでくださってありがとうございました。
ただ、先ほどjavasciptファイル「chat.js」の一行目に定義した

1  $(function(){

について説明ができていないので、消化不良感があります。

そのため、その説明を次回で行ってから次へとしっかり進みたいと思います。（先に知りたい方は、以下の参考記事に解説がありますので、そちらを見てください。）

次回もよろしくお願いいたします。