【JavaScript入門】オブジェクト – プロパティとメソッド

JavaScript
スポンサーリンク

初心者の独学でのプログラミング学習はとてもツライ…

プログラミングをマスターしたい!

今のIT業界はプログラミングエンジニアが不足していると言われています。
高収入の職業とも言われる分野もありますし、AI、機械学習、ディープラーニング、IOTといった注目される分野が目白押しです。

でも、いざ初心者がプログラミングをマスターしようとすると…

  • 本を読んだりネットの記事で自力で勉強しているけど限界を感じる
  • プログラミングスクールに定期的に通うのは面倒だ
  • 地方に住んでると家の近くにプログラミングスクールなんてない
  • どのプログラミング言語を学べばいいのか悩む
  • 実際の就職や転職にプログラミングが活かせるのか心配だ

など、プログラミングを自分で勉強しようとすると悩みが尽きません。

プログラミングに詳しい友人に教えてもらおうと思っても、そんな友人なんて滅多にいません。いたとしても細かく教えてくれるほど時間に余裕がある人はいないでしょう。

そんな独学でプログラミングをマスターするのに限界を感じてる方に、オンラインプログラミングスクールをがおすすめです。

おすすめのオンラインスクールはこちら

ここではJavaScriptのオブジェクトについて基本的なところを扱います。

JavaScriptのオブジェクトは簡単にいえば、他の言語でいう連想配列です。名前をキーにアクセスができる値です。通常の配列がインデックス番号のみをキーにしているということと違いがあります。

オブジェクトはプロパティとメソッドで構成されます。というだけではイメージが掴みにくいと思うので、基本的なことを具体的にみていきましょう。

スポンサーリンク

オブジェクトとプロパティ

オブジェクトは連想配列だと述べました。通常の配列はインデックスの数字と値が対応しています。配列についてはすでにこちらで扱いました。

【JavaScript入門】配列の生成と操作 - Arrayオブジェクト
JavaScriptは値の集合を操作するための一般的な方法であるArrayオブジェクトについて扱います。Arrayオブジェクトとは配列で、要素を角括弧で括って生成します。インデックスを指定して値を取り出したり、メンバーを使って操作できます。

この配列がインデックスという数字をキーにしかできないのに対して、オブジェクトは文字列をキーにアクセスすることができるので、データの対応関係がとてもみやすくなるのが特徴です。

プロパティとは、オブジェクトの状態や特性を表す情報のことを言います。

具体的なコードで見てみましょう。

波括弧{}の中に、キーと値をコロン(:)でセットにして、要素が入れられているのがわかります。他のプログラミング言語の連想配列の形ですね。これがJavaSriptのオブジェクトということになります。これを変数に代入することをインスタンス化と言います。

console.log()で表示するとこうなります。

通常は最初の1行だけですが、▼印をクリックして展開して表示しています。

プロパティは、オブジェクトの状態や特性を表す情報でしたが、次のようにして取り出すことができます。

変数にドット(.)でキーを接続して出力しています。また、ドットで接続せずに角括弧[]にキーを指定して出力しています。どちらも同じ操作ですが、ドットで接続する方法が良いとされています。また、キーを新たな変数に代入して、それを角括弧で指定して出力しています。

このようにしてプロパティの内容を確認することができます。

次のようにすることで、プロパティの内容を変更することができます。

インスタンス変数にドットでキーを接続、または角括弧でキーを指定して、それぞれの値を変更しています。

出力すると次のようになります。

値が変更されて出力されているのがわかります。

上ではオブジェクトは波括弧{}で連想配列を作ることで作成していますが、new演算子を使ってオブジェクトを作ることもできます。

newに続けてオブジェクト名を指定して、インスタンス変数に入れています。この時点では空のオブジェクトです。これにインスタンス変数にドット接続でキーを指定して値を入れて行きます。

表示するとこうなります。

新しいオブジェクトとして作成されているのがわかります。ただし、こちらも配列の時と同じようのnew演算子は表現が余計なので基本的に使わないということになっています。

スポンサーリンク

オブジェクトとメソッド

今度はオブジェクトのメソッドについてみていきましょう。メソッドはオブジェクトの操作をするための道具です。

最初に示したオブジェクトのコードを次のように変更してみます。

