Contents
JavaScriptⅥ
配列を操作するメソッドについて学習していきます。
pushメソッド
pushメソッドとは、配列の最後に新しい要素を追加するメソッドです。
// script.js const numbers = [1, 2, 3]; console.log(numbers); number.push(4); // 配列に新しい要素を追加 console.log(numbers;) // 実行結果 [1, 2, 3] [1, 2, 3, 4]
forEachメソッド
forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッドです。
const numbers = [1, 2, 3]; numbers.forEach((number) => { // 引数に入っている関数はコールバック関数と呼びます console.log(number); }); // 実行結果 1 2 3
findメソッド
findメソッドとは、コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出すメソッドです。
const numbers = [1, 3, 5, 7]; const foundNumber = numbers.find((number) => { return number > 3; }); console.log(foundNumber); // 実行結果 5 // 条件にあう最初の要素が取り出されている
配列の要素がオブジェクトの場合もfindメソッドを使うことができます。
const characters = [ {id: 1, name: "にんじゃわんこ"}; {id: 2, name: "ひつじ仙人"}; ]; const foundCharacter = characters.find((character) => { return character.id === 1; }); console.log(foundCharacter); // 実行結果 {id: 1, name: "にんじゃわんこ"}
filterメソッド
filterメソッドとは記述した条件に合う要素のみを取り出して新しい配列を作成するメソッドです。
const numbers = [1,3,5,7]; const filteredNumbers = numbers.filter((number) => { return number > 3; // 条件に合う要素が全て取り出されて新しい配列に格納される }); console.log(filteredNumbers); // 実行結果 [5, 7]
配列の要素がオブジェクトの場合もfilterメソッドを使うことができます。
const characters = [ {name: "にんじゃわんこ", age: 14}, {name: "ベイビーわんこ", age: 5}, {name: "ひつじ仙人", age: 100} ]; const filteredCharacters = characters.filter((character) => { return character.age > 10; // 条件に合う要素が全て取り出されて新しい配列に格納される }); console.log(filteredCharacters); // 実行結果 [ {name: "にんじゃわんこ", age: 14}, {name: "ひつじ仙人", age: 100} ]
mapメソッド
配列の全ての要素に同じ処理をして新しい配列を作るメソッドです。
const numbers = [1, 2, 3]; const doubledNumbers = numbers.map((number) => { return number * 2; // mapで配列の全ての要素に対して2倍する }); console.log(doubledNumbers); // 実行結果 [2, 4, 6]
配列のオブジェクト要素に対しても使うことができます。
const names = [ {firstName: "Kate", lastName: "Jones"}, {firstName: "Brian", lastName: "Smith"} ]; const fullNames = names.map((name) => { // mapでfirstNameプロパティとlastNameプロパティを繋げる return name.firstName + name.lastName; }); console.log(fullNames); // 実行結果 ["kateJones","BrianSmith"]
JavaScriptⅦ
コールバック関数について学習していきます。
コールバック関数とは
JavaScriptでは引数に関数も渡すことができます。引数に渡される関数をコールバック関数と呼びます。
const printWanko = () => { console.log("にんじゃわんこ"); }; const call = (callback) => { // コールバック関数を引数に代入 console.log("コールバック関数を呼び出します。"); callback(); // コールバック関数を呼び出す }; call(printWanko); // コールバック関数 // 実行結果 コールバック関数を呼び出します。 にんじゃわんこ
コールバック関数を直接定義する
コールバック関数を直接引数の中で定義することもできます。
const call = (callback) => { // 関数をcallbackに代入 console.log("コールバック関数を呼び出します。"); callback(); // callback関数を呼び出す }; call(() => { // 関数を引数の中で直接定義 console.log("にんじゃわんこ"); });
コールバック関数の引数
複数の引数を渡すこともできます。
const introduce = (callback) => { callback("にんじゃわんこ", 14); }; introduce((name, age) => { console.log(`${name}は${age}歳です。`); }); // 実行結果 にんじゃわんこは14歳です。
Webプログラミング入門
- 01a. 開発環境構築(Windows8.1+VMware Player+CentOS)
- 01b. 開発環境構築(Windows 10+Ubuntu)
- 01c. 開発環境構築(Ubuntu18.04(WSL)+Ansible+Serverspec+WP-CLI)
- 01d. 開発環境構築(WSL2+Ubuntu18.04+Docker)(作成中)
- 02a. AWS環境構築(CentOS6)
- 02b. AWS環境構築(CentOS6+LAMP環境+WordPress)
- 02c. AWS環境構築(CentOS7+Django)
- 02d. AWS環境構築(CentOS7+Ansible+Serverspec+WP-CLI+Munin)(作成中)
- 02z. さくらのクラウド環境構築(CentOS7+Ansible+Serverspec+WP-CLI)
- 03a. WordPress制作入門
- 03b. WordPress制作入門
- 04. トラブルシューティング
- 11. HTML/CSS入門
- 11a. ProgateでHTML&CSS初級
- 11b. ProgateでHTML&CSS中級(ランディングページ)
- 11c. ProgateでHTML&CSS上級(レスポンシブデザイン)
- 11d. ProgateでHTML&CSS(Flexbox編)
- 11e. ProgateでSass(CSSをより便利に効果的に操作する言語)
- 11y. ドットインストールでBootstrap4入門
- 11z. PaizaラーニングでBootstrap4入門
- 12. MySQL入門
- 12a. ProgateでSQL Ⅰ~Ⅲ
- 12b. ドットインストールでmongoDB入門
- 13. PHP入門
- 14. ProgateでRubyⅠ~Ⅴ
- 15a. ProgateでRuby on RailsⅠ~Ⅴ
- 15b. ProgateでRuby on RailsⅥ~Ⅷ
- 15c. ProgateでRuby on RailsⅨ~Ⅺ
- 16. ProgateでPythonⅠ~Ⅴ
- 17. paizaラーニングでFlask入門
- 18a. Django入門1(Djangoの基本の理解)
- 18b. Django入門2(Djangoの動作の理解)
- 18c. Django入門3(Djangoのテンプレートとフォームを理解)
- 18d. Django入門4(お勧め店を投稿できるランチマップアプリの作成)
- 18e. Django入門5(Djangoでユーザー管理)
- 19a. ProgateでjQuery初級編
- 19b. ProgateでjQuery中級編
- 19c. ProgateでjQuery上級編
- 20a. ProgateでJavascript(ES6)Ⅰ~Ⅲ
- 20b. ProgateでJavaScript Ⅳ~Ⅴ
- 20c. ProgateでJavaScript Ⅵ~Ⅶ
- 20d. JavaScriptでCRUDアプリを作る(ELOOP)