HTML,CSS編に続き、JavaScriptもサラッとですが、まとめてみました。
前回と同様、この記事の大半は自分用に、残りは「ドットインストールを始めてみようかな」と検討している方、「どんなレッスンがあったかな？」と過去にドットインストールを利用していた方に向けて書いています。
簡単に言ってしまうと、JavaScriptは「画面の内容を変化させる」言語です。最初はそう考えましょう。
CSSでもhoverなどbtnの色を変えたりしましたが、さらに一歩進んだことが出来るようになります。みなさんがお使いのWebサイトの多くがclickやhoverでページの内容が変化するものではないでしょうか？
そんなフロントエンドに欠かせないJavaScript編を見ていきましょう。
はじめてのJavaScript
‘use strict’で厳密なエラーチェックをするらしいのですが、あまり効果はわかりません。
#6 .classList.add()でクラスの付け替えをしますが、transitionやtransformなどのcssアニメーションも使うので、HTML,CSSは終わらせてからJavaScriptに入るのがよさそうです。
#7 classListが出てきますが、今後よく使います。定数constもこんなに早く紹介してたんですね。
#9 document.createElement(div)やappendChild(div)など長い名前が出てきて「は？」だと思いますが、「divという要素を作るよ」「divという要素をつけるよ」でいいです
#10 for文はProgateでも見たと思いますが、いきなりドットインストールの方は「急に呪文？どうした？」ですよね。プログラミングではループ処理がよく出ます、その代表的なやつです。
#11 すっごい駆け足でゲームをサッと作ります。Math.floor(Math.random() * num)は今はスルーでかまいません。ランダムな数をつくれる、それだけです、後のレッスンで図を使った丁寧な解説があります。If文も長い付き合いになります
JavaScript基礎文法編
#2 console.log(‘Hello World’);が出ました。誰が決めたのか、こればっかりです。
Progateではコンソールも何度も出ていましたが、「で？コンソールって何？そこに結果が出てなんなの？」と思った方もいたのでは。僕もコンソールに正しく表示されて「クリア!レベルアップ!次に進む」と言われても「は？」でした。
制作途中に「処理結果を手軽に確認」ができます。「ここまではちゃんと合ってるかな？」などチェックする時などに便利です。
ポートフォリオなど制作する際に「あれ？動かない…」が起こると思いますが、「デバッグ」と呼ばれるバグを見つけて修正していく作業でconsole.log()が活躍します。
ちなみにここでは出てきませんが、window.が省略されています。
Window.console.log()となります。window.alert() → alert()と書かれます
#5 これはいるのか？いつ使うのか？
#7,8 定数・変数の考え方をここでしっかり理解 const,let
ポートフォリオ作りでググっているとvarを使ったものもよく見ました。古い書き方らしいのですが、そういった情報にヒットすることもしばしばあります。
#10,11,12この辺はサラッといきましょう、「全部覚えよう」なんてしなくていいです
#13 if文をしっかり解説、この変な書き方にいずれ慣れます。
#14 score >= 80 ? console.log(‘Great!’) : console.log(‘OK…!’); 1行にまとめた場合もあります。条件演算子という言葉を知らないと検索が難しいですね
#15 論理演算子、また難しい言葉… 「 && 」 は (and),「 || 」 は (or),「 ! 」は (not) これでよし
#16 if文の別の書き方switchです 使いどころは…あまり… 他であまり見ないのでbreakやdefaultは忘れがちです
#17 for文を解説しますが、同時にテンプレートリテラルを使って値を埋め込みます。
`(バッククオート)はShift + @ で使えます。プログラミングやらないとたぶん使わないですよね。
#19 if(i % 3 === 0) →これで「iが３の倍数だったら」になります。Progateでもでましたが、最初は「は？」でしたよね。Iを３で割った余りが０ということ
#20から関数・引数・returnなどイメージしにくいレッスンが続きますが、大事なことですので繰り返し見ましょう
関数宣言
function sum(a, b, c) {
return a + b + c;
}
関数式
const sum = function(a, b, c) {
return a + b + c;
};
#25,26は「ふ～ん」と思っておきましょう
JavaScript オブジェクト編
Progateでは「メニュー表」としてよく紹介されてましたね。
①メニュー表があって、②そこにメニューがあって、③そのメニューの情報が書いてある
そんな景色をイメージしてみましょう。
#1 配列を作ります。const scores = [80, 90, 40]; 大括弧が出てきます
#2 scores[1]とすると90を表します、40を50に変更するのは scores[2] = 50
#3 for文と配列を合わせます。scores[i] → scoresのi番目と考え、iをループで回していく、ということになります。
#4 unshift,push,shift,pop pushは使うかもというくらいの話です
#5 splice() ミニアプリで使いますが、「こういうのもあるんだな」でいいです。「変化が開始する位置、いくつ操作する？」という命令
#6 スプレッド構文,「…」 を配列の中で使うことで、そこに別の配列を展開
#7 分割代入、レスト構文とよくわからないのが続きますが、「どこで使うの？」とツッコんでおけばいいです。
#8 for文を短く書けるforEach()です。
scores.forEach((score, index) => {
console.log(`Score ${index}: ${score}`);
});
#9 配列の各要素に処理をして、別の配列を作るには「map()」を使うそうです「ふ～ん…」
#10 条件に当てはまるものを抽出する「filter()」、「returnの1行の時は短く書けます」の省略形はわかりにくい
#11 やっとオブジェクトです。const point = {x: 100, y: 180}; → 「pointというのは xが100で、ｙが180だよ」ということでつまり
カレーという商品はカロリーが○○で、値段が○○だよ
パスタという商品はカロリーが○○で、値段が○○だよ
コーラという商品はカロリーが○○で、値段が○○だよ
メニュー表ということがイメージ出来たでしょうか？
#12 point.x、point[‘x’]でプロパティにアクセスします
#13 スプレッド構文、分割代入、レスト構文が再び
#14 Objict.keys(point)でpointのkeyを配列で取得
#15,16 let x = [1, 2] let y = xとして、x[0] = 5 に変更、xは[5, 2] yも[5, 2]となる
yは複雑なデータ型でデータ量が大きくなることもあるので、xの個別の値ではなく、xがある場所を記憶している、という考え
#17,18 文字列の操作 lengthやjoinやsplit
#19 合計や平均 「JavaScriptではそのような命令はないので…」我々初心者はこういうのがわからないですよね。つまり、何が出来て何が出来ないのか？
Math.floorで切り捨て、Math.ceilで切り上げ、Math.roundで四捨五入、
Math.randomは次に詳しく
#20 ランダムについて図を使って詳しく
min, …, max 公式っぽく
Math.floor(Math.random() * (max + 1 – min)) + min
サイコロの場合
console.log(Math.floor(Math.random() * 6) + 1);
0,1,2,3,4,5を出して、1足すカンジ
#21 ここから時間について続きますが、実際に使わないとイメージしにくいと思います。ミニアプリで使いますので、そちらで。
#23 alert()は「OK」とconfirm()は「キャンセルとOK」ただ表示するだけ、YesNO聞いてくるの違いです
#24 関数を引数として渡す場合は関数名だけを書く。
「この関数をあとで実行」と依頼するようなイメージです。あとで実行してもらうので、依頼するタイミングでは関数を実行しません
setInterval()は関数実行、setIntervalは関数そのもの(今動けとは言ってない)、ややこしいですね
#25 setTimeout()は一回だけ実行
#26 処理に時間がかかる場合はsetTimeout()が使われる
#27 例外処理 例外が発生しそうな箇所をtry{}で囲む、そして続けてcatchで例外が起きたときの処理 「例外を想定」なんて初心者には無理
#28 この辺りから複雑になります。
#29 同じオブジェクト内のプロパティにアクセスするには、thisを使う
thisは難しいですよ。このようなシンプルな例でイメージしておいてください。
関数をプロパティの値にした場合、その関数をメソッドと呼ぶ
#30 テンプレートをクラス、クラスから作られるオブジェクトのことをインスタンスと呼びます。Progateで見てきたメニュー表とそのメニュー表に書かれている料理名、の関係ですね
#31 クラスを作ります。プロパティはconstructor()というメソッドで初期化
このクラスから作られるインスタンスはthisで表します、よってthis.text = ○○で「このインスタンスのtextプロパティは○○だよ」となります
#32 機能の拡張や名称の変更があった際に全て書き換えるのは大変なので、プロパティは直接操作せずにメソッドを介して操作する
#33 インスタンスを介さずにクラスから直接呼び出す「静的メソッド」は、 static をつけてstatic showInfo()といった形、インスタンスを作らずに呼び出すので、 this を使うことはできない
#34,35クラスを拡張、継承します。コードもいっしょに見ないとついてこられないと思いますが…
extends 親クラスで継承し、super()で重複している箇所をまとめて引き継ぎます。
オブジェクト編はこんなカンジです。「は？」が多くなります。
「オブジェクト指向」という言葉もあり、非常にとらえにくい概念です。要は「モノ」です。
class→モノの設計書
property→モノのデータ
method→モノの処理・動作
instance→設計書から作られるオブジェクト(モノ)
…もうこうなると雰囲気を掴みましょう…
「言葉で説明することではない」、なんて説明もあります。
まとめ
と、今回はここまで。
基礎文法、オブジェクトと見てきましたが、かなり深い内容も出てきましたね。
スプレッド構文、クラスの継承などは「JavaScriptってどんなもん？」という初学者の方には必ずしも必要ではありません。
ドットインストールあるあるですが「全てを覚えよう」としないことです。「こういうのもあるんだな～」でかまいません。
僕も実際に作りたい物を作り、その際わからないことを調べるのが最も効率的だと思います。
ですが、調べるにも検索ワードが必要で「ドットインストールでやったあれかな？え～と…」があるだけですんなり調べることが出来るはずです。
次回はJavaScriptの大きなテーマであるDOMを扱います。
コメント