最後に、calcBirthYearというキーを与えて関数のfunction()を定義しています。この部分がメソッドになります。returnで戻り値として西暦2019から年齢のageを引いています。このときこのオブジェクトを示すthisキーワードを使っています。

次のようにドット接続で関数を実行すると、計算の値を取り出すことができます。

2014と値が出力されるはずです。

これを、次のように書き換えることもできます。

returnで戻り値を返す代わりに、このオブジェクトであるthisキーワードを使ってbirthYearの変数を作って、その中に計算の値を代入する形にしています。

これをインスタンスからドット接続でこのメソッドcalcBirthYear()を実行して、オブジェクトの内容をconsole.log()で表示しています。

実行すると、JavaScriptコンソールには次のように表示されます。

birthYearも計算されて表示されているのがわかります。

次のようにな書き方もできます。

JavaScriptコンソールに2014と出力されるはずです。

スポンサーリンク

まとめ

ここでは、JavaScriptのオブジェクトについて簡単に触れてみました。JavaScriptのオブジェクトは他の言語でいう連想配列です。通常の配列がインデックス番号のみをキーにしているのに対して、オブジェクトは名前をキーにアクセスができる値です。

ここではオブジェクトのプロパティとメソッドについて、基本的な操作を行いました。もっと複雑な操作は知識を深めた段階の別のところで詳細に触れていきます。

自宅学習はオンラインプログラミングスクールを活用!

自宅学習にはオンラインプログラミングスクールがおすすめ!

オンラインプログラミングスクールは独学でプログラミングを学習する時のデメリットを解消する仕組みが備わっています。

気になるところは…

学習がオンラインで完結するのはもちろんですが、独学ではできない質問サポートがあるかどうか。わからないことを現役のエンジニアが質問に答えてくれるといいですよね。

受講者個人に担当のメンターがつき、マンツーマンで学習の相談に乗ってくれることも必要で、ITエンジニアの世界についても伺えたりもすると幅が広がります。

オンライン面談だけでなく、チャット機能を使って気軽に質問を投げかけることができることも大切です。

また、オリジナルプロダクトの開発とサポートがコースの中に組み込まれていて、独学ではなかなか難しい実践的なスキルの習得にもつなげたい。

プログラミングをマスターした後の実際の仕事につながる転職サポートでがあると、ITエンジニアの世界に飛び込むのに不安が解消されます。

そんな豊富なメニューが揃っているおすすめのオンラインプログラミングスクールがこちらにあります。

おすすめのオンラインプログラミングスクールはこちら

TechAcademyはおすすめのオンラインプログラミングスクール!

オンラインのプログラミングスクールでは、テックアカデミーの充実度が目を見張ります。

オンラインで受講が完結するので、自宅学習でプログラミングをマスターしたい人にはテックアカデミーがおすすめです。

メンター制度も現役のプロが対応してくれます。大学生などが対応しているスクールに比べて本気度と専門性が違います。メンター制度の無いスクールもありますし、担当では無いメンターが対応するスクールもあったりするので、相談の質が違いますね。

チャットサポートもあるので、それが無いスクールに比べて相談の気軽さの違いがあります。

プロダクト開発のサポートで実践力が養われるだけでなく、どの講座を利用しても転職サポートが受けられるのはありがたい。

用意されているコースも、初心者向けのプログラミングコースから、Python、Java、PHP、iPhoneアプリ、AndroidといったITエンジニアのベースとなる主要な言語だけでなく、AI、データサイエンス、ブロックチェーン、webアプリケーションと行った実践的なコースまで用意しています。

他にも、webデザインやUI/UXデザイン、動画編集、webディレクションやwebマーケティングといったプログラミング以外での役立つコースまであります。

このようなたくさんの選択肢から自分にあったコースを選ぶことがでるのがテックアカデミーです。

コースの期間も短期間でマスターしたり、長期の受講でじっくり取り組むコースを選ぶこともできます。

複数講座のセットコースを利用することで大幅な割引が受けらるので、お得に受講することもできます。

無料体験もありますので、プログラミング学習でオンラインスクールを考えている人はTechAcademyをぜひ利用してみてください。

テックアカデミーの公式サイトはこちら

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

とにかく進め!Pythonプログラミング入門 〜 コードグラフィティ
タイトルとURLをコピーしました