【JavaScript超入門】クラスとインスタンスを世界一わかりやすく解説！
Вставка
- Опубліковано 4 лип 2024
- ↓こちらもよければチェックしてみてください〜
👩💻ゼミ形式で学ぶプログラミング研修「SiiD」
• 【ご報告】プログラミングスクール的な事業を始めます
👨💻エンジニアによるキャリア相談「EEE転職」
• 若手エンジニア皆さんの転職やキャリア相談にのります
------------------------------------------------------------------
【無料メルマガ】より深い情報発信をしてます！
my131p.com/p/r/Ym43EzoZ
【LINE】メール見るのだるい人向け、簡易版の発信
lin.ee/eR6BXOD
【お問い合わせ】お仕事のご依頼先
seito@bug-fix.org
【目次】
00:00 はじめに
02:28 クラスとインスタンスの概要
05:05 実際にコードを書いてみよう(HTML,CSS,JS)
05:08 まずはクラスを使わずに実装
25:32 クラスとインスタンスを用いて実装
39:10 さいごに
【動画内のサンプルコード】
github.com/seito-developer/js...
🔽セイトのプロフィール
今はLIG Philippines Inc.て会社でVPoEしてます。
親会社のLIG Inc.含め、エンジニア中心としたクリエイティブ職採用では採用戦略〜最終面接を実施してます。
【Twitter】プログラミング／ライフハック系の話を発信してます！
/ seito_horiguchi
【TikTok】ショート役立つ話／あるある話
/ seito2020
🔽セイトのJavaScript動画
#1『【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター！』
• 【JavaScript超入門講座】わずか50...
#2『【JavaScript超入門講座】基礎文法だけでクイズゲームのアプリを開発！』
• 【JavaScript超入門講座】基礎文法だ...
#3『【JavaScript超入門講座】定番UIの”タブ”をカンタンに実装しよう！』
• 【JavaScript超入門講座】定番UIの...
🔽オススメの関連動画
プログラミング学習前の準備やら全体像やら把握されたい人はコチラがオススメ！
『【初心者向け】プログラミング学習の始め方【３ヶ月で達成できる】｜マナブ』
• 【初心者向け】プログラミング学習の始め方【３...
『プログラミングにはやってはいけない勉強法がある！？爆速で成長する王道のプログラミング学習法を紹介！｜東京フリーランス』
• プログラミングにはやってはいけない勉強法があ...
🔽Special Thanks
動画編集：@poppy0p0 さん
画像素材：いらすとや さん（www.irasutoya.com/）
#無料メルマガとLINE始めました - Наука та технологія
↓こちらもよければチェックしてみてください〜
👩💻ゼミ形式で学ぶプログラミング研修「SiiD」
ua-cam.com/video/WYU2Git8dRg/v-deo.html
👨💻エンジニアによるキャリア相談「EEE転職」
ua-cam.com/video/MNTzNFGgmYI/v-deo.html
動画は短いのに普通の作例とクラスを利用した作例までが具体的かつ楽しく理解できるようになっていて感動しました！大変でしょうが今後もがんばってください！
おお、よかったです！！
定期的にこの動画観に来ています！
勉強するにつれて、スムーズにこの動画の意味が理解できるようになり、とても楽しめています！
こういう実践的な解説動画をたくさん撮っていただけるととっってもうれしいです😂
あざます！
大変勉強になりました。これまでのJavaScript講座何回も受講してきて、今回は頭に入りやすかったです。いつか何か役に立てるモノを作れるようになりたいです。これからも楽しみにしております！
良かったです！また次回ぜひ！
この例えは天才すぎるわかりやすい
ちょうどインスタンスがよく分からなくて、今日ググってたところです！！！
セイトさんのチャンネルは前から登録していて、ちょっと見てみたらさっきアップされてたみたいで驚きました！
セイトさんのおかげで理解できました。
ありがとうございます！！！
なんとタイムリーなw
よかったです！
せっちゃんカッコいい〜✨
いつも楽しみながら勉強させて頂いております！
カッキーン！
あざますww
丁度クラスとインスタンスについて勉強していたので助かりました！今後も勉強させて頂きます。
いいタイミングでしたねw
よかったです！
わかりやすいです！ありがとうございます。
えぐいぐらいわかりやすかったです。
ありがとうございます！！
感謝！
もともと知見はあったのですが、オブジェクトとインスタンスの概念説明とても分かりやすかったです。
特にITネイティブ世代に対しては、車や人に例えられるよりも身近なサービスに例えられるほうがわかりやすいと思うのでとても良いと思いました。
動画ありがとうございます。
なんとか追いつけました〜〜
あざます！今後もシリーズ出していきます！
面白いし分かりやすくて最高です！！
勉強に使います！
あざす！
JavaScriptのクラスとかインスタンスがようやく分かった気がします。
ありがとうございました。
あざます！
一番最初のところ、オレがいつも見てるまかないチャンネルのような雰囲気がとても好きです
あざます！ゆるい雰囲気でご提供しています😃
ちょうどHello unkoしてたところでした！
助かります！🙇♂️
Hello unko!
今まで見たどんな動画よりもわかりやすい！
お下品な所もありますが大変参考になりました。🤯
学習で躓いたら他動画も拝見させていただきます。
あざます！下品路線でがんばります
🇯🇵🇯🇵🇯🇵丁寧な講義ありがとうございます
人生に疲れていた者です。
回答と素晴らしい動画ありがとうございました。
あざます！人生に癒しを！
お忙しい中、つかぬ事をお伺い致します。
初心者です。
凄くわかりやすく、参考になります。
〈br〉〈br〉〈br〉
で改行して真似しないようにとありましたが、
どういった形の改行がベストなのでしょうか？
whileで++抜けてたらフリーズするの聞いたことあったんですけど怖くてできなかったので、実際に見れてよかったです（笑）
これです！w
初心者です。あの、dummyAccordionということで追加したやつの Q1. Q2. Q3. の出力結果に下線が入るのはなぜでしょうか？ 動画内でも下線が入っているようです。
大変分かりやすいです。たくさんの方の動画を拝見しましたが、セイトさんの動画の分かりやすさは頭一つ抜きん出ていていると思っています。もし宜しければ、入門ではなく入門から中級者に向けての動画を今後作成して頂けると嬉しいです。次の動画も楽しみにしています。
あざます！今後もうpしていきますゆえ！
25分あたりの内容で、変数$targetに入れているのが、e.currentTargatになっているのですが、なぜe.targetではないのでしょうか？
また、e.currentTargetとe.targetの違いについて教えてもらえると助かります
わかりやすい動画をありがとうございます！19分05秒のconsoleを見たときにgetElementsByTagName("a")がエラーで取得できないのですが自分だけでしょうか…
ども！
詰まったら僕のGitHubのコードコピペしたり比較したりしてみてください！
Q&Aの内容と、HELLO！UNKOで頭がいっぱいで、その後の口座が頭に入ってきませんでしたｗｗｗｗｗ
web系企業の大学生向けのインターンに行く上で勉強すべき事、知っておくべき事などがあれば教えていただきたいです！
とりあえずコード書こう！なんか作ろう！
オープニングwww
パソコンにぶつかってるとこ最高
クイズゲームの動画2万回ぐらい見て、やっとwhile文とか使えるようになりました。
この動画で作業している内容は理解できましたが、クラスのメリットがいまいち理解できませんでした。
コード書きながら繰り返し見てみます。
てことはあの動画再生してくれたのほぼIs meさんてことになっちゃうww
これで３本連続課題達成です。
クラスとインスタンスをこれでマスター！とまではいきませんが、ここまでできたのは、生まれて初めてです。
次が待ち遠しいです。
おお、すばらしいですね！！
そんなにやってくれる人がいるの嬉しです😇
次回もお待ちください！
16:00
ここから大事。
質問です。
例えばサイトで算数の問題集を作り計算をプログラムする場合などはJavaScriptを使うべきでしょうか、それともJavaなどのバックエンドを使うべきなのかイマイチ分かりません。というかJavaの勉強をしておりますがどこでこの言語を使っているのか、具体的な実装例が調べてもよく分かりません。
1億回この動画見ますんで教えてください汗
一億回ww
バックエンド系の言語な気がしまする！
セイト先生の動画とてもわかりやすくて、いつも見ています！
私がプログラミング学習で参考にしているものをネットに公開する記事で書きたいのですが、おすすめとして動画を紹介させてもらうことは可能ですか？その場合はリンクを貼らせてもらうことは可能ですか？無理は言いません！笑
独学なので、ネットの情報やら動画やらいろんな方ものを見漁っていますが、一番わかりやすいので何度もここに戻ってきては再生して勉強しています。私と同じような境遇の方に向けた記事なので、おすすめしたいと思いました！
なんと！ぜひぜひ、遠慮なく勝手にやっちゃってくださいw
ありがとうございます！
間違ってたらすいませんが、これってクラス化しなくても、クラス化した部分を関数化して、関数を利用すれば事足りるかな、と思ったのですが間違っていますか？
いいと思いますよ！
ただこれはクラスとインスタンスを勉強する趣旨の動画なので、登場させないと本末転倒に😅
@@webit7652 ありがとうございます！
認識間違ってないことがわかったので良かったです！！
中学生です、小学生の頃からプログラムに興味を持ってて今年からJavaScriptから始めたんですがもう少しで高校受験があります。学歴優先した方がいいですか？
受験は今しかない！勉強しましょう！
高校受かったらいくらでもコード書ける！w
Pythonのディープラーニング待ってます！
今週から編集始めました！もうちょいです！！
まじか、pythonやるならチャンネル登録するわ。したわ。
すげー
ご教示ありがとうございました。
クラス化までのソースの状態で実行すると２つ目のアコーディオンは開けませんでした。原因が分からずに進めたら途中でやはり１行削除されていた行が判明したのでもし同様の方がいらっしゃればクラス化を進めるとわかると思います。
動画は25:40付近がクラス化する前のロジックです。
※セイトさんの動画は若干unkoとくそして寝ろとかの件が無ければ女性の視聴者が増える気がする。（お節介ですみません）
> ※セイトさんの動画は若干unkoとくそして寝ろとかの件が無ければ女性の視聴者が増える気がする。（お節介ですみません）
いやまじで...反省してます（´・ω・｀）ｗ
プログラム未経験の女で全く畑違いの仕事から
制作会社入りjs勉強してたけどその時はわけわからなかった笑
この動画は分かりやすいし
この人みたいに面白いエンジニアもいるんだなって(良い意味で)
あざます！僕みたいな奴もいます！w
僕もwhileはインクリメント書き忘れるんでなるべくfor使うようにしてますｗ
確かにその方がいいかもです😂
これって処理全体を関数にするのと何が違うんですか?
関数よりも拡張性が高い、って感じでしょうか☺️
小さいプログラムなら関数、それなり以上の機能ならクラスにした方が◎
すいません、分からないことがあります。
タブの初期表示にあるような
init( ){
$image[0].style.display = 'block'; }
みたいな関数は、クラスで定義する場合はどのように配置すればいいのでしょうか？
インスタンスのオブジェクトで定義して、それをコンストラクタに表示させる？ とかですか。
ほぼそのまんまコンストラクタに入れて良いような気がしますね〜
こうかなたぶんきっと
class Foo {
constructor() {
this.getElementsByTagName('img')[0].style.display = 'block';
}
...
}
@@webit7652
ご返答ありがとうございますm(__)m
別の動画でアップされていたタブUIを、クラスに置き換えてみようと試しておりました。
まだ旨くいっていないんですが、周辺の知見を深めつつ、今回のクラスをいずれ実装できるように頑張ります！
俺まじめか……😓
13：33
27:44
今回の動画も大変参考になりました。
クソして寝ます。
おやすみなさい！w
フリーズする前に教えて欲しかった...動画的には面白いかもしれないけど、VSCのGo Liveでやってたのでパソコンのファンがシューシュー...😇
も、申し訳ないっす…！😭
もうなんのこっちゃわからんかった
ちょっとまかないチャレンジさんみたい（笑）
中田さんの物真似おもろい。
あざます！😂
うんこ好きだなw
不覚にもうんこ好きなやつになってしまいました…
unko好きですよね？
嫌いじゃないです😇
cssでよくね？
before
afterでええやん…
よかった~~~(￣▽￣;)
このままだと
変数「セイト先生」に
う〇〇が代入されてしまうとこでした（笑）
分かりやすく書くと
セイト先生＝う〇〇
ってイメージが(笑)
Hello unko!
基礎ができてないのかな
途中から全然わからん
愛してるぜ！
ワイも！
Q1 A1の意味がわからない
分かりやすくていいのですが、不適切な発言を入れるのはやめたほうがいいと思います。
人によって不愉快になるかと。
中田さんの奴ですよね笑笑
インスパイアされましたw
Q1.人生に疲れたんですが、どうしたらいいですか？
.
.
.
.
.
.
.
.
A1.クソして寝ろ
こういうの好きです😂
漢気な回答😇
うんこ、愛してます。
しかし、要所要所で全体のコードを見せてもらうともっと良いと思いました。
私はそれを求めています。
あざます！
たしかに！次回取り入れてみます＞＜
しょっぱなどこぞの大学の真似してんなｗｗ
27:45
35:45