javascriptの途中復習編
感想といいますか、私と同様にゲームを作っていく、覚えていくというコメントを頂き励みになります。
今回の投稿は復習に当ててあり、今後少しばかり投稿の仕方に手を加えようと思っています。いえ、自分の為に加えます。
というのも、サイトで学んだものだけを纏めても身にならないと気付いたからですね。
それを一カ月間で学び、サイトで学んだことを纏めると同時にそれらを使った物を作り、自分なりに解説をしたものを投稿しようと思います。
最初の頃に言っていると思いますが、自分が掲げている百聞は一見、百見は一考……を完全無視していました。
こういう所が私の悪い所なのでしょう。
今気付けて良かったですが、今回ばかりは本気で変わっていきたいので後悔ばかりです。なので、気付いたからには今までのやり方も変えたいわけですね。
一応これを始めた時は日記のような感じで進める予定でもあったので。
とりあえずHTML&CSSで作ったものから始め、少しずつjavascriptのプラグインやjQueryを取り入れていきたいです。
一カ月ほど間が空いてしまいました。
この一カ月間遊んでいたわけではなく、javascriptをもう一度最初から学んでいました。
最初の頃に書いていると思いますが、私は勉強に限らず『理解』が必要と思っています。
最近はその『理解』を『知っただけ』で済ませ次に進んでいたと気付いたからです。
今でもホームページを作る為にサイトを真似て作ったりしていますが理解できていない部分が多くあります。
最たるものがpositionやfloatです。
他にも
どこに(親要素や必要な要素)widthを付ければいいのか
widthやheightを付けても画像が表示されない
背景画像が途中で途切れてしまう
並べ方はfloatの他にフレックスボックス等があり、方法は様々
marginやpaddingは横幅や高さの計算をしないと配置がおかしくなる
そういうものが有る、というのは知っていても使えるか、説明できるか、となると怪しくなり、自分の頭では上手く出来ていても上手くコードに出来ないのが現状なのです。
今の悩みは一カ月前と異なり
このようなレイアウトにしたいんだが……
スライドショーを組み込むにはこのプラグインが必要なのか
何故この親要素が必要で、この親要素には何のCSSを書けばいいんだ？
レスポンシブデザインも考えないと
一歩進んだ悩みとなってはいますが。
そこへjavascriptの小難しさというか、理解せずどんどん進んだ結果混乱して覚えた気になってしまった、というわけです。
なので、今回は一カ月の間で勉強し直した、所謂復習に当てたいと思います。
改めて配列とオブジェクトの違い、引数とはどんなものなのか自分なりに理解したので、今一度変わろうと考えた初心に戻り勉強していきます。
１．コンソール
console.log()の事です。
このコードは()内に書いた『”文字列”』、『値』をコンソール画面に出力するものですね。
しかし、コンソール画面とはなんなのか分かりますか？
当然私は知りませんでした。
書いたコードがサイト内で反映してくれるサイトを使っていたものですから、私が使っているエディタ『Brackets』でもそうなのだろうと思っていました。
思っていた状態で復習しようとしたところ見事どこに出力されているのか分からず、小一時間程悩みました。
コードの書き間違い、””や;をつけ忘れているとか。
そしてコンソールとはそういう画面に表示されるのだと調べて『理解』したのです。
chromeなら右クリックで出て来る『検証』、若しくは右上の設定にある『その他のツール、デベロッパーツール』から開けるページの『console』という奴で確認できます。
これを知らなかった私は『知ったかぶり』だったんですよね。
他にも文字の連結に関して
『`○○${△△}○○`』
このように書くものだと学びましたが、とあるサイトでは
『”○○” + “△△” + “○○”』
演算子と同じやり方でもできるとあり、態々小難しく感じる方法で書かなくてもいいのだと知りました。
目から鱗で、間違い難いこちらを使おうと思います。
数値の計算に関しても変数に代入し、その変数名を使い計算・出力出来ると理解しましたね。
２．条件式
if、for、while等に関しては英語とほぼ変わらないので混乱はしていません。
混乱してのは『条件式』についてです。
そこで解決方法として考えたのは
先に自分が書きたい条件式を自分なりの言葉でコメントアウトしてしまおう、というものです。
例えば
const age = 24;
if (age >= 20) {
console.log(“私は20歳以上です”);
}
このコードの条件式なら
『定数ageの値が20よりも大きい、若しくは等しい場合』
と、if文の上の行に書いておくということです。
これにより自分が書きたい条件式に悩んで時間を掛けなくてよくなってきました。
for文は三つあるので
『変数(定数)の初期化(let number = 0);
numberの値が5より小さい場合(number < 5);
numberに1を足す(number += 1)』
と、書いておく様にしました。
またfor文とwhile文の違いですが、詳しい人は使い分けをすると言う感じで今の所いることにしています。
while文を使うときは、どこまでの範囲で、幾つ足すのか明確にしておかないと永遠に処理を繰り返してPCがフリーズしてしまうので気を付ける、と覚えています。
３．配列とオブジェクト
最初にも書きましたが、この二つの違いが分かっていませんでした。
結論から言うと、配列は『[ ]』、オブジェクトは『{ }』で囲むということです。
見た目で全く違ったと気付いた時は何故気付かなかったのか不思議でなりませんでした。
もしかすると書いているかもしれませんが……。
また、配列は[ ]内に要素しか入れません。
const animal = [“dog”, ”cat”,”fox”,”tiger”];
こんな感じです。
そして、出力する時は0から始まるインデックス番号を定数名の後の[ ]内に入れます。
オブジェクトは{ }内に『プロパティ名:値』というように書きます。
これも理解できていませんでしたね。
特にサイトでは複数のプロパティに関連性があったので勘違いしている部分がありました。
勘違いというより『そういうものだ』と認識してしまっていた、という所でしょうか。
それが何かというと
const character = {
name: “田中太郎”,
age: 20
};
これです。
『名前』と『年齢』という関連性がある為、プロパティでは関連を付けるものだと思っていました。
使い方の殆どがそうではあるのでしょう。
ですが、数値だけならプロパティ名が『number1』、『number2』、『number3』となっても不思議ではないのです。
結局のところの使い方は変わることはないので『惑わされない』ことが重要と気付きました。
あと、配列[]の中のオブジェクト{}、オブジェクト{}の中の配列[]です。
前者はオブジェクトがインデックス番号で振られているタイプのコードで、
後者はプロパティ名の後に配列を作り、複数の値を入れているタイプになります。それもインデックス番号で表示を変えられます。
他にも配列の中に配列を入れる
const family = {
name: tanaka-family {
mother: “田中春子”;
father: “田中太郎”;
son: “田中春樹”;
},
name: suzuki-family {
mother: “鈴木結花”;
father: “鈴木健一”;
},
my: “佐藤和久”
};
田中一家、兄が結婚した鈴木一家、独り身の独身男性佐藤さん、という様な感じで書けます。
田中一家の次男田中春樹を出力するなら
console.log(family.name.son);
と定数、プロパティ名、プロパティ名で出力されます。
４．関数
最後に関数です。
ここで引数や戻り値が出たり、関数を始めるには最後に必要なコードが合ったりと混乱が極まりました。
一カ月前に応用の利いたものを投稿する、と言ったと思いますが、結局それが理解が足りずに挫折したので復習することになったわけです。
未だに不安が残りますが、
関数はfunction()を使い、{ }の中に処理したいことを書く、というのが基本のようですね。
最後に変数や定数の名前();を書くわけです。
そして、理解どころか分かってすらいなかった引数と戻り値。
まず引数とは( )のこと、と覚えれば良いようです。
function( )の中に書くものは、最後に書く定数名( )と繋がり、要素が複数ある場合も難しく考えず順番通り代入される、と思えばよかったんですね。
関数になると一気に複雑に思えるので、
対処法として、ここでもコメントアウトを使い自分が把握しやすい文章を書いておくのが自分なりの解決策です。
定数に何を代入する
引数は何である
呼び戻しはここ
戻り値に関してはreturnを使うことを言い、処理されて返された値は定数に戻ります。
//定数greetに関数と引数nameを代入
const greet = function(name) {
//以下の文章を定数greetに返す
return “こんにちは、” + name + “さん”;
};
//nameに『田中春樹』という文字列が呼び出されて代入され
greetに代入されている文章が出力される
console.log(greet(“田中春樹”);
最後の部分が分かり難く納得し難いですが、関数でも全てが代入によって行われているのが分かります。
出力結果は恐らく『こんにちは、田中春樹さん』となるはずです。
復習に関してはこんな感じになります。
これらの復習以外にも
スライドショー
ポップアップ画像
アニメーション
ドロップダウンメニュー
と、javascriptを使った物からCSSのみでの表現を勉強しています。
遅い進み具合でしょうがこつこつ進めているので、決意して約半年、一年が経つまでにホームページを作れるように出来たらいいと思っています。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
