JavaScript

JavaScriptの配列のpushを例に、メソッドを覚えるコツ

どうも、つよぽんです!

今回は、JavaScriptの配列メソッドを覚えるコツについて解説します。

今回の記事では配列を例に使いますが、配列以外の場合でも今回説明する方法でドキュメントを読むと、新しく知ったメソッドをすぐに使うことが出来るようになるでしょう。

今回の記事は次のような方に向けて書きました。

想定読者
  • 関数とメソッドの違いって何?
  • 新しく知ったメソッドの使い方を早く身につける方法を知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptの配列の組み込みメソッドを使ってみるJavaScriptの配列には組み込みで便利なメソッドがたくさん用意されています。「メソッド」というのは関数のようなものです。組み込みメソッドの1つである「push」「pop」をサンプルコードを使いながら解説します。また、初めて使うメソッドでも早く使えるようになるコツも解説しています。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptの関数とメソッドの違い
  2. JavaScriptのメソッドを覚えるならまずはMDNを読む
  3. JavaScriptの配列メソッドの1つ「push」を覚える

 

JavaScriptの関数とメソッドの違い

この章では、「JavaScriptの関数とメソッドの違いとは何か?」について解説していきます。

そもそも「メソッド」とは何なのでしょうか?

メソッドとは、基本的に関数と同じものと考えて良いです。

基本的に」と書いているのは具体的には次の違いがあるからです。

関数とメソッドの違い
  • 関数とはオブジェクトに属さない関数のこと
    • 例: 「hoge()」, 「fuga()」のようにいきなり関数名から関数を実行できる
  • メソッドとはオブジェクトに属する関数のこと
    • 例:
      • array.push(1)」,「array.pop()」のように関数名(厳密にはメソッド名)の前にオブジェクト名がつく
      • オブジェクト.メソッド()」の形式で実行できる

JavaScriptのオブジェクトがわからない方は以下の記事内のスライドで解説しているので、そちらを参考にして頂けたらと思います。

【JavaScript】オブジェクトとは【入門】

  • オブジェクトに属さない関数 → 関数
  • オブジェクトに属する関数 → メソッド

JavaScriptのメソッドを覚えるならまずはMDNを読む

この章では、「MDNを使ってJavaScriptで新たに覚えるメソッドを早く身につけるコツ」を解説します。

MDNとは

MDN(Mozilla Developer Network)はWeb開発に使う技術、つまりHTML、CSS、JavaScriptのドキュメントページとなります。

MDNで学べる情報の一部を挙げると次のとおりです

MDNで得られる情報
  • HTML
  • CSS
  • JavaScript
  • グラフィック(CanvasやWebGLなど。ブラウザゲームで使える技術)
  • 音声、動画、マルチメディア(パソコンのカメラの利用、音声・動画の操作が出来る)

他にどんなことが学習できるか概要を知りたい方は「開発者向けのウェブ技術」を見てみると良いでしょう。

MDNの例を見れば使い方のイメージがつかめる

JavaScriptの学習やWebサービスを作っていく中で次のような経験をすることは多いのではないでしょうか?

開発・学習でよくある体験
  • 今まで使ったこと無いメソッドと遭遇する
  • 以前使ったことあるメソッドだが、使い方を忘れてしまった

例えば配列メソッドの1つである「forEach」を新たに学習するとします。

このときはGoogleなどで「mdn foreach」や「mdn javascript foreach」とかで検索すればだいたい一番最初の方にMDNのforEachメソッドのドキュメントリンクが出てきます。

ドキュメントページに移動して、少し下にスクロールすると「」「引数」「戻り値」いうところがあるので、その3つをみることで実装イメージをつかむことが出来ます。

以下のリンクから今回の例で説明している「forEach」のページに移動することが出来ます。

Array.prototype.forEach()

以下の画像はforEachの「例」「引数」「戻り値」をキャプチャしたものです。

MDNの「Array.prototype.forEach()」の例MDNの「Array.prototype.forEach()」の例
MDNの「Array.prototype.forEach()」の引数と戻り値MDNの「Array.prototype.forEach()」の引数と戻り値

 

流れとしては次のような流れで「例」「引数」「戻り値」を見れば良いでしょう。

  1. MDNの「例」を見て、どのようにして使われるのかイメージを掴む
  2. 引数が必要なメソッドであれば、どんな引数を受け取るのかMDNの「引数」の項目を確認して、受け取れる引数の種類を確認する
  3. 戻り値があるメソッドであれば、どんな戻り値が返ってくるのかMDNの「戻り値」の項目を確認して戻り値のデータ型を確認する

JavaScriptの配列メソッドの1つ「push」を覚える

この章では、前の章で説明したMDNを実際に使って、配列メソッドの1つである「push」を使った実装例を紹介していきます。

以下の画像はMDNの「Array.prototype.push() > 例」を抜粋したものです。

MDN上の配列のpush(Array.prototype.push)の例MDN上の配列のpush(Array.prototype.push)の例

配列のpushメソッドの「例」から、pushメソッドでは次のことが出来るというのがわかります。

pushの例からわかること
  • 配列のpushメソッドは引数を複数受け取ることが出来る
  • 配列のpushメソッドの引数で渡した値は、その配列の末尾に追加される
  • 配列のpushメソッドは戻り値が存在して、配列に値を追加した後の要素数が戻り値となる

あとは、上記で理解したことを元に実際にコードを書いて、意図通りに動いているのを確認することで、そのメソッドを身につけることが出来ます。

以下の画像は実際にpushメソッドを記述したコードになります。

MDNの例を参考に実際に実装してみるMDNの例を参考に実際に実装してみる

ここで特にプログラミング初心者の方に強く言いたいのが「実際に手を動かして挙動を確かめることが重要」だということです。

ドキュメントを読んで「メソッドの使い方がわかった」というのは「メソッドが使える」とイコールではありません。

例えると、「英単語を知っている」と「英語が話せる」は全く違うのと同じようなものです。

新しいメソッドの使い方を理解したら、「簡単なサンプルコードを書き、console.logで意図した値が出力されるか」を確認することをオススメします。

  • MDNのドキュメントを読んでメソッドの使い方を把握したら、まずはサンプルコードを書いて覚えたメソッドの挙動を確認する

上の画像のコードは以下のリンクから直接確認できます。

配列の組み込みメソッドのサンプル_push

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • 関数とメソッドの違い
    • 関数とはオブジェクトに属さない関数のこと
    • メソッドとはオブジェクトに属する関数のこと
  • 新しく知ったメソッド・使い方を忘れてしまったメソッドと遭遇したらMDNで調べる
  • MDNでメソッドの使い方を覚えるときは「①例」「②引数」「③戻り値」の順番でドキュメントを参考にすると良い
  • MDNのドキュメントを読んで使い方を覚えたら、実際にコードを書き挙動を確かめることをオススメする

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptの配列の組み込みメソッドを使ってみるJavaScriptの配列には組み込みで便利なメソッドがたくさん用意されています。「メソッド」というのは関数のようなものです。組み込みメソッドの1つである「push」「pop」をサンプルコードを使いながら解説します。また、初めて使うメソッドでも早く使えるようになるコツも解説しています。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です