24.jQueryってなんだ？② ～書き方と使い方～
昨日に引き続きjQueryについて整理していきます。
jQueryがどんなものか、どんなメリットがあるかという事を昨日はまとめました。
本日は書き方のルールと、使い方についてまとめていきます。
jQueryの書き方
JavaScriptを使いやすく簡単にしたものがjQueryでしたね。
jQueryで書けるものは、当然JavaScriptで書けるということですね。
それぞれ比較しながら見ると理解が深まるかと思います。
それではやっていきましょう。
まずはjQueryの基本の型から
デイトラでは
$('主語').動詞('補語')の文法ルールで書く
と説明されています。
そもそも英語が苦手な私は下記のようなイメージでざっくり捉えています。
$('操作・監視対象').やりたいこと('補足')
では、要素の指定方法から見ていきましょう。
要素の指定方法
早速コードを書いて見ていきます
JavaScriptの場合は
document.getElementById('test')
jQueryの場合は
$('#test')
ブラウザで読み込んだHTMLを指定するのがJavaScriptだと
document
の部分です。jQueryでは
$
だけです。
条件を指定して要素を取得するのは
getElementById('test')
です。
jQueryでは
('#test')
ですね。
JavaScriptは指定する要素や属性に合せてコードを書き分ける必要があります。
- 要素なら「getElementsByTagName(要素名)」
- クラスなら「getElementsByClassName(クラス名)」
- Idなら「getElementById(Id名)」
というように、書き分けます。
それがjQueryでは
- 要素なら('要素名')
- クラスなら('.クラス名')
- Idなら('#Id名')
というように、形は同じで名前の最初に判別記号をつけるだけで良いのです。
分かっていると非常に楽にかけますね。
ただJavaScriptの方が、コードを見た時に意味は伝わりやすい気もします。
getElementsByTagName「タグ名に基づいて要素を取得」ってわかりやすいですよね。
メソッドを使う
では、jQueryの代表的なメソッドを少し紹介します。
いやいやいや、メソッドって何？初めて聞いたんですけど！
と思ったそこのあなた。私も同じでした。
メソッド ＝ 関数のことだそうです。
こうした細かい違いも統一されておらず、独学にとっては混乱の元だと思います。
処理をまとめ、その「まとまり」に名前を付けて再利用できるようにしたもの。
という理解でいいかと。
わかりやすいwebページがありましたので、紹介します。
今日のまとめ
今日はjQueryの書き方について整理しました。
JavaScriptと比べながら見ていくのは、わかりやすいなと思います。
では、また。
23.jQueryってなんだ？ ～JavaScriptをより簡単に～
jQueryとは
JavaScriptのライブラリ１つで
JavaScriptをより簡単に記述できるようにしたもの
ということだそうです。
ライブラリとは
ライブラリって何でしょうか。
プログラムでよく利用される機能を切り出して、再利用しやすく纏めたものとのこと。
まず、ざっくりと
「ライブラリ」はプログラムを作る上で「使うもの」ということですね。
そして、よく利用される機能を切り出して、再利用しやすく纏めたものとのこと。
これは、身近なもので言うと
「テンプレート」とか「雛形」に似ていますね。
プログラム作成で使う
便利な雛形が大量に詰め込まれたファイル
という捉え方がしっくりきます。
ただ、文脈で「ライブラリ」が雛形１つを指している場合と、
全体を指している場合があるようです。
知らないカタカナは、都度調べて
どんなものかイメージしないと、
後々混乱の原因になるので注意して進めていきます。
どんなメリットがあるの？
デイトラで紹介されているメリットは３つあり、
- 短いコードで簡単にかける
- ブラウザごとの対応がいらない
- 便利なライブラリがたくさんある
です。
１つずつ見ていきましょう
短いコードで簡単にかける
JavaScriptで20行かかるコードも
jQueryを使えば2行で済むなんてこともある
だそうな。
現時点で私がわかるコードで比較してみましょう。
例えば、昨日学習したDOM操作のコード(JavaScript)
document.getElementById('test').addEventListener('click',function(){実行させたい処理};)
これをjQueryを使って書き直すと
$('#test').click(function(){実行させたい処理})
これぐらいは短くなります。
積み重ねて行くと、最終的にはかなりのコード量の差になりそうですね。
ブラウザごとの対応がいらない
JavaScriptでは、それぞれのブラウザに対応するためのコードを記述する必要がある。
しかし、jQueryでは各ブラウザに合わせた処理を組み込み済み。
ということらしい。
と言うかJavaScriptはブラウザ毎にコードの記述が必要だったのか…。
そっちの方が勉強になりました。
便利なライブラリがたくさんある
え、jQuery以外のライブラリの話？と思った、そこのあなた！
私もそう思いました。
これが「ライブラリ」という言葉が、
ライブラリ全体を指しているときと、
ライブラリの中の雛形の１つを指している時がある
ということです。
例えば、
大量にストックされているところを指さして「ジュース」という場合と
1本のペットボトルを指さして「ジュース」というのでは全然違いますよね。
先程のライブラリもこういう事だと思います。
紛らわしくないように書くと、
jQueryの中には便利な雛形が沢山あるよという事ですね。
今日のまとめ
- jQueryはJavaScriptのライブラリ
- ライブラリとは便利な雛形セット(もしくは雛形１つを指す場合も)
- コードが短く、ブラウザ対応不要で、便利な雛形が沢山というメリット
使わないと損のような感じですね。
確かに、比較コードは随分と短くなりました。
jQuery、JavaScriptを今後使って、０から１にすることよりも
「意味がわかる、改造できる」くらいの習熟を目指して進めていきたいと思います。
では、また。
22.DOM操作とは③ ～ボタンの操作とイベント監視～
昨日に引き続きDOM操作について整理していきたいと思います。
JavaScriptからボタンの操作
早速コードから書いていきます。
document.getById('test').click();
では１つずつ見ていきましょう
documentで、ブラウザで読み込んだHTMLファイルを取得します。
次に、
getById('test')
getById(引数)は引数に代入した文字列と同じIdを持つ要素を取得する関数ですね。
ですので、getById('test')とするとdocumentで取得したHTMLの中のIdが「test」の要素を取得します。ここでは、Id属性に「test」が設定されたボタン要素を用意しておくこととします。
最後は、
click()
click()関数は、その名前の通り要素をクリックする関数ですね。
ここでの動作は、先程のId属性に「test」が設定されたボタン要素をクリックします。
それでは全てを通して、再度確認してみましょう。
document.getById('test').click();
ブラウザに読み込まれたHTMLを取得し、
その中からId属性に「test」が設定された要素を取得、
そして取得した要素をクリック。
使い所のイメージがわかりませんが、
これで自動でクリックさせる動作が可能になりました。
既存ページに対してJavaScriptが適用できるなら、自動操作が可能になりそうですね。
イベントの監視
イベントってなんでしょう？
マウスのクリックとか、画面が読み込まれたとか
「状態の変化」と捉えられそうですね。
そして、「JavaScriptでイベント監視する」ということは
状態の変化があった時に何らかの処理をさせたい
ということです。
では早速コードを確認していきます。
window.onload = function(){ 実行させたい処理 }
window.onloadを言葉にするとそのまま
「画面が読み込まれた時」になります。
これは「画面の読み込みが終わった状態」という
状態変化を捉えているわけですね。
その時に、実行させたい処理を右側に書くことで、
画面の読み込みが終わった時に～～を実行するという動きが可能になるわけですね。
これは条件分岐でやったif(条件式)に少し似ている気がしますね。
もう１つ別のイベント監視について見てみましょう。
document.getById('test').addEventListener('click',function(){実行させたい処理};)
前半の要素の取得は「ボタンの操作」の所で説明済みなので割愛します。
addEventListener(引数1,引数2)を見ていきましょう。
これは引数1に指定したイベントが発生したら、引数2に設定した処理を実行する。
というものです。
ですので、
addEventListener('click',function(){実行させたい処理}
では、クリックイベントが発生したら、function(){実行させたい処理}が実行されるということです。
もちろんイベントを監視するのは、コード前半で取得済みのId属性が「test」の要素に対してですね。
今日のまとめ
- ボタン操作は要素を取得して、関数を使って行うことが出来る。
- イベントの監視というのは、要素等の状態変化の発生を監視している
- if（）に似ているが、状態の変化に対して処理を行うのがイベント監視
本日は、DOM操作について整理しました。
ようやくデイトラカリキュラムでいうところのDOM操作が終わりました。
次回からはjQueryの学習に入っていけそうです。
では、また。
21.DOM操作とは② ～JavaScriptでHTMLを自由に操作～
昨日に引き続き、DOM操作について整理していきます。
HTML要素の追加
JavaScriptでHTMLの要素を追加することもできます。
コードを書きながら整理していきます。
今回の流れは以下のようになります。
- login_btnというオブジェクトを作成する
- そこへaタグ要素を代入
- aタグの要素がもつキー(プロパティ)に対して、データを設定
- ブラウザからId指定でHTMLを取得
- 子要素としてlogin_btnオブジェクト内のaタグを追加
では、１つずつコードを書きながら確認していきます。
オブジェクトの作成とHTMLの要素代入
今回の目標は
<a id="login" href ="test.jp" class ="btn">ログイン</a>
をHTMLに追記する。これです。
早速、コード書いていきます。
const login_btn = document.createElement('a')
const login_btnで、オブジェクトを作成。
document.createElement('a')で、
HTML要素のaタグを作成し、オブジェクト「login_btn」に代入。
オブジェクトに代入した要素に対して、データを設定する
先程、作成したオブジェクトに代入した要素のキー(プロパティ)に対して
データを設定していきます。
login_btn.innerText = 'ログイン'
innerTextプロパティは、
HTMLタグで囲まれたテキスト(表示内容)を設定するプロパティです。
先程のコードでは、「ログイン」というテキストを設定しています。
次からまとめて、id、class、hrefを設定します。
それにはオブジェクトに用意されているsetAttribute関数を使います。
setAttribute関数は引数を２つ必要とします。
１つ目は、設定するHTMLタグの属性の名前
２つ目は、1つ目で選択した属性に代入する文字列です。
先程のlogin_btnオブジェクトのid属性にloginという文字列を設定する場合は、
login_btn.setAttribute('id','login')
class属性にbtnを設定する場合は
login_btn.setAttribute('class','btn')
href属性にtest.jpを設定する場合は
login_btn.setAttribute('href','test.jp')
これで、login_btnオブジェクトのプロパティにはそれぞれデータが設定されました。
HTMLに要素を追加
次は、この設定済みのオブジェクトの中身であるHTML要素を、
ブラウザが取得したHTMLに追加します。
まずはコードから
document.getElementById('test-job').appendChild(login_btn)
１つずつ見ていきましょう。
documentはブラウザが読み込んだHTMLでしたね。参考までに昨日の記事を。
20.DOM操作とは ～JavaScriptでHTMLを自由に操作～ - web制作のしおり
getElementById('test-job')は、Idがtest-jobの要素を指定して取得する関数です。
appendChild(login_btn)は引数に指定したオブジェクトに子要素を追加する関数です。
まとめると、
ブラウザで読み込んだHTMLの
test-jobというidが指定されている要素を取得して、
その子要素としてlogin_btnオブジェクト内の要素を追加する。
コードだけ見たら、わからないと思ってしまいますが、
やはり言葉にして見ると理解が進みます。
全てを通して流れを確認する
オブジェクト作成して、設定します。
const login_btn = document.createElement('a')
login_btn.innerText = 'ログイン'
login_btn.setAttribute('id','login')
login_btn.setAttribute('class','btn')
login_btn.setAttribute('href','test.jp')
ここまででlogin_btnオブジェクトに要素として以下が設定されました。
<a id="login" href ="test.jp" class ="btn">ログイン</a>
そして、
document.getElementById('test-job').appendChild(login_btn)
ブラウザで読み込んだHTMLの
test-jobというidが指定されている要素を取得して、
その子要素としてlogin_btnオブジェクト内の要素を追加する。
最終的には
<div id="test-job">
<a id="login" href ="test.jp" class ="btn">ログイン</a>
</div>
上記のHTMLになります。
今日のまとめ
- オブジェクトにHTML要素を追加して、各種属性やテキストを設定できる
- オブジェクト内のHTML要素をブラウザが読み込んだHTMLに追加することが出来る
今日はDOM操作のHTML要素追加について整理しました。
JavaScriptは面白いですね。
HTMLに動きをつけるという意味がよく分かる気がします。
言葉にするとさらにわかりやすいです。
では、また。
20.DOM操作とは ～JavaScriptでHTMLを自由に操作～
DOMとは
DOMとはDocument Object Modelの略で、文書を操作する為の取り決め。
JavaScript(プログラム)でHTMLを参照したり、操作したりする為の仕組みと言えます。
ようやく、「JavaScriptでwebサイトに動きをつける」と「今までの基本学習」が繋がった感じがしています。
実際のテストは、ブラウザ上で簡単なHTML/CSS/JavaScriptを書いて実行できる「JSFiddle」というサービスを使います。
それではDOM操作について整理していきます。
HTML文書を操作する
例えば、JavaScriptに
document.getElementById('service-title').outerHTML
と書くと、対象の要素とその子要素のHTMLを取得できます。
いきなり「何を言っているのかわからない」となりますが、
分解して１つずつ確認していきましょう。
documentの部分はオブジェクトのような物。「インターフェース」と言うらしいです。
インターフェースは概念的に共通した部品と機能の集まりなんて表現されていますね。
とはいえ、わかりにくいので、
抽象的で便利なオブジェクトぐらいの捉え方でまずは進めていきます。
そして、documentはブラウザに読み込まれたwebページを表している…
つまり、オブジェクトにブラウザで読み込んだHTMLファイルを代入していると捉えることができます。
documentがオブジェクトだとすれば、その後に続く
.getElementById(引数)
の部分は関数ということになります。
オブジェクトには関数も定義できます。
内部の記述は詳しくわかりませんが、やっていることは
「HTMLタグのIdが引数と合致する要素を取得する」
ですね。
そして、その後続いているのは
.outerHTMLというキー(プロパティ)です。
これは要素の持つキー(プロパティ)で、HTMLを格納していると考えられます。
document.getElementById('service-title').outerHTML
というのは結局のところ
ブラウザに読み込まれたHTMLファイルの中で、Idが「service-title」の要素のHTMLを取得するという意味だったわけです。
いきなり、document.getElementById('service-title').outerHTML
これだけ書かれると意味不明です。
ですが、昨日まで学習していた基本と１つずつ
照らし合わせながら確認していくと、
そう難しいことでもないのがわかります。
HTML要素を指定して取得
getElement～関数が複数用意されているようで、
- getElementById(Id名)
- getElementsByClassName(クラス名)
- getElementsByTagName(タグ名)
2と3に関しては要素が配列で取得されます。
１はHTMLタグのId属性の名前が一致する要素をオブジェクトとして取得する。
2はHTMLタグのクラス属性の名前が一致する複数の要素をオブジェクトの配列として取得する。
３はHTMLタグのタグ名を指定して一致する複数の要素をオブジェクトの配列として取得する。
今日のまとめ
- DOMはJavaScriptでHTMLを参照、操作する為の仕組み
- documentはブラウザから読み込まれたwebページを表す
- 読み込まれたwebページから要素を取得するには各種関数を使う
この後も引き続き、DOM操作について学んでいきたいと思います。
基本文法を学んできたことで、１つずつ読み解くことができました。
やはり基本は大事ですね。
では、また。
19.JavaScriptって何？③ ～基本もようやく大詰め～
基本も大詰め
変数や関数、条件分岐についていままで進めてきました。
配列、オブジェクト、繰り返し処理について今日は進めていきます。
配列
配列でできることは「複数のデータを管理する」こと。
その方法は
- インデックスという０からスタートする数字
- 複数のデータ
これら２つを紐づけて、インデックスでデータ群を管理する
というものです。
具体的には、
配列名 = [データ0, データ1, データ2]
のように書いて配列を定義します。
各データにアクセスする為には、
配列名[1]
のようにすることで、データ1を取得できます。
実際には、
const scores = [54, 32, 60]
のようにするとscoresという名前の配列が用意され、データが格納されます。
インデックス0番に54が
インデックス1番に32が
インデックス2番に60が
それぞれ対応しています。
例えば、インデックス1番の32を取得するには
scores[1]とすると
32が取得できるわけです。
これが インデックスで複数のデータを管理する「配列」 です。
オブジェクト
オブジェクトでできることは配列と同じく「複数のデータを管理する」こと。
その方法は
- キー(プロパティ)と呼ばれる変数名
- 複数のデータ
これら2つを紐づけて、キー(プロパティ)でデータ群を管理する。
というものです。
具体的には、
オブジェクト名 = {
プロパティ名1 : 98,
プロパティ名1 : 32,
プロパティ名3 : 54,
}
のように書いて、オブジェクトを定義します。
各データにアクセスするには、
オブジェクト名.プロパティ名1
とすることで、98というデータにアクセスできます。
実際には、
scores ={
math : 98,
english : 32,
science : 54
}
と書いて、scoresという名前のオブジェクトを定義します。
そして、98というデータを取得するには
scores.math
とすることでデータが取得できます。
配列とは違い、複数のデータを単純な順番(インデックス)ではなく、
意味を持たせて管理できるという点でオブジェクトの方が
管理性には優れているように思います。
規則的にデータにアクセスするには、配列の方が良さそうです。
それは次の繰り返し処理と関連しています。
繰り返し処理
繰り返し処理には
- 配列のデータすべてに対して、１つずつ処理をする
- カウンタを使って、指定した回数処理を行う
- 配列の関数を使って、データすべてに対して1つずつ処理をする
上記の３種類の方法があります。
配列のデータすべてに対して、１つずつ処理をする
for(let 変数名 of 配列名){
変数に対する処理
}
上記の処理内容をかみ砕くと
配列から１つデータを取り出して、
変数に代入して、その変数に対して処理をする。
です。
実際の例では、
for(let score of scores) {
console.log(score)
}
と書くと、配列scoresのデータを１つずつ取り出して、
変数scoreに代入し、console.log(score)で代入した値を出力する。
カウンタを使って、指定した回数処理を行う
for (let カウンタ変数=初期値; 終了条件; カウンタの増減){
処理
}
噛み砕いて書くと、
カウンタ変数が終了条件でなければ、処理を実行し、
処理を実行した後にカウンタの変数を増減させる。
終了条件に合致するまで処理を繰り返す。
実際は
for(let count = 0; count < 5; count++){
console.log(count)
}
と書くと、count変数のデータが5未満の間は、
count変数の値を出力して、countの値をプラス1をする。
配列の関数を使って、データすべてに対して1つずつ処理をする
配列.forEach(function (引数) {
引数を使った処理
})
噛み砕いて書くと、
配列から１つずつデータを取り出して、引数に代入。
引数を使った処理を、配列のデータすべてに実施する。
実際は
scores.forEach(function (score) {
console.log(score)
})
と書くと、
scores配列から１つずつデータを取り出して、引数scoreに代入。
そして、scoreのデータを出力する。
これをscores配列のデータすべてに対して実施する。
今日のまとめ
- 配列はインデックスとデータを紐づけて複数のデータを管理する
- オブジェクトはキーとデータを紐づけて複数のデータを管理する
- 配列はデータすべてに対する処理と相性が良い
- オブジェクトは意味のあるデータ管理ができる
- 繰り返し処理には大きく３種類ある
ボリュームが多いですね。一度で理解しきるのも難しいと思うので、
繰り返し使って覚えていきたいと思います。
では、また
18..JavaScriptって何？② ～基本文法をとりあえず知る、話はそれからのようだ～
まずは基本文法から
昨日の学習で、全容がつかめないという話をしましたが
基本文法のお話だったので、当たり前でした。
まずは、基本を知ってそれからどう使うかを学んでいくという事なのでしょう。
というわけで、引き続き基本文法についてまとめてみます
変数の型
変数には型がある。
型とは
変数の中に、何の種類のデータが入るのかを決めたもの。
例えば、
道具箱の中に「はさみ入れ」があれば、その中には「はさみ」が入るだろう。
「のり入れ」があれば、その中には「のり」が入るだろう。
それと同じように、
「文字列型」の変数の中には、「文字列」が入るだろうし、
「数値型」の変数の中には「数値」が入る。
このように、
変数の中に「何の種類のデータが入るのか」を決めているのが
「変数の型」。
条件分岐は大きく分けて２つある
１つ目は、ifを使う方法。
これは、boolean型を使って、条件を分ける処理。
booleanとは、真または偽という「二者択一の値」しか取れない型。
trueかfalse。
trueだったら、処理を実行して、falseだったら実行しない
という事が可能になる。
そして条件分岐は「if」をつかって書く。
if ( boolean型の値 ) {
boolean型の値がtrueの時に実行される処理
}
このように書く。
実際には下記のように書く。
if ( true ) {
console.log("true")
}
この場合、括弧の中がtrueで、常に条件式が成立するので「true」という文字列が表示される。
２つ目はswitchを使う方法。
これは「変数の値によって条件を分ける処理」
例えば、
ある変数の値が
- １だったら〇〇○する。
- ２だったら◇◇◇する。
- ５だったら△△△する。
- それ以外は✕✕✕する。
という具合に、変数の値によって条件分岐させる。
switch ( 変数 ) {
case : 変数の値がパターン１
変数の値がパターン１の時の処理
break
case : 変数の値がパターン２
変数の値がパターン２の時の処理
break
case : 変数の値がパターン３
変数の値がパターン３の時の処理
break
default :
上記以外の値の時の処理
break
}
上記のように書きます。
実際のコードだと
switch (number) {
case : 1
console.log("numberの値は1です")
break
case : 2
console.log("numberの値は2です")
break
case : 3
console.log("numberの値は3です")
break
default :
console.log("numberの値は1,2,3以外です")
break
}
こんな形で書きます。
この場合はnumberの値によって、出力される文字列が変わります。
今日のまとめ
- 型は変数の中のデータの種類を決めるもの。
- 条件分岐は「if」と「switch」の２つがある。
- 「if」はtrue、falseで処理を分岐させる
- 「switch」は変数の値で処理を分岐させる
まだまだ、基本文法は学ぶところが沢山ですね。
焦らずじっくり進めていきます。
では、また。
