こんにちは。現在電動自転車の購入を検討しているサイトウです。
突然ですが、皆さんは「JavaScript」好きですか？私は最初は苦手だったけれど、徐々に好きになっていった派です。
なぜJavaScriptが苦手だったかというと、メソッドや関数といったプログラミングに大切な概念が、なかなか理解できなかったからです。プログラミングを学ぶまで「メソッド」などという言葉を日常で使うことはありませんでしたから、学習内容を咀嚼して自分のものにするまでに時間がかかったのです。
今回は「JavaScriptメソッドについて」初学者向けに解説します。プログラミング学習でつまずきやすいところなので、丁寧にご紹介します。
JavaScriptを学び始めた方や、メソッドがいまいちよくわからないという方は、ぜひ読んでみてくださいね。
目次
JavaScriptとは
JavaScriptは、HTMLやCSSと同じフロントエンドの言語です。フロントエンドとは、ホームページなどの私たちが普段目にする部分を担当する言語のことを指します。あらゆるブラウザで作動し、特別な開発環境は必要ありません。
JavaScriptは、ホームページに動きをつけることができます。例えば、「ボタンをクリックしたらコメントがでてきた」「画像がスライドショーのように動いた」などです。計算をすることもできます。
また、JavaScriptで簡単なアプリやアニメーションを作ることもできます。Webサービスにおいて活躍の場面が多い言語なのです。
JavaScript「メソッド」とは
メソッドをおおまかにとらえると？
そんなJavaScriptにおいて、便利なものが「メソッド」です。ざっくりいうと「コンピューターへの指示を簡単に使えるようにしたもの」です。
コンピューターに何かしてほしい時、コンピューターにその指示を与えなければなりません。しかし、人間のように「あれ・それ・これ」という言葉は通じませんし、前後の順序を入れ替えたら伝わりません。きちんとルールを守って、明確に指示を出す必要があります。
そこで、よく使う様々なツールを事前に用意しておいて、それをあてはめてコードを書いていけるようになっています。いわば「時短」「手間なし」の便利グッズと同じですね。その便利グッズのひとつが「メソッド」です。
メソッドは「こんな動作をします」という指示に名前が付いており、メソッドを書くとその動作が実行される仕組みです。このように書きます。
|
1 |
console.log( 'こんにちは' ); |
メソッドのあとには必ずカッコ（）が続き、カッコ中に文字列や数値、式などを書きます。最後にセミコロン；です。
また、カッコの中身を引数（ひきすう）といいます。プログラム内に「 メソッド（引数）；」と書くと、メソッドが仕事をしてくれるのです。
メソッドを「方法」という意味で覚えている方は多いと思いますが、プログラミングでは「命令」と理解するとわかりやすいです。私たちがやってほしいことをコンピューターに命令する＝メソッドです。
メソッド、イメージがわいてきましたか？
メソッド・関数・オブジェクトの違い
初学者からよく聞かれるのが「メソッドと関数の違いがわからない」「オブジェクト指向のところにもメソッドがでてきたけど、なぜ？」という声です。それぞれ見ていきましょう！
関数とは、プログラムの中でくりかえし行われる処理をひとまとめにしたものです。関数は自分でオリジナルのものを作ることもできますし、すでに作られているものを組み合わせて使うこともできます。
プログラムの中で、何度か同じ処理をしなければならない時、毎回同じコードを書くのは手間ですよね。そこで、関数を使います。
一度関数を定義しておけば、2回目以降はその関数を呼び出すだけで同じ処理が実行されます。「関数を呼び出す」とは、関数を呼び出すための簡単なコードを書いて、再び同じ処理をさせるという意味です。
短いコードや簡単な関数ならその都度コードを書いても負担は少ないですが、複雑な処理だったり、長いコードだったりすると大変な時間のロスにつながります。関数を使うことはプログラミングにおいて大切なスキルですので、今から慣れていきましょう。
一方、物に関する情報を性質と機能に分けて、きれいにわかりやすく格納しているのがオブジェクトという概念です。「コンピューターが理解しやすいように情報を整理整頓してあげている」と考えてください。
オブジェクトとは英語で「物」という意味ですね。物には様々な情報が付随しています。
具体例をあげます。今、ここに「ウェブカツ太郎」という名前の人形があります。ウェブカツ太郎は以下のような人形です。
- 名前：ウェブカツ太郎
- 性別：男
- 年齢：5歳
- 身長：80㎝
- （電池を入れると）挨拶する
- 目が開いたり閉じたりする
- 腕がぐるぐる回る
「ウェブカツ太郎」という人形に関する情報を「性質」と「機能」という2種類にわけると、次のようになります。
性質＝名前、性別、年齢、身長→いわゆる「名詞」にあたるもの。プロパティといいます。
機能＝挨拶する、目が開いたり閉じたりする、腕がぐるぐる回る→いわゆる「動詞」にあたるもの。メソッドです。
メソッドはさきほど「命令」と理解するとよいですよとお伝えしました。プログラムを書く側からすると、「ウェブカツ太郎に挨拶させる命令をする＝メソッド」ということですね。
まとめると
- メソッド・・・・・コンピューターへの指示を簡単に使えるようにしたもの
- 関数・・・・・プログラムの中でくりかえし行われる処理をまとめたもの（一度書いたコードを2回目以降に使用するときに簡単なコードを書くだけですむ）
- オブジェクト・・・・・物に関する情報をきれいにまとめたもの
となります。メソッドや関数、オブジェクトは長くプログラミングの世界にいる方でも、うまく言語化して説明することができない方もいます。それは、たくさんコードを書いて使いこなすことで、感覚的に理解しているからです。俗にいう「体が覚えているという」ことですね。
プログラミング学習では、言葉や方法をなんとなく頭に入れたら、とにかくコードを書くのがおすすめです。実際に使ってみて体で覚えていきましょう。
よく使うメソッド
メソッドはとてもたくさんあります。一度にすべて覚えるのは難しいので、利用頻度の高いものから順番に理解していきましょう。
- alert(); メッセージをポップアップで画面に表示することができます
- prompt(); 入力画面を表示して、情報を入力してもらことができます
- click(); ボタンをクリックすると、指定した処理を実行させることができます
- confirm(); 内容が合っているか確認を要求するボタンを表示させることができます
上記のメソッドとてもよく使用します。特にclick();とconfirm();はお問合せフォームを作る時に利用されることが多いです。ぜひ覚えておきましょう。
おすすめ書籍
JavaScriptはたくさんの書籍が出版されていますが、その中で初学者の方におすすめの参考本を２冊ご紹介します。
JavaScriptの絵本 Webプログラミングを始める新しい９つの扉
出典：2017年 株式会社翔泳社｜JavaScriptの絵本 Webプログラミングを始める新しい９つの扉［第2版］ 【著】株式会社アンク
題名に「絵本」とある通り、各ページにかわいらしいイラストが載っています。このイラストが秀逸で、JavaScriptの抽象的な言葉をわかりやすく表現しています。
言葉で理解するのが難しいという方は、感覚で理解できるイラストで学習してみると良いかもしれません。イラストだけでなく、文字の大きさも工夫されていて大変読みやすい構成です。一度手に取ってみてください。
これからはじめる人のJavaScript/Vue.jsの教科書
出典：2020年 株式会社マイナビ出版｜これからはじめる人のJavaScript/Vue.jsの教科書【著】たにぐちまこと
とにかく手を動かして体で学んでいくタイプの書籍です。最初にJavaScriptの全体像を解説した後は、サンプルコードをどんどん書いていきます。解説も丁寧でポイントがわかりやすいです。
自身のポートフォリオにすぐに取り入れられそうな実践的なコードばかりで、独学でも楽しく学習を進められるはずです。ぜひ参考にしてみてください。
まとめ
いかがでしたか？今回はJavaScriptのメソッドについてご紹介しました。
プログラミング学習には抽象的な概念がつきものですが、身近なものに置き替えると理解しやすいです。大切なことは、今はよくわからなくても投げ出さずにとにかく続けることです。こつこつ積み重ねていきましょう。
この記事が少しでもお役立にたてたらうれしいです。
