本ページは「はじめてのP」のWeek2の補足資料です。以下の目的で本ページを作成しました。
- 講義サイトの原稿が全角文字を利用しており、コピー＆ペーストでJavaScriptのプログラムを実行できない問題に対処する目的
- 講義中ではほとんど解説していないJavaScriptプログラムの詳細について説明する目的（今後、徐々に加筆修正していきます。）
- ただし、本講義はJavaScript言語の仕様やプログラミングの詳細を説明することを目的としておらず、プログラミングのパワフルさや面白さに触れていただくことを目的としているため、完全にプログラムの意味を理解する必要はございまん。
1コマ目の目的は、ビットくんを大きくすることで、プログラミング面白いかもと思っていただくことです。
$('*').css('color', 'red')
$('*')はビットくんのツイートページを構成する全ての要素（画面上に表示される全ての部品）を取得する命令です。.はドットの左側の値（レシーバー）が所有するドットの右側の変数や関数（プロパティ）を参照するという意味です。- したがって、このプログラムの意味は、ビットくんのツイートページを構成する全ての要素が所有する
css関数を呼び出すということです。 css関数は、Webページを表現しているHTML文書に対して、Cascading Style Sheets (CSS) という仕様に則して、Webページのデザインを変える関数です。
$('li.stream-item .js-tweet-text').css('color', 'blue')
bitkun = $('.ProfileAvatar-image')
size = bitkun.width()
timer = setInterval(() => {
size *= 1.005
bitkun.width(size)
bitkun.height(size)
if (size > 1000) {
clearInterval(timer)
}
}, 10)
2コマ目の目的は、命令を実行する順序がプログラム全体の意味に大きく影響することを理解していただくことです。 また、課題を通して、ゴールとなるプログラムの実行結果を実現するために、命令の順序を考える体験をしていただきます。
e = $('li.stream-item').eq(1); e.parent().prepend(e)
- 2番目のツイート以外の順序は変わりません。
- 1番目のツイートは押し出されて、2番目のツイートになります。
- そのため、2番目のツイートと1番目のツイートが入れ替わります。
$('li.stream-item')はビットくんのページの中からツイートリストのみを取り出す命令です。.eq(1)はドットの左側のリストの2番目のみを取り出す命令です。（eq関数の詳細）e = $('li.stream-item').eq(1)は変数eにツイートリストの2番目のツイートを代入しています。e.parent()は2番目のツイートの親、つまり、ツイートリスト全体を取得する命令です。（parent関数の詳細）e.parent().prepend(e)はツイートリスト全体の最初に、2番目のツイートを移動させる命令です。（prepend関数の詳細）
e = $('li.stream-item').eq(2); e.parent().prepend(e)
e = $('li.stream-item').eq(1); e.parent().prepend(e)
e = $('li.stream-item').eq(2); e.parent().prepend(e)
e = $('li.stream-item').eq(2); e.parent().prepend(e)
e = $('li.stream-item').eq(1); e.parent().prepend(e)
3コマ目の目的は、ループ（繰り返し）という概念について理解していただくことです。
$('li.stream-item').eq(0).css('color', 'red')
$('li.stream-item').eq(1).css('color', 'red')
$('li.stream-item').eq(2).css('color', 'red')
$('li.stream-item').eq(3).css('color', 'red')
$('li.stream-item').eq(4).css('color', 'red')
for (i = 0; i < 5; i++) {
$('li.stream-item').eq(i).css('color', 'red')
}
i++は変数iの数値を1増やすという意味です。i++はi = i + 1もしくはi += 1とも記述できますが、短いi++が好まれます。- ループを活用することで、同じ命令を何度も記述する手間を省くことができます。
for (i = 1; i < 4; i++) {
$('li.stream-item').eq(i).css('color', 'green')
}
4コマ目の目的は、条件分岐という概念について理解していただくことです。
for (i = 0; i < 10; i++) {
e = $('li.stream-item').eq(i)
if (e.find('.IconTextContainer:last').text() == 0) {
e.css('opacity', 0.2)
}
}
e.find('.IconTextContainer:last').text()は変数eのツイートのいいね数を取得する命令です。e.css('opacity', 0.2)は変数eが持つ'opacity'という属性の値を0.2に設定するという意味です。言い換えると、変数eの透明度を0.2にして半透明化するということです。
for (i = 0; i < 10; i++) {
e = $('li.stream-item').eq(i)
if (e.find('.fullname').text().indexOf('ビット') >= 0) {
e.css('color', 'red')
} else {
e.css('color', 'green')
}
}
5コマ目の目的は、関数という概念について理解していただくことです。
function changeColor(n) {
$('li.stream-item').eq(n).css('color', 'red')
}
changeColor(0)
changeColor(2)
function countLike(n) {
return Number($('li.stream-item').eq(n).find('.IconTextContainer:last').text());
}
countLike(0)
countLike(3)
sum = 0
for (i = 0; i < 10; i++) {
sum += countLike(i)
}