【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
Vložit
- čas přidán 30. 06. 2024
- 文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
📙 もくじ
0:00 JavaScriptのオススメの学び方について
1:41 クライアントサイド, サーバーサイドについて解説
2:59 JavaScript未使用時のWebサイト閲覧の仕組み
7:27 ToDoリストを例に AJAX について紹介
10:10 AJAXの最たる例である Google Maps を紹介
12:29 JavaScriptを使った場合のWebサイト閲覧の仕組み
14:56 AJAXを用いた場合のWebサイトの遷移について
16:16 まとめ
🚀 今日のひとこと
JavaScript講座の第1回目になります。
Webフロントエンドエンジニアにおいては
JavaScriptは必須のプログラミング言語ですが、
「なぜアプリ開発において必要とされるのか」を解説。
Webの仕組み・AJAX（非同期通信）についても説明しています。
この講座は基礎的な内容で入門・初心者・駆け出しエンジニア向きです。
将来的には React, Vue, TypeScript などの応用・実践まで取り扱います。
Webエンジニアを目指している方はチャンネル登録をお願いします。
🔥 基礎から学ぶ 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講座 - Jak na to + styl
JavaScript講座の第1回目です。
コメントもお待ちしています😊
疑問や質問もお答えします！
JavaScriptだけでなくjQueryも学ぶべきですか?
I’m here for JavaScript 👍
3年前の動画ですが今視聴しても問題ないでしょうか？数年前に研修でちょっとだけjs触った程度なんですが復習の教材として視聴させていただこうと思っています
分かりやすいです！初心者でIT企業に就職して苦労していましたが、この動画見たら全体図が見えて今から頑張れると思いました！！ありがとうございます！
大変分かりやすい解説をいただきありがとうございます。
「概念から入る」考え方に大変共感致しました。
文系出身の方だからこそかもですが、ストーリー仕立てで、何も引っかかりがなく他の方より遥かに分かりやすいかったです！ふわふわとした概念で進んでいきそうでした！これを見て本当に良かったです！動画作成してくださり感謝です。😢🙇♂️✨✨
木を見て森を見ずとしまぶーさんがおっしゃっていたように、まず全体像から話していただけると、いきなり構文から学ぶより大枠を知れるのでこの後の吸収率が変わるとも思います。
とても分かりやすかったです。
それにしても絵も板書もとてもまとまっていって字も上手くて最高です！！！
内容がわかりやすい、説明が聞きやすい、字も絵も綺麗でわかりやすい。無料だなんて本当にありがとうございます。継続して拝見しますので、ぜひこれからもよろしくお願いします。
めちゃくちゃワクワクしました。次回も楽しみです
話し方もイラストもわかりやすいです。これからも視聴していきます！
とても分かりやすかったです。
今後を期待してます。
JavaScriptはWebサイトを作る上で基盤となる言語なので、重要性が高いですね。いつも有難うございます。
すごくわかりやすかったです！
字も綺麗で見やすい
今JavaScriptを学習なのですがすごく仕組みが分かりやすいです...!!
これから続けて見させてもらいます!!
今独学で学んでいますが、最初にこの動画を見ればよかったと後悔しています😂
本当に”木を見て森を見ず”の状態で挫折しかけていました。
ありがとうございます！
丁寧で癒やしボイス。
JavaScriptの勉強を
"結局何に使うんだ？"
とモヤモヤしながら行っていたので、とても参考になりました！
フロントエンド勉強しようと思ってたのでちゃんと仕組みから理解できてよかったです！JSやってみます！
とてもわかりやすいです。
自分自身、webの仕組みについてはまだまだ理解できていない点が多いので助かります。
これからも、動画楽しみにしています。
マクロな部分、とてもわかりやすかったです！
次の動画も楽しみにしています！！
はい、もう少しマクロな部分を解説して、その後ミクロな部分に入っていきます。全体像を理解していきましょう！😌👍
JavaScriptを勉強中ですが、何のためになぜ必要なのか曖昧なままだったので今回の動画で理解する事ができました！
これを知った上で勉強した方が理解度が増す気がします👍
仕事でJavascriptを使い始めたので、こういう動画はかなりありがたいです！
絵がうますぎてめちゃくちゃわかりやすい
まじでありがとうございます！
ちょうど勉強していたので復習になるし、まじで分かりやすい！
良かったです！これからも大事な概念や内容が出てくるので、そちらも一緒に学習していきましょう！！✍️
未経験からフロントエンドエンジニア目指して学習を始めました。
未経験でも分かりやすい説明で助かります、ありがとうございます！
分かりやすかったワン！
今まで見た動画の中で説明が分かりやすいと思いました！
ちょうどJSを勉強し始めたところなので動画楽しみにしてます！
良かったです。昨日から第3回の動画を撮影していますが、伝えるのが難しすぎて四苦八苦しています（笑）今後も分かりやすい説明を心がけます💪
木を見て森を見ずってまさにそうで、自分もドットインストールでjsの基礎していましたがいつ使うのかが分からずのままでした。この動画でものすごく理解できました。有料級の動画をいつもありがとうございます！
これからも参考にさせて頂きます。
Javascript勉強中でめっちゃわかりやすいです！！
ドンドン学びを深めて、JavaScriptを極めていきましょう！
私も講座をドンドン出していきます！！
勉強になるし楽しい動画です！！
javascriptを使用することで、ユーザー側に快適なwebを提供できることが分かった。この動画を繰り返し見て仕組みや流れを覚えると理解度が増して次に活きると思う。
とてもわかりやすかったです！
動画配信ありがとうございます！！
とても分かりやすい動画でした。ありがとうございました。今後のモチが上がりました。
オープニングが始まるだけでワクワクします！！
動画での説明本当にわかりやすいです！！
ありがとうございます！！
めっちゃわかりやすいです😭😭
ありがとうございます！！
毎回わかりやすい解説で、とても参考にさせていただいております。
今後も素晴らしい内容を楽しみにしております☺️
ありがとうございますー！
JavaScriptだんだん難しくなっていきますが、ぜひついてきてくださいね！✌
googleマップの話が面白かったです。
そういった話があると印象に残りやすく、学習の糧になりました。
おおー良かったです！
例えってめちゃくちゃ大事ですよね、例え力をもっと鍛えたい！笑
なんとなくで勉強していたjsをここまでわかりやすく教えてくれるとホントに助かります！
チャンネル登録、いいねさていただきました。
これからも有意義な発信、よろしくお願いします🤲
仕事でJavaScriptの必要性を感じています。
初回視聴しましたが、とっても分かりやすかったです。😊
とてもイメージしやすい解説でした！
JavaScriptに興味があるので今後も勉強させていただきます😄
JavaScriptは将来性無限大ですよー！！
私は１番オススメしています😊
今後、色んな使い方を紹介していきますね🔥
初見でjs初心者の者です！
こうやってプログラムを技術だけ教えてくれるチャンネルなかなか無いので助かります。
ajaxの意味も分かるようになった気がする(小並感)
とても分かりやすかったです。
ありがとうございました！🙏🏻
ホワイトボードでの説明が非常に判り易く、絵も上手でした😊
イラストが頭の中に残って理解し易かったです！
いつも本当、勉強になります！！！！
独学していて、モチベーション維持が難しいのでしまぶーさんの動画見て頑張ります！！！
次に出す動画はモチベーションに関する動画です！
プログラミング学習にはマインドも大事なので、きっと役に立つはずです。
明日か明後日、楽しみにしていてくださいね☺️
フリーランスのフロントエンジニアですが、復習という意味も込めてすごく勉強になりました。
いつも分かりやすい説明ありがとうございます😊✨参考になります‼️
こちらこそありがとうございます！
もっと分かりやすく説明できるよう私もレベルアップします👆👆👆
とてもわかりやすくて、良い勉強になりました。今後もこちらのchで学習していきたいです！
やっとjava scriptの意味がわかりました。またしまぶーさんの動画見て勉強再開したいと思います！
分かりやすくて嬉しいです😊
良かったーーー
ちょっと概念的なところが中心だったので不安でした。
伝わったようで本当にホッとします
😌
分かりやすいし、面白いです！
フロントエンジニア目指してます！
JavaScript概論ですね！
Progateで木を先に勉強していたのですが、この動画で森を眺めることができて良かったです。
ホワイトボードの説明もキレイでした……！
再生リストでこのあとの動画も勉強させて頂きます！
白板を使われて、すごくわかりやすい説明ありがとうございます！
私、韓国人です！
韓国のJS動画は実習する動画しかないから正確的にJSが何だかは分かんなかったんですけどありがとうございます！
外国人の立場から見るとめっちゃ早口ですけどゆっくり見ながら勉強します！字幕助かる！
Javascriptの基礎を学んでおり、勉強方法に詰まっていました。
木を見て森を見ず、という言葉がしっくりくる動画で、興味深かったです！
また、しまぶーさんのイラストで、グーのこぶし具合まで細かく描かれてあるあたりが丁寧さを表していてツボでした！！
わかりやすかったです。これからJavaScriptの勉強を頑張ります。
マジで最高です
ありがとうございます
しまぶーさんイケメンなので勉強の気分がのらなくても見に来たくなってしまいます！！！✨
いつも有難うございます！
HTML/CSS、jQueryを使用してWebサイトを作成していました。そこで満足していたのですが、JavaScriptを学ぶ重要性がとても分かりやすく理解できました。ありがとうございます！！モダンJavaScriptも歴史から入ることで理解が深まって、納得でき、学ぶことにワクワクできました。ありがとうございます！！
再度復習しに来ました。しまぶーさんの動画は「なぜ？」がわかるので大変助かっています。
書籍で説明がなく「？？」と疑問に思う点を解説いただいているようで理解が深まります。
初めて観たけど解りやすくてかなり良かったです。
ありがとうございました✨
そう言っていただけて嬉しいです。これからドンドン難しくなるんですが、分かりやすく丁寧な解説を心がけます。分からないところが出てきたら質問してくださいね😊
初心者向けで分かりやすいね！
めっちゃ分かりやすいです。ありがとうございます。
動きが画面に出てきてすごいですよね
今日からJavascriptやってみます！
JavaScript 1日目いいですねー！
バンバン学んでいきましょう！😎✨
わかりやすいい！！！ ありがとう
分かりやすい説明有難うございます！
これからも丁寧な説明を心がけます😉
わかりやすいです。丁寧。絵が上手。
分かりやすい説明ありがとうございます！
嬉しいコメントありがとうございます！
もし難しいところとかあれば、遠慮なく質問してくださいね😊
わかりやすかったです！
分かりやすいです。
新卒でJavaScript使うことになったので有難いです！
わかりやすくてよかった
用語やイメージの丁寧な説明で概念を掴みやすかったです！！
ありがとうございました！
今後について以下についてもご説明動画あれば嬉しいです！
・eslint
・webpack/babel
・react
期待してます！
コメントありがとうございます！そう言っていただけて嬉しいです！
それらも全部解説していく予定です。特にWebpack, Babel周りは概念理解が難しいので、より丁寧で分かりやすい説明を心がけます！😊
わかりやすく仕組みを教えていただきました。これから、頑張ります。Googleスプレッドシートでつくった業務システムを、メンテナンスや継承を考えて、Webアプリに仕立てていきたいです。
分かりやすいです♪
とてつもなくわかりやすい！
分かりやすかったです！
すごい！痒いところに手が届きすぎてる！！
progateで文法やクラス、メソッドを学んだだけの自分にはとてもためになりました！
プログラミングの講座ではさらっとしか触れないそもそもの基礎部分を詳しく解説していただけるので、初学者の僕からしたらとても助かります🙇♂️
JSONに関する認識が曖昧だったので、非常に勉強になりました！
わかりやすくて絵がカワイイです。
本を買って勉強していますが、JSがどんどん進化していて自分がコーダーをしていた頃より
ハードルが上がっています。とても頭に入りやすいのでありがたいです。
嬉しいですー！想像以上に絵を褒められて照れます😄
JavaScriptは常に進化が早いですね・・・追うのが大変ですがなるべく最新の情報も動画で伝えていければと思っています！
動画ありがとうございます！
ブラジルでIT関連のお仕事をしています！
結構前からjavascript等いろいろと見てきましたがなかなか全体的な理解と繋がりが出来ていない状態でした。
でも動画をみてすごい分かりやすく、やっと見てきたものが理解出来ました。
これからも見ます☺️
ありがとうございました😊
海外から見てます報告は今まで何度かありましたがブラジルが１番遠いです！(^O^)笑
JavaScriptはただアニメーションをつけるのに使う、みたいな説明もたくさんありますが、実はそっちの方が用途としては少ないんですよね。動画の意図していた学びが伝わったようで私も嬉しいです😊
現在JavaScriptを勉強しているのにもかかわらず、Webサイトの内側ではどういった動きをしているのかがわからなかったので、この動画を見つけてよかったです。
元パッケージ開発者です。木から入らずに森から入るという姿勢、いいですね。私も過去の体験から「なぜそれが必要なのか？」ということを最初にしっかり腹落ちさせることが何よりも重要と思っており、すごく共感してしまいました。
わかりやすくて好き。
木を見て森を見ずな勉強をしていたので『なぜ勉強するのか』が理解できたのでモチベ爆上がりしました！
初めまして。
今月から勉強させてもらっています！
いつも丁寧で分かりやすく、観る側への寄り添い方に感激しています。
普段から「なぜそうするのか」がはっきりしないとなかなか前に進めないので、根本的なところを知ることができ、再度エンジンかけられました。
ありがとうございました😊
むちゃくちゃわかりやすい…
チャンネル登録しました！
単純にCSSよりも高度なUIができるものだと勘違いしていました。わかりやすかったです。
結構わかりやすいです！
「結構」から「めっちゃ」に変わるように頑張ります！！🤣笑
絵で解説分かりやすいっす！！！
とても分かりやすいですし、絵が可愛らしい
ありがとうございます！
かわいい絵を書いて少しでもとっつきやすくなればいいなーと思っていましたが、思った以上に絵を褒められるので嬉しいです😙
ほ
@@shimabu_it op
プログラミング勉強始めたばかりのものです。有益すぎる！俯瞰した知識があるとコード記述の飲み込みスピードが格段に上がるので助かります！頑張るぞー！
今日初めて拝見いたしました！
SEなのですが、今月から業務でJavaScriptが必要になるため、ご縁あり辿り着きました。
JavaScriptを何のために使うのか、森の部分から学べたところがすごくよかったです。
ただ、レンダリングがどういう意味か分からなかったので、その場でざっくり説明していただけると助かると思いました。
私の知識不足ではある面もあると思いますが、コメントさせていただきました。
2回目以降も拝見いたします。今後も楽しみにしています！
とても丁寧な動画ありがとうございます！
Progateで勉強しているぐらいですが、専門用語が難しいですね😅
一度じゃ理解できなかったので、何度も見て理解を深めていきます！
ありがとうございます！
専門用語は最初はとっつきにくいですよね。私もなるべく解説していきたいですが、ポロッと知ってる前提で使っちゃうことがあるので気をつけます😓笑
社会人1年目でWeb系が何もわからない状態でいきなりnode.js,vue.jsを勉強しながら仕事してるので分かりやすくて助かっています。
いきなりnode.jsとvue.jsは難しいですよね・・・😅
少しでも助けになれるように今後も講座をドンドン出していきます！！
日本のIT業界に就職するために見てます！優しい講座ありがとうございます。
わかりやすすぎる
凄い！初学者にとっては、とても分かりやすい！ありがとう！
いつも素敵な配信を有難う御座います。コメントにもありますがgoogle mapの話など身近で技術がどのように生きているかが伝わるとイメージが湧きやすくて良いですね！！