![FLARESのウェブ活用 スタートアップ支援パック FLARES STARTUP ENGINE [FSE]](https://flares.jp/wp/wp-content/uploads/2019/08/fse.png)
![FLARESのウェブ活用 企業サイト活用パック FLARES RELATIONAL ENGINE [FRE]](https://flares.jp/wp/wp-content/uploads/2019/08/fre.png)
![FLARESのウェブ活用 FLARESと取り組むウェブマーケティング FLARES MARKETING ENGINE [FME]](https://flares.jp/wp/wp-content/uploads/2019/08/fme.png)
前回のjavascript IIIに引き続きJavaScript Ⅳ~Ⅶのすべてのレッスンが終わったので、まとめていきます。まずは前回の復習からです。
前回の復習
javascript IIIでは関数について学びました。
まずは関数についてです。
関数とは、いくつかの処理をまとめたものです。関数は、function(){ 処理 }と書くことで用意できます。関数を定義したときに使用した定数名を使い、定数名()と書くことで関数の中の処理を実行できます。
関数では、function()の部分を() =>と短縮することができます。関数では引数というものが使えます。引数は関数に渡す値のことです。関数を呼び出すときに値を渡すことで、その値を使うことができます。const 定数名 = (引数名) =>と書くことで引数を受け取ることができます。引数を受け取る関数を呼び出すには、定数名(値)と書きます。
次は戻り値についてです。戻り値は関数を出力したときに戻ってくる値です。関数の中でreturn 値と書くことで、その値を戻り値として返します。関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことができません。定数、変数などの使用できる範囲のことをスコープと呼びます。
前回の復習は以上です。前回の記事で詳しくまとめているのでもう少し知りたいという方はリンクを張っておきますのでよろしければ読んでみてください。
JavaScript Ⅳ~Ⅶで学んだことについて
今回のJavaScriptⅣ~Ⅶで学んだことをまとめていきます。
JavaScript Ⅳ で学んだことについて
JavaScript Ⅳ ではクラスについて学びました。
クラスの基本
Webサービスなどでは、Javascript Ⅱ で学んだオブジェクトをいくつも扱っています。似たようなオブジェクトを一から作っていくのはとても大変ですよね。効率よくオブジェクトを作っていくには、最初に設計図を用意する方法があります。たくさんのオブジェクトを作っていく時、最初にオブジェクトを生成するための設計図を用意し、その設計図をもとにオブジェクトを生成していくといったことができます。
この設計図のことをJavaScriptではクラスと呼びます。class クラス名と書くことでクラスを用意することができます。クラス名は基本的に大文字から始めるようにしましょう。クラスから実際にオブジェクトを生成するには、new クラス名()と書きます。クラスから生成したオブジェクトはインスタンスと呼びます。
クラスにはコンストラクタという機能があります。コンストラクタはインスタンスを生成するときに実行したい処理や設定を追加するための機能です。コンストラクタはクラスの{}の中にconstructor(){ }と書きます。コンストラクタの中にも処理を書くことができます。書いた処理はインスタンスが生成された直後に実行されます。
コンストラクタの中で、生成したインスタンスに関する情報を追加することもできます。コンストラクタの中でthis.プロパティ = 値とすることで、プロパティと値を追加できます。インスタンスはオブジェクトなので追加した値は、インスタンス.プロパティと書くことでクラスの外で使うことができます。
コンストラクタでは、関数と同じように引数を受け取ることもできます。constructorの後の()の中に引数名を書くことで、引数を使うことができます。コンストラクタに引数として値を渡すには、newクラス名()の()の中に値を書きます。
次にクラスで重要なメソッドについてです。
メソッドは動作のようなもので、名前などの情報をプロパティで追加したのに対して、メソッドは計算するなどの処理のまとまりを表しています。メソッドはクラス内で定義します。メソッド名() { }と書くことで、定義できます。{} の中に行いたい処理を書きます。メソッドは、インスタンスに対して呼び出します。インスタンス.メソッド名()と書くことでメソッドを呼び出し、処理を実行することができます。
メソッド内で値を使うこともできます。メソッド内でインスタンスの値を使用するにはthisを使って、this.プロパティ名と書きます。
メソッド内で他のメソッドを呼び出すこともできます。メソッドの中でthis.メソッド名()とすることで、同じクラスの他のメソッドを使うことができます。
クラスの継承
クラスの継承とは、すでにあるクラスをもとに、新しいクラスを作成する方法のことです。元々あるクラスから新しくクラスに継承すると、元々あるクラスに機能をすべて引き継いで新しいクラスを作ることができます。継承では元となるクラスを親クラス、新しく作成するクラスを子クラスと呼びます。継承を使ってクラスを作るにはextendsを使います。class 子クラス extends 親クラスと書くことで継承を用いてクラスを作れます。
継承したクラスにもこれまでと同じようにメソッドを追加することができます。メソッドでは、関数と同じように戻り値を使うことができます。子クラスで定義したメソッドは、親クラスから呼び出すことはできません。
親クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先されます。子クラスのメソッドが親クラスのメソッドを上書きしていることからオーバーライドと呼ばれます。
コンストラクタもメソッドと同じように、オーバーライドすることができます。子クラスにプロパティを追加したい場合などに使います。コンストラクタをオーバーライドする時は1行目にsuper()と書く必要があります。super()では、親クラスのコンストラクタを呼び出しています。親クラスのコンストラクタが引数を受け取る場合は、superの後ろの()に引数を渡す必要があります。
JavaScript Ⅳで学んだことは以上です。
JavaScriptⅤ で学んだことについて
続いて、JavaScriptⅤで学んだことについてまとめていきます。
外部ファイルの読み込み：デフォルトエクスポート
コードの量が増えると1つだけのファイルで管理するのが大変になってきます。そのような場合は複数のファイルでコードを管理することがあります。ファイルを分割したときにファイルに必要な値などなくなってしますとエラーが起きてしまいます。このようなエラーはそれぞれのファイルを関連付けし、必要な値を渡すことで解決します。
プログラムの実行部分と定義部分をファイル分けしたときに定義ファイルのクラスを他のファイルで使うためにはまずクラスの定義の後にexport default クラス名と書きます。このように書くことでそのクラスをエクスポートし他のファイルに渡すことができます。
次にエクスポートしたクラスを他のファイルで使うにはインポートする必要があります。使用するファイルの先頭でimport クラス名 from “./ファイル名”と書くことでインポートすることができます。ファイル名の .js は省略できます。
任意のファイルを読み込む
エクスポートはクラスだけでなく、文字列や数値など、どんな値でもエクスポートすることができます。export defaultはデフォルトエクスポートと呼ばれていて、そのファイルがインポートされるとexport default 値の値がインポートされます。そのためエクスポート時の値の名前と、インポート時の値の名前は違っても問題ありません。デフォルトエクスポートは1ファイル1つの値のみ使うことができます。
複数の値をエクスポートしたい場合は名前付きエクスポートを使います。名前付きエクスポートはdefaultを書かずに、名前を{}で囲んで書きます。名前付きエクスポートをインポートする場合はimport { 値の名前 } from “./ファイル名”と値を{}で囲んで書きます。複数のエクスポートがしたいときはexport { 名前1, 名前2 }と書くことで、1つのファイルから複数のエクスポートが出来ます。
世の中に公開されているサードパーティーのパッケージ
JavaScriptでは誰かが作った便利なプログラムがパッケージという形で公開されています。このパッケージをJavaScriptの機能を使うことで自分のプログラムの中に組み込んで使うことができます。パッケージを自分のプログラムで使うためには、importを用いてパッケージをインポートします。import 値の名前 from “./パッケージ名”と書くことで使うことができます。パッケージは世界中のプログラマが作ってくれていてほんとにたくさんあるみたいでですね。
JavaScriptⅤで学んだことは以上です。
JavaScriptⅥで学んだことについて
JavaScriptⅥでは配列を操作するメソッドについて学びました。
pushメソッド
まずはpushメソッドについてです。
pushメソッドは、配列の最後に新しい要素を追加するメソッドです。pushメソッドの後に追加したい要素を入れます。
foreachメソッド
次にforEachメソッドについてです。
forEachメソッドは配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッドです。forEachメソッドの引数には、アロー関数が入っています。配列内の要素が順番にアロー関数の引数に代入され、処理が繰り返し実行されます。引数に入っている関数はコールバック関数と呼びます。
findメソッド
続いてfindメソッドについてです。
findメソッドとは、コールバック関数の処理部分に書いた条件式に合う1つ目の要素を配列の中から取り出すメソッドです。このメソッドの引数もコールバック関数を使います。コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となります。findメソッドは条件に合う見つかったら終了するので、条件に合う1つ目の要素しか取り出せません。
filterメソッド
次はfilterメソッドについてです。
findメソッドが条件に合う1つ目の要素しか取り出せないのに対して、filterメソッドを使うとで配列から条件に合うすべての要素を取り出すことができます。このメソッドの引数もコールバック関数を使います。コールバック関数の中は { return 条件 } と書くことで、条件に合う要素が戻り値となります。
mapメソッド
最後はmapメソッドについてです。
mapメソッドは配列の全ての要素に同じ処理をして新しい配列を作るメソッドです。このメソッドの引数もコールバック関数を使います。コールバック関数の中は { return 条件 } と書きます。
JavaScriptⅥで学んだことは以上です。
JavaScripⅦで学んだことについて
コールバック関数
JavaScripⅦでは先ほどにも出てきたコールバック関数について学びました。
JavaScriptでは引数に関数を渡すことができます。引数に渡される関数をコールバック関数といいます。関数は関数名の後ろに()を付けると呼び出され、()を付けなければ関数の定義そのものを指します。なので、呼び出し方と渡し方で書き方が違ってきます。
事前に定義した関数をコールバック関数として渡す他に、関数を直接定義するということもできます。動作の流れは、事前に定義した関数を引数に渡す場合と同じです。
コールバック関数では、関数と同じように引数を渡すことができます。複数の引数の渡せます。コールバック関数の引数と、実行時に渡す引数の数をそろえておくよう注意が必要です。
これでprogeteのJavaScriptのレッスンはすべて終了となります。
まとめ
今回は、JavaScript Ⅳ~Ⅶのレッスンをまとめて進めていき、一気にまとめてみました。正直、今回のレッスンでいうとメソッド、特にコールバック関数の理解がまだまだ出来ておらず、まとめながら色々と悩む部分もありました。しかし、メソッドもコールバック関数も便利なもので、使いこなしていくことは必須のことです。今回でひとまずJavaScriptのレッスンは終了となりますが、もっと自主的に勉強して、今回で理解しきれなかった部分はもちろん、より高いレベルのことができるよう頑張ってやっていきたいと思います。
前回までのProgate学習記事はこちらですので、よろしければ読んでみてくださいね。
You might also like
More from Web／IT
WordPress.comで無料で始めるホームページ制作【2020年6月度 Mie WordPress Meetup 登壇資料】
こんにちは、フレアーズ合同会社代表社員の山口です。 Contents1 WordPress.comで無料で始めるホームページ制作2 勉強会へのリンク WordPress.comで無料で始めるホームページ制作 明日のWordPressMeetupの登壇資料を事前に共有いたします。 大した内容ではないのであしからず。 勉強会へのリンク 勉強会へのリンクはこちらです。 Zoomでのオンライン開催ですのでお気軽にご参加ください。 【オンライン開催(Zoom)】[三重]Mie Word…
ウェブ制作で成果を出すためのウェブディレクターズシート – Powerd by FLARES LLC
「ウェブディレクターの仕事ができない」ってコンプレックスがあったので、やるべきことをシートにまとめてみました。 デザイナーやコーダーに仕事を回す前段階として「要件をまとめる」というが具体的に何をするのかということについて考えてみたのですが想像以上にボリュームがありますね。まぁ、一旦見てみてください。 Contents1 ウェブディレクターズシート1.1 シートのダウンロード1.2 シート構成2 ディレクションを舐めてはいけない2.1 要件定義予算は絶対に必要、デ…
お客様に動画に出演していただくための段取りは難しい
本日は愛知県豊明市に接骨院様のウェブサイトのリニューアルで利用するための動画の撮影に行ってまいりました。 まぁ、動画撮影会の開催も回数を徐々に重ねながら経験を積み重ねていってはいますが、まだまだ着実な進行までは程遠そうです。本日はその過程で感じたことを書いてみたいと思います。 Contents1 動画撮影は簡単ではない1.1 カメラに向かってなかなか上手に話せない1.1.1 計画を立てることが必要かも1.2 撮影がうまくいかずに長時間化するとカメラの電池がなくな…
