こんにちは。
プログラミングのJavaScriptさわってみる企画５回目。今回は概念的なオハナシなのでちょっと難しそう。
いままで何度もネットで調べたことがある内容なのですが、いまいちこのへんの理解が曖昧なままだったのでこの機会にしっかり身につけたいところです。
しかし本を読んだところ、うん、まぁ・・・うん。みたいな感じで終わりました(;´Д｀)
たぶん考えて作るってこと何度もしながら概念を身につけるのでしょうね。作るという経験値が圧倒的に少ないのだ。
いままで調べたネットとかの情報に比べたら参考にしている入門書では結構分かり易く書いてあるのだと思いますけどね。
参考にしている本↓
今回学んだことをいちおう記しておきます。
・関数
これはこれまでのさわってみる回で出てきてますからわかるっちゃあわかる。値(引数)を渡したら決まった処理をして処理後の値(戻り値)を返すってやつですよね。引数がなくても幾つかの処理をおこなう纏まりだったりもしますね。
本には最初のレベルの抽象化って書かれてましたけど抽象化ってなんだよ。ネットで調べたけどよくわかりませんでした。
そういうとこだよ、プログラミングさんよ。だから敬遠されるんだよ。
まとめるってことだと思ってさらっと流そう。
//2022年4月4日 追記//
固定部分を可変にすることで汎用性を持たせることをプログラミングに於いて抽象化と呼ぶようです。ある関数の固定値の代わりに変数Xを適用したとき、Xにはいろいろな値を当てはめることができるようになる→固定だったものがいろいろになる→抽象化。
//追記終わり//
・オブジェクト
でたな、オブジェクト。オブジェクト指向とかよく言いますけどよくわからない。オブジェクトとは「もの」だそうです。やっぱり「もの」っていう説明だったか。どこで調べてもそういう説明ですね、値や関数の”セット”みたいなイメージでいますけど。ちがうかな？
定義の仕方はこう↓
var 〇〇 ={}
○○はオブジェクト名。{}の中がオブジェクトの内容。
・プロパティ
オブジェクトの個々の特徴。オブジェクトの{}内の一つ一つをプロパティと呼ぶそうな。
記述方法↓
var ○○ ={プロパティ名1：プロパティ値1,プロパティ名2：プロパティ値2,・・・}
・メソッド
オブジェクトに対して働きかける操作をメソッドと言うそうです。
文章だけじゃわからないので実際にコードを書いてみる。
JavaScriptさわってみる企画の３回目のときのコードを改変して作りました。
３回目の記事↓
たぶんこういうことだと思うけど・・・。
すっごい見にくかった(;´Д｀) ごめんなさい。正直無理やりオブジェクトを使わなければもっとシンプルにできると思いますが ボタンを押すとマンガが次のページに変わり、もう１回押すと戻るっていうプログラムを作ったつもりです。実際のものは下の方にあります。
nextpageメソッドの中にthis.pageってあるじゃないですか。ツクールのプラグインとかコアスクリプト見てて、「”this”ってなんだよ!!」ってずーっと思ってたんですけどその場所のオブジェクトを指すようですね。mangaオブジェクトのpageプロパティを参照するとき、mangaオブジェクト内であればthis.pageとなり、mangaオブジェクトの外からであればmanga.pageとなるわけですね(;´･ω･) たぶん・・・。
コードが見にくかったのでもう一度コードだけ記載します。
<button onclick="pic()">ページをめくる</button><br>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220403/20220403205714.jpg" id ="gazou">
<html lang="ja">
<script>const manga = {
page: 1,
nextpage: function(){
if(this.page ==1){
this.page =2;
}
else{
this.page =1;
}
},draw: function(){
const target = document.querySelector("#gazou");
if(manga.page == 1){
target.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220403/20220403205714.jpg"
}
else{
target.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/i/icedtomatobazooka/20220403/20220403205804.jpg"
}
}
}
function pic() {
manga.nextpage();
manga.draw();
}</script>
勘のいい方は予想がついているかも知れませんがこれはJavaScriptさわってみる企画と例の企画との融合です。
例の企画とは：素体からキャラクターを描くお絵描き練習のこと。かなり適当。
それでは最後に融合したもの置いておしまいとします。
↓１ページ読んだら”ページをめくる”ボタンを押してね。
ボタンの位置が悪い？
下だと下のコマから見えるからダメかなと思いまして。すみません(;´Д｀)
やるなら１コマずつにするべきだった…
ランキング参加中です。下のバナーをクリックして頂けるとやる気値が増幅します!！
