LoginSignup
3

More than 3 years have passed since last update.

Rails Tutorialのファイルサイズのチェックに使ったjQueryのコードを読み解く

Last updated at Posted at 2020-03-12

こんばんは。Shota(@Mii4a2501)です。
突然ですがRails Tutorial経験者の方、こんなコードを目にしたことはありませんか?

$('#micropost_picture').bind('change', function(){
  var size_in_megabytes = this.file[0].size/1024/1024;
  if (size_in_megabytes > 5) {
    alert('Maximum file size is 5MB. Please choose a smaller file');
});

これはCarrierWaveで画像をアップロードできるようにした後、ファイルサイズの検証のために作られたjQuery文です。
ふとこのコードの意味を知りたいと思ったので一行ごとに内容を書いていこうと思います。

1行目

$('#micropost_picture').bind('change', function(){

$('#micropost_picture')は簡単ですね。
$はjQueryのインディケーターでid="micropost_picture"を指し示しています。

さて次のbindメソッドです。
このメソッドは第一引数にイベント('click'や'submit'など)に対し、第二引数にはコールバック関数を紐づけます。

第一引数の'change'イベントですが、意外とそのままの意味のようで、テキストボックスやチェックボックスなどのvalue値が変更される際のことを指し示すようです。

第二引数のコールバックは、通常通り上から順に処理するのではなく、紐づけられたインスタンスやイベントが呼び出されたときに参照する処理方法のことです。非同期処理で散々お世話になること間違いなしですね。例えると、関数くんAに関数くんBを呼び出してもらう感じです(間違ってたらすいません!!)

Railsを勉強している方だと、Rspecのletをイメージするとわかりやすのではないかと思います。

2行目

var size_in_megabytes = this.files[0].size/1024/1024;

var size_in_megabytes
ここも最初同様、簡単です。
varはvariable(変数)の略でそのまま変数宣言です。

jQueryのthisですが直前の$で指し示した要素を指すので、この文中ではthis = $('#micropost_picture')となります。
(ここも間違えてたらすいません。。。)

その後、files[0]input type="file"に入れられた画像を取得。sizeメソッドで容量を確認して1/1024^2することでbyteをMBに変換しています。

3行目

if (size_in_megabytes > 5)

条件文でおなじみifですね。
写真の容量が5MB以上の時に条件文内での処理を行います。

4行目

alert('Maximum file size is 5MB. Please choose a smaller file.');

alertはダイアログを表示する際用いるメソッドです。これも避けては通れないものの一つではないでしょうか。

最後に

ここまで読んでくださった方、お付き合いいただきありがとうございました!
細かく解説しすぎて冗長感が出てしまいましたが、誰かの助けになったら幸いです!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3