【JavaScript入門 #3】オブジェクト・プロパティ・メソッドについて理解しよう【ヤフー出身エンジニアの初心者向けプログラミング講座】
Вставка
- Опубліковано 21 лип 2024
- JavaScript講座の第4回では実際にコードを書いています → • 【JavaScript入門 #4】オブジェク...
🙇♂️ お詫び
動画内で「オブジェクト」と「オブジェクト指向」を混同させる表現をしてしまっておりますが、実際は別物でございます。お詫びして訂正いたします。申し訳ございませんでした。また別途、修正兼解説の動画を制作する予定でございます。それまでは下記リファレンスを参考にしていただけると幸いです。
developer.mozilla.org/ja/docs...
📙 もくじ
0:00 学ぶ流れについて
1:39 オブジェクト・プロパティ・メソッドの用語紹介
3:12 UA-camrを例に分かりやすく解説
5:58 オブジェクトの作り方を解説
9:16 UA-camrの例でオブジェクトを作ってみる
12:51 プロパティやメソッドにアクセスする方法を解説
16:06 Window, Documentについて紹介
19:28 まとめ
🚀 今日のひとこと
今回はJavaScriptのオブジェクト・プロパティ・メソッドについて見ていきます。オブジェクト指向型のプログラミング言語ということもあり、オブジェクトに関する理解は必須です。
また前回の講座でJSのしごとは「データのやり取り」「DOM操作」と伝えましたが、それをするためにはWindow、Documentオブジェクトについて知る必要があります。今回の講座ではそういった実践的な内容まで触れています。
フロントエンドエンジニアを目指す方や初心者・駆け出しエンジニアにオススメの入門講座になっております。
🔥 基礎から学ぶ JavaScript 入門
【第1回】フロントエンド開発でJavaScriptが必要な理由を解説
• 【基礎から学ぶ JavaScript 入門 ...
【第2回】Twitterを例にJavaScriptがどんな働きをするのか理解しよう
• 【基礎から学ぶ JavaScript 入門 ...
【第3回】オブジェクト・プロパティ・メソッドについて理解しよう
• 【JavaScript入門 #3】オブジェク...
【第4回】オブジェクトを実際にコードで書いてみよう
• 【JavaScript入門 #4】オブジェク...
【第5回】変数を理解しよう！var, let, constの使い分け！
• 【JavaScript入門 #5】変数を理解...
【第6回】初心者がつまづきがちな「関数」を分かりやすく解説
• 【JavaScript入門 #6】初心者がつ...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#JavaScript #JavaScript入門 #JavaScript講座 - Навчання та стиль
コード実習の予定でしたが、その前にどうしてもオブジェクトの話が必要だと思ったので今回も概念的な講座にしました。
今回の内容から少し難易度がアップしているかと思いますが、どのぐらいの難易度に感じましたか？
今後の講座の参考にしたいのでコメントで教えていただけると嬉しいです！🙏
自分はある程度かじったことがあるので、復習みたいな感じで非常にわかりやすかったですね。
あとは具体的にどのようなときに役に立つのか、利用ケースのメリットが知りたいです。
他に疑問に思ったことは、JavaScriptの書く場所とそのメリット、デメリット。
Node.jsを利用してサーバサイドでJavaScriptを利用する理由、どのような場合に役立つのかなど。
次の動画を楽しみにしています。
ありがとうございます。
JavaScriptのしごとは大別すると「データのやり取り」と「DOM操作」に分類されるのですが、それを行うためにオブジェクトを理解する必要があります。第4回ではオブジェクトのコードを書いて学びを深めて、その後で実際に「データのやり取り」と「DOM操作」を行います。多分、そこまで行くとすべてが繋がると思います！
Node.jsを使うメリットはたくさんあります。まずエコシステムが大きいです。エコシステムが大きいとNode.js周りのたくさんのツール・ライブラリが開発されます。そういったツール・ライブラリが充実しているのは明確なメリットですね。言語的な強みで言うと大量のリクエストを捌くのに向いているという特徴があります。あとはフロントエンドの知識を活かせるのも強みで、同じ言語の方が色々とスイッチングコストは低いですからね。
...という感じで長くなりました。もっと利用ケースなどが明確に分かるように講座制作がんばります！有益なコメントありがとうございます。
普通に独学したらここまで辿り着くのに最短でも1か月はかかるでしょう。それを20分で理解させてしまう表現力、指導力に驚くばかりです。
永遠の20代を真顔で言うのが最高でしたw
ちょっと、照れてますよ笑
毎度ありがとうございます！オブジェクトはかなり大事ですよね…！
ユニークな説明の仕方で、わかりやすかったです。本当にわかっている方の説明はすばらしいと思いました。
参考になりました‼️難易度は上がってますが、ついていけるように頑張ります✨
解説のたとえがめちゃくちゃわかりやすかったです！！
プログラミング思考ってこういうことなのか、、と感心させられました。
オブジェクトの説明、今まで本当にいろんな説明方法を聞きましたが、しまぶーさんの説明が最もわかりやすくてすんなり理解できる内容だと思いました。感動です。
メッチャ分かりやすいです。ありがとうございます。
オブジェクト志向の意味がよーく理解出来ました。
今までの教材の中で、一番分かりやすい説明でした。
この動画を作ってくれて大感謝です！！
引き続き、動画のアップを楽しみにしています。
昨日初めて見てすごい分かりやすいと思いました！プログラミング勉強中なのですごい助かります！！初心者でも分かりやすい内容でした！
うおー超嬉しいコメントです🤣今後も分かりやすく学びなる動画を出して、講座を見てくださった方がフロントエンドエンジニアとして働けるように頑張ります！✌️
プロゲートとドットインストールの入門編を見た後でこれ見たら、凄い分かりやすかったです。
流石、分かりやすい動画で、助かります。
良かったですー！
応用までやる予定なので、ぜひぜひご期待ください！✌️
すごいなるほど感でした。素晴らしい動画ありがとうございました！
とても分かりやすく同期や友達に広めさせていただきます。
毎回、楽しみしているため今後もお願いいたします
それは嬉しすぎます・・・😂
もちろん、途中で頓挫することはないので安心してください！
今後もドンドン動画を出していきます💪
こんな噛み砕いたら信じられないくらい単純な説明がいくら探してもネットに落ちてないんです。(初心者に教える気が、感じられない)
この動画は親切で人を本気で育てる内容だと思います！ありがとうございます
今回も丁寧な講義内容ありがとうございます！本当に有益です。最後のwindowの解説は完全に初耳でした！console.log()はwindowオブジェクトに対しての出力だったという訳ですね、納得です！こういう初学者が意外と知らないネタは楽しいです☺️
今回もとても分かり易かったです。
今、JavaScript基礎学習中の身としては、難易度ちょうど良かったです👍
次の動画も楽しみにしております！
難易度に関して教えていただいてありがとうございます！
こんなレベル感の動画をドンドン出していきます・・・が内容としてはやはり難しくなっていきます。なるべく丁寧な解説をするので、ぜひついてきてください！✌️
しまぶーさんの動画はわかりやすいです！
ありがとうございます
いつも参考にさせていただいてます！
ありがとうございます😂
今後も分かりやすい講座お任せください😎👍
いつもありがとうございます。まだhtmlを勉強の身ですが、しまぶーさんの動画は初心者の私でもざっくり話が掴めるような内容なので、助かります。積み重ね努力します。
最近プログラミングを始めるにあたって、大変参考にさせていただいております。
例題等が噛み砕かれており、本当にわかりやすいです
初心者です。ピリオドがいくつもあるとわからなかったのですが、今回の説明ですっきりしました。感謝です。
これ、タダで見せてもらって申し訳ないです。
初学者はそもそも概念、考え方がわからないので、この解説素晴らしいと思います。板書もわかりやすい。
伝え方のうまさ、丁寧さが有料教材レベルですよね。
Pythonを勉強しているのですが、このビデをみて、やっとオブジェクトの概念が腹に落ちました。それと同時に関数がドットで繋がれている概念も理解できました。本当にありがとうございました！
18:00 ブラウザ自体もオブジェクトで定義されていて、そのルートがwindowだというところが物凄く腑に落ちました。ありがとうございます。
このレベルの解説が無料なのが本当にすごい…本出されたら買います…
c++経験があるのでその知識と
比較すると勝手が違って面白い🤣
これからjavascriptを勉強するので参考にさせてもらってます🙇♂️
とてもわかり易かったです！
どの動画より一番良かったです！
クオリティたかーい。簡潔で分かりやすい
わっかりやす
特に最後 ありがとうございます
こんな上質な講座を無料で観させてもらえることに感謝です。
しまぶーさん ありがとうございます。
引き続き 頑張ってjavaScriptを学習します。
IT大学のしまぶー教授という人がやってる講義がどうやら分かりやすいらしいというにおいを嗅ぎ付けてやってきた私。
先生には感謝しかない。
これからもかじりついて聴いていくことにする。
例えがわかりやすくてプロパティとメソッドの相関図が視覚的にわかりやすくとても勉強になりました。
UA-camの特性上表層的なところを解説する動画が多い中、本質的なことを伝えようとしてくれていることに好感を持ちました。
そのため初学者にはわかりにくい点もありますが、私のようなそもそもの概念を求める人にはとても参考になります。
「オブジェクト・プロパティ・メソッド」について色々調べましたが、この動画が一番分かりやすかったです。
非常にわかりやすかったです
めちゃ分かりやすいです。
ありがとうございます😁
さらっと「永遠の20歳なんで」って言っちゃうの好き
しまぶーさんマジぱねっす...
毎回凄い!
1ヶ月間いつ使うかわからないままProgateでJavaScript学習してたけど、なんかすごいスッキリしました！
今ちょうど学んでいてオブジェクト、プロパティ、メソッド用語で調べると分けわからなくて挫折しそうでした。
UA-camrに例えて想像できて理解しやすかった。見てよかったです、ありがとうございます
素晴らしい！！
最近視聴を始めましたが、隙間時間でもものすごく勉強になるので大変ありがたいです。
概念から入るの、本当に大事ですね。。すごくわかりやすかった。
スクールに通っていてもうすぐ卒業ですが、概念が理解できてなかったからうまく使えなかったのだなと痛感しました。
私もフロントサイドが好きなので、しまぶーさんの動画も見ながらJavaScriptを修めたいと思います！
良かったです、そう言っていただけて嬉しいです😭
ただ構文だけ覚えても本当に使えないことが多いので、なるべく概念とか背景といった部分から理解することが大事ですよね。今後も分かりやすいJavaScript講座をできるようにがんばります！
コメントありがとうございます。本当にそう思います。最初から全体を繋いで理解はできないかもしれませんが、全体像から入って、個別に取り組んで、もう一回全体に帰るとすごく繋がってくるなと感じました。
これからもしっかりと勉強させていただきます＾＾
consoleやalertがブラウザからの取得、ということはけっこーな衝撃でした！
ありがとうございます🙇♂️
すごいです...!
地道に数ヶ月独学してずっとモヤモヤしていた部分が一瞬で理解できました。
私のような理解力の欠ける人間でもスッと頭に入るので、しまぷーさんは本物だと思います!!
これからも応援してます！youtube続けてください！
オブジェクト、プロパティ、メソッドの説明分かりやすいです！！ありがとうございます😊
説明がわかりやすすぎますね！
テキスト読んでも講師に説明聴いてもイマイチ理解出来なかったオブジェクトが簡単に理解できました。ありがとうございます。😊
データのやり取り、DOM操作、オブジェクト、プロパティ、メソット、アクセス方法（ドットでつなぐ）
言葉の意味、つながり、今まで何をしてきたのか、完全に理解しきれていなかった事が、今回理解できました。
表面だけの理解が、より深く理解できてワクワクしています。すごく嬉しいです。わかりやすい解説ありがとうございます。
ちょうどJavaScriptをやってる最中なので有難いです。自分が習った動画ではオブジェクトは「対象」。メゾットは「命令」でオブジェクト(対象)に対して何をして欲しいのかを示す。メゾットが「動作」を表しているとするとプロパティは「見た目」を表すと教わりました。
地味に永遠の20歳のギャグは面白かったですよw ちなみに自分は正真正銘の20歳ですw
そういうギャグをするところが、もう歳を取ったんだなと実感して悲しくはなりました笑
感想ありがとうございます。人によっては教え方が違いますよね。あくまで私はこう教えるのが１番分かりやすく学びなるかなーと思って講座をつくりました。自分に１番あった捉え方をするのが良いかもしれませんね😊
JavaScript勉強する前に見ています！
いつも参考にしています！
この動画が無料で見れる事に感動！😆
ありがとうございます！そう言ってくださって嬉しいです！😁
プログラミングを初めて三ヶ月のものです。分かってるつもりでしたが、最後の「アラートなどは予めjsのオブジェクトに入れられたものを呼び出している」というところで、初めてメソッドというものをしっかり理解できた気がします。
ありがとうございます！
4月からバックエンドエンジニアとして働いている20代男性です！
将来的にフロントエンドも極めていきたいと思い、独学でJavaScriptを勉強中です。
ホワイトボードの図が丁寧でわかりやすく、とても参考になっています。
引き続き動画チェックして参ります！
いつもお世話になっております。1月からHTML、CSS勉強始めてやっとJavaScriptにたどりつき
ました！
初学者なのでコードを書いてみても、何をやっているのかわからず迷子になってしまうので
こういった概念を教えていただけると大変ありがたいと思いました。
すごく助かります。
これだけわかりやすく噛み砕いて説明してもらいましたが、それでも自分には難易度が最高10としたら6くらいに感じました。
動画の最後の方のwindowの部分は省略できて alert や console を知らずのうちにブラウザでオブジェクトを使っているというところの
話がよくわかりませんでした ので この動画を再度見直して理解するように努めたいと思います。
ドットインストールでJS学習を進めていましたが、この動画を見て、より一層理解が深まりました。このような有益な情報に無料でアクセスできる今って、本当にありがたいとつくづく感じます。笑
初心者です。分かりやすい！
簡潔で嬉しいコメントいただきましたー！！ありがとうございます！
すこし理解が進みました。今までモヤモヤしていたものがスッキリした感じです。
とても勉强になりました。ありがとうございます。
参考になりました
こちらの動画をみて、「ああ、そうだったのか。。」の連続でした。みてよかったの一言です。ありがとうございました！
18:43スゲ――(ﾟ∀ﾟ)――!!ってなりましたwいやはや感動（JS歴3日）
先ほど第4回を出しましたが、そこで更に分かりやすく解説しています。
ぜひどうぞ！！😏😏
ua-cam.com/video/y5_rULRxYuY/v-deo.html
オブジェクトの説明めちゃくちゃ分かりやすい…！！
か、神だ…
ありがたすぎふ
いつもすごくためになる動画配信ありがとうございます！
現状、HTML,CSS,JavaScriptのProgate講座のみ終了している段階ですが、内容はすごく分かりやすかったです！
オブジェクト、プロパティ、メソッドの関係が理解できました！
Progateの段階ではいまいちよくわかってないままにとりあえず変数やら引数やらあって混乱してしまっていたのでwww
しまぶーさんは起業もされ忙しい合間の配信なので頻度を高めるのは困難かと思われますが、もし可能なら次回配信までに効果的な予習、今回の動画を理解できたか確認するための復習でこれおすすめですみたいなのがあったら教えてくれると理解が深まるかなとか思いました。
今後も配信よろしくお願いします！
ありがとうございます！既に見られたかもしれませんが第4回も出しました。それでオブジェクト関連はもはや完璧かと思います！
> しまぶーさんは起業もされ忙しい合間の配信なので頻度を高めるのは困難かと思われますが、もし可能なら次回配信までに効果的な予習、今回の動画を理解できたか確認するための復習でこれおすすめですみたいなのがあったら教えてくれると理解が深まるかなとか思いました。
既に出しちゃいましたが、なるほど学びになります。予習・復習というのは面白いですね。
ぶっちゃけこれがオススメみたいなのは今のところ持っていない（考えられていない）ので、パッとは出せませんが、これを学んでおいてくださいという感じで、お伝えできることはありそうですね。ちょっと考えてみます。めちゃくちゃ有益なアドバイスをありがとうございます😊🙏
ありがとうございました。
自分はJavaを少しかじっていて、JavaScriptにはintやStringなどの型宣言がないことに驚きました。
Javaにもwindowと似た機能があるのですが、解説わかりやすくて「なるほど！」ってなりました。
40過ぎてプログラミングをゼロから学び始めました。スクールに行ったりしていますが、概念のところの説明がほとんどなく、よーいどんでコーディングしていく感じで、混乱していました。しまぶーさんの解説はめちゃくちゃ分かりやすいです！！
ありがとうございます、とても参考になりました。
自分が「UA-camrの例」を作るなら、親Classを作り、親Classを継承して必要なプロパティとメソッドを追加した子Classをインスタンスし
そのオブジェクトをリストへ追加していく作り方にするかな
慣れの違いですけどね
便利な時代になりましたね！youtubeで有料級の授業を受けれるのはでかい
あぁ！そうだったのか！やっと理解できました。しまぶーさんは沖縄の方？
でーじ分かりやすいです。ありがとうございます。
何度かJavaScriptを独学で勉強しようと試みましたが、これって実際にはどんなところでどんな風に使うの？とわからず、おもしろさが感じられずに別のラクな方に逃げて期間が開いて勉強をやめる。。の繰り返しでした。
#1でおっしゃっていた「木を見て、森を見ず」状態だったからなのだと思います。
疑問だった所が回を追うごとに霧が晴れるようにスッキリしてきています。
私が知りたかったのは、概念だったんだと思いました。
しまぶーさんの動画を見て、やる気が沸いてきました！！
今日からまた勉強再開します！
こんな有意義な動画をアップしてくださり、ありがとうございます！！
これからも応援してます！
オブジェクトの本質を良く理解することができました。
テーマの捉え方に対して共感致します。
これからも よろしくお願い致します。
マジで感動
奇遇ですね！僕も永遠の二十歳です😊
今回も分かりやすい説明ありがとうございます
jsはプロゲートの講座見ただけの初学者ですが、言ってることは理解できました。
次回の動画も楽しみにしています😉✨
あと滑舌が良いので2倍速でも聞き取れて時短で学べます🤤
永遠の20歳は2人もいらない、排除する🧟♀️🧟♂️
まだまだJavaScript講座は序の序です！
これから難しくなりますが、ついてきてください！！🤝
@@shimabu_it 排除だと？無駄無駄無駄ァｯ！😤
ついて行きます！しまぶー先生！
とてもわかりやすかったです。ありがとうございます。特にWindows.の概念、本当に助かりました！おっしゃる通り、この部分が省略されていたとは知りませんでした。
引き続きJavaScriptの解説ありがとうございます！内容自体はとても分かりやすかったのですが、ホワイトボードが暗くて見づらいので、そこを改善していただくとありがたいです☺️
ぐわーーーそうですよね、ちょっと見づらいですよね。照明を使っているのですが、これ以上がどうやっても改善できず😭😭😭
もうちょい角度を練れば、もしかしたらいけるかもしれないので再チャレンジしてみます・・・！
有益なアドバイスをありがとうございます！！
撮り直しされた理由が
分かった気がしました😅
どこの解説を省くか、省いたところを
スルーして理解してもらうためには
どういう流れで説明するか。
この解説動画の構成を見ても
しまぶーさんの凄さが分かります！
次の動画も楽しみにしてます！
一旦jQueryを勉強して、またJSに
戻ってきます！！
うおー高い評価をいただけて嬉しいです🤣
分かりやすくするために、どの順番で講座を作るかをめちゃくちゃ意識しているので本当に嬉しいです！！今後も学びになる動画をつくっていくので、見にきてくださいね😆
日本の物流の仕組みに似ているような…難易度的には国語の現代文といったところでしょうか、DOMの役割が保存と削除等々、コード実習の前に聞けて良かったです。
早速明日プロゲートでJavaScript始めようっと。プログラミング楽しいです。
いつ角カッコ使って、セミコロン使って、カンマ使うとか頭が爆発しそう💥
分かりやすい動画ありがとうございます。『〜なんですけれどもっ⤴︎』というワードを動画中に何回使っているのかプログラミングでカウントするのは可能でしょうか。
なるほど、windowは省略できるのですね！
省略可能ですよー！✨
アラートとかで省略されてたのか！なるほどっておもえないほどの初心者で、途中（たくさん英語がでてきたあたり)で頭から煙が出始めましたw window省略してたら…おおーってなるのですか？？windowはどこから生まれたの…ブラウザの話してたからブラウザのなにかなのかしら
オブジェクト指向をここまでわかりやすく説明するのはすごい。
自分は工場（オブジェクト）と量産型ロボット（インスタンス）のイメージで覚えました。
色んな覚え方があるんですね！🤣笑
こういう学習系の動画にしては再生数が並外れてるので、どんな動画かと思ったら。
なるほど、分かりやすい。
ここまで噛み砕いて分かりやすく話せるってホントに頭の良い人なんだろうな。
フォローしましたm(__)m
プログラミングの講座でも「とにかくハンズオン！」というものもありますが、自分的には概念は大事です。次もよろしく。
分かりやすく丁寧な解説ありがとうございます！
これからも参考にさせていただきます＾＾
とても分かりやすかったです。
jsってjavaのオブジェクトとは記法がかなり違ってくるのでしょうか、、、
同じようにもかけるのでしょうか、、
ありがとうございます！
Javaとはまったく記法が違います！！
なのでこの動画で学んだことはJavaには活かせません😥
少し分かっているので、なんとかついていけましたが、初めて聞く人には分かりにくそうな感じがしました。
フィードバックありがとうございます🙏
なかなか伝えるのが難しく私も常に模索中です...。改善し続けてみんなが理解しやすい講座を制作できるよう頑張ります😂
"プロパティやメソッドにアクセスする方法"ここの青文字は別の言語のコードに書いて、javascriptからデータを持ってきたりできるということですか？
引き出しの中の引き出しをどんどん開けていく感じですか？
引き出しの名前がプロパティで、中の説明がメソット
分かりやすすぎるewwwwwww
永遠の20歳！！
プログラマーです。教える順序が素晴らしいですね…自分も教育担当ですが、小手先の内容よりおっきい概念や実際のTwitterの機能などから説明するようにしてます！
一つご教授をお願いします。オブジェクト＝プロパティ＋メソッドとした捉えたのですが、例えば
”オブジェクト＝複数のプロパティ”または、
”オブジェクト＝複数のメソッド”
というだけでオブジェクトと称することはあるのでしょうか？
しまぶーさん、はじめまして。いつも動画で勉強させてもらってます。
オブジェクトはプロパティとメソッドからなる。ということは理解できたのですが、
プロパティというオブジェクトの中にプロパティとメソッドが設定できる理由は何でしょうか？
今回の動画でいうと、listプロパティというオブジェクトの中にbussinessプロパティとteach: funcion()メソッドが設定されています。9:21
頭がこんがらがります。
特に深い理由はなくそういう設定ができるものと覚えるほかないのでしょうか？
ご教授よろしくお願い致します。
メソッドとプロパティの違いがイマイチわかりづらいのでもう少しわかりやすく解説して欲しかったです。
解説動画を見ていてわからないことが２つあったのでこの場を借りて質問します。
1. プロパティの中に関数を定義したらメソッド扱いになるという認識で合ってますか？
2. この動画内で紹介されているメソッドとindexOfやslice等で扱われているメソッドの違いをご教示いただけないでしょうか？
「データの取得」って、JavaScriptが取得してJavaScriptが自分で保持している状態と理解して良いですか？
仮に、取得したデータをどうするかの動作処理が無かった場合、取得したデータは、どこかに保存されているのですか？
本当の初心者の人は「alert」や「console」の存在すら知らないのでは？😯
自宅待機の方に向けて無料開放されているN予備校でJavaScriptを学び始めたのですが、varやfor、ifなどを使わない作り方もあるということでしょうか？
N予備校を使っていないのでまったく分かっていませんが、varはもう使う機会はほとんど無いですね。for, ifはもちろん使いますよ。今回の動画はオブジェクトに関すること、ということですね。
私の今後の動画でも使っていきますし、おそらくN予備校でも使われるかと思いますので、もう少し進めていただけると出てくるかと思います😆👍
クラスの中にもメソッドやプロパティが記述できると思うのですが、オブジェクトの違いは何なのでしょうか？インスタンスがオブジェクトなのでしょうか？？基本的なとこですいません。。
無料で視聴できるのすごい