今週の学び 第3回

今週の学び

HTML.CSS.GitHubなど

• ページのcssを書く時
  • 基本的にheightは指定しない方が良い、widthで見やすさを変えていく
• リストに三角の装飾をする方法
  • position: relative;、position:absolute;
• overflow-x: scroll;の使い所
  • レスポンシブ対応などでヘッダーのリストが長い時にスクロールできるようにする
• ページにtwitterを埋め込む方法
  • iframeタグを使う
• aタグでページの1番上に飛ばす際、ヘッダーが固定されている場合はbodyに#を付けてリンクにする
• GitHubの初回接続方法
  • ターミナルで、繋げたいフォルダの階層からgit initの手順で入力する

JavaScript関係

• JavaScriptのコメントアウト

  • 文頭に「//」がある行はコメントになる

• JavaScriptでの「"」

  • JavaScriptは「"」で囲むと文字列になるので、計算などは「"」で囲まない

• JavaScriptでの「%」

  • 「%」記号を使うと、割ったときの余りを求めることができ

• JavaScriptでの「=」

  • 「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味

• 変数のメリット

  • 同じ値を繰り返し使える、変更に対応しやすい

• 既に定義している変数numberの値に3を足したいというとき

  • numberに3を足して、再びnumberに代入することで実現できる

• 変数と定数

  • letは変数、constは定数

• 定数のメリット

  • 後から値を更新できないところにあり、予期せぬ更新を防ぐことができ、より安全なコードを書くことができる

• テンプレートリテラルの書き方

  • 文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができる
    この時、文字列全体をバッククォーテーション（`）で囲む必要がある

• 条件分岐

  • if文を用いると「もし○○ならば●●を行う」という条件分岐が可能になる
    ifの後ろに条件式を書き、それが「成り立つ」場合の処理を{ }の中に書く

• 条件式に使った「>」

  • 比較演算子と呼ばれる、大小比較の記号

• 比較演算子には、左と右の値が等しいかを調べるものもある

  • 「a == b」はaとbが等しければtrue、等しくなければfalseになる
    「a != b」はその逆である

• if文に「else」を組み合わせる

  • 「もし〇〇なら●●を行う、そうでなければ■■を行う」という処理になる

• JavaScriptでの「かつ」

  • 「かつ」は「&&」で表します。「条件1 && 条件2」は「条件1かつ条件2」という意味

• JavaScriptでの「または」

  • 「または」は「||」で表します。「条件1 || 条件2」は「条件1または条件2」という意味

• switch文

  • if文以外の条件分岐の方法、ある値によって処理を分岐する場合にswitch文を用いる
    switch文では分岐の数だけcaseを追加していく
    switch文ではbreakが非常に重要で、breakとはswitch文を終了する命令である
    例文、
    switch (a) {
    case 1:
    console.log('aは1です');
    break;
    default:
    console.log('aの値は1ではありません');
    }

• default

  • caseのどれにも一致しなかった時、defaultのブロックが実行される

• while文

  • 繰り返し処理を行う
    例文、
    while (i < 2){
    printf("こんにちは¥n");
    i++;

• for文

  • できることはwhile文と同じだが、while文に比べてシンプルに書くことができる
    例文、
    for (int i = 0; i < 10; i++)
    System.out.println("iの値は" + i);

• 配列

  • 配列とは複数の値をまとめて扱う方法、配列は、[値1, 値2, 値3] のように作る

• インデックス番号

  • インデックス番号は、0から始まることに注意、書き方例→fruits[0]など

• 配列と繰り返し

  • 配列.lengthとすることで、配列の要素数を取得できる

• オブジェクト

  • 配列は複数の値を並べて管理するのに対して、オブジェクトはそれぞれの値にプロパティと呼ばれる名前をつけて管理する
    配列は要素を[]で囲むが、オブジェクトは{}で囲む
    オブジェクトの値を取り出すには、対応するプロパティ名を用いて 、「オブジェクト.プロパティ名」のようにする

• undefined

  • 配列の存在しないインデックス番号の要素や、オブジェクトの存在しないプロパティの要素を取得しようとすると、undefined と出力される

• 関数

  • いくつかの処理をまとめたもの

• アロー関数

  • 「function()」の部分を「() =>」としても、これまでと同じように関数を定義することができる、この関数の書き方のことを、特別にアロー関数と呼ぶ

• 引数

  • 関数を呼び出すときに一緒に値を渡すことで、関数の中でその値を利用することができる

• 戻り値

  • 呼び出し元で受け取る処理結果を戻り値（もどりち）と呼び、このことを「関数が戻り値を返す」と言う

• スコープ

  • 定数や変数の使用できる範囲のこと、関数の外側で定義した定数や変数はプログラムのどこからでも使えるが、関数の{}内で定義した定数や変数は、その関数の内側でのみ使用できる

• クラス

  • 「設計図」のことをJavaScriptでは「クラス」と呼ぶ
    「class クラス名」とすることで新しくクラスを用意できる
    クラス名は大文字から始める

• インスタンス

  • クラスからオブジェクトを生成するには、「new クラス名()」とし、クラスから生成したオブジェクトは特別にインスタンスと呼ぶ

• コンストラクタ

  • インスタンスを生成するときに実行したい処理や設定を追加するための機能
    クラスの中括弧 { } 内に「constructor() { }」と記述
    class Animal{
    constructor(){

    }
    }

• メソッド

  • メソッドとはそのインスタンスの「動作」のようなもの
    「名前」や「年齢」などの情報はプロパティで追加したのに対して、メソッドは「挨拶をする」「値を計算する」などの処理のまとまり

• メソッド内でメソッドを使う

  • メソッド内で「this.メソッド名()」とすることで、同じクラスの他のメソッドを使うことができる

• 継承

  • 「継承」とは、すでにあるクラスをもとに新しくクラスを作成する方法のこと
    例えば「Animalクラス」から「Dogクラス」を継承すると「Animalクラス」の全ての機能を引き継いで「Dogクラス」を作成することができる
    継承を用いてクラスを作成するには「extends」を用いる
    「Animalクラス」を継承して「Dogクラス」を作成するには、「class Dog extends Animal」と書く

• 継承したクラスを使う

  • 例えば「Dogクラス」は「Animalクラス」のすべての機能を引き継いでいる
    そのため「Dogクラス」内にはまだ何もメソッドは定義されていないが、「Animalクラス」に定義されている「infoメソッド」などを使用することができる

• Animalクラス（親クラス）にすでにあるメソッドと同じ名前のメソッドをDogクラス（子クラス）に定義すると、どちらのメソッドが呼び出されるか？

  • クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先して使用される
    子クラスのメソッドが親クラスのメソッドを上書きしていることから、オーバーライドと呼ばれる
    メソッドと同じように、コンストラクタもオーバーライドすることができる
    コンストラクタをオーバーライドする際は1行目に「super()」と記述する

• ファイルの分割

  • ファイルを分割したときのエラーはそれぞれのファイルを関連づけし、必要な値を渡すことで解決できる
    クラスの定義の後で「export default クラス名」とすることで、そのクラスをエクスポート（出力）し、他のファイルへ渡すことができる

• 値のエクスポート

  • エクスポートできるのはクラスだけではなく文字列や数値や関数など、どんな値でもエクスポートが可能
    エクスポートする際は「export default 定数名」とし、インポートする際は「import 定数名 from "./ファイル名"」

• デフォルトエクスポート

  • export defaultはデフォルトエクスポートと呼ばれ、そのファイルがインポートされると自動的に「export default 値」の値がインポートされる
    そのためエクスポート時の値の名前とインポート時の値の名前に違いがあっても問題ない

• 名前付きエクスポート

  • defaultを書かずに、名前を{}で囲んでエクスポートする書き方
    名前付きエクスポートした値をインポートする場合はエクスポート時と同じ名前で値を指定し、インポートする値はエクスポート時と同様に「import { 値の名前 } from "./ファイル名"」と{}で囲んで指定する

• パッケージ

  • 誰かが作った便利なプログラムがパッケージという形で公開されている
    パッケージは自分のプログラムの中に組み込んで使うことができる

• pushメソッド

  • 配列の最後に新しい要素を追加するメソッド
    pushメソッドの後の()の中に追加したい要素を入力する
    例文、
    characters.push("とりずきん");

• forEachメソッド

  • forEachメソッドは配列の中の要素を1つずつ取り出して全ての要素に繰り返し同じ処理を行うメソッド
    例文、
    characters.forEach((character) => {console.log(character);});

• findメソッド

  • 条件式に合う1つ目の要素を配列の中から取り出すメソッド
    コールバック関数の中は { return 条件 } と書くことで条件に合う要素が戻り値となるfindメソッドは条件に合う要素が見つかった時に終了するので、条件に合う最初の1つの要素しか取り出せない
    例文、
    const foundNumber = numbers.find((number) => {
    return number % 3 === 0;

• filterメソッド

  • 記述した条件に合う要素のみを取り出して新しい配列を作成するメソッド
    条件に合う要素が全て取り出されて新しい配列に中に入る
    例文、
    const evenNumbers = numbers.filter((number) => {
    return number % 2 === 0;
    });

• mapメソッド

  • 配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッド
    配列の要素を全て2倍にした配列↓
    例文、
    const doubledNumbers = numbers.map((number) => { return number * 2; });

• コールバック関数

  • 引数に渡される関数をコールバック関数と呼ぶ
    関数は関数名の後ろに()をつけると呼び出され、()をつけなければ関数そのものを指す
    例文、
    const printWanko = () => {
    console.log("にんじゃわんこ");
    };

  const call = (callback) => {
  console.log("コールバック関数を呼び出します。");
  callback();←//コールバック関数を呼び出す時!
  };

  call(printWanko);←//コールバック関数を渡す時!

• コールバック関数を直接定義

  • 動作の流れは事前に定義した関数を引数に渡す場合と同じ
    例文、
    const printWanko = () => {
    console.log("にんじゃわんこ");
    };
    ↓//ここに!
    const call = (callback) => {
    console.log("コールバック関数を呼び出します。");
    callback();
    };

call(printWanko);

call(() => {
console.log("ひつじ仙人");←//これが!
});

今週のまとめ

JavaScriptに突入して思うのはHTML.CSSとは全く別物であり、さらに難しい
実践でコードを書きながらしっかり身につけていきたい