JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】
Вставка
- Опубліковано 2 лип 2024
- JavaScriptの「超」入門講座です。
作りながら基礎を学ぶことで、「どんな時にプログラミングの文法を使うか」が分かる講座になっています。
プログラミング初心者の方、JavaScriptをやったことない方にオススメです。
山浦清透のプログラミング講座・エンジニアキャリア情報のUA-camチャンネルです。
よろしくお願いします^ ^
---------------------------------------
00:00:00 intro
00:02:33 JavaScriptとはどういうもの？
00:06:55 開発環境を整えよう
00:09:43 JavaScriptのコードを書こう
00:13:26 TODOアプリを作ろう（作る順番、コツ、タスクばらし）
00:15:39 入力フォームを作成しよう
00:16:40 Bootstrapで見た目を整えよう
00:19:35 documetを学ぼう
00:23:11 変数を学ぼう（let, const, var）
00:26:43 関数を学ぼう（function）
00:28:34 addEventListenerを学ぼう
00:30:34 フォームの入力値をファイルから取得しよう
00:34:27 取得した値をHTML上に表示しよう
00:39:07 条件分岐を学ぼう（if文）
00:40:09 データ型を学ぼう
00:44:37 型変換を学ぼう
00:48:55 配列を学ぼう（array）
00:52:01 ループを学ぼう（forEach）
00:55:23 ローカルストレージを使おう
01:01:17 TODOアプリの削除機能を付けよう
01:06:45 オブジェクトを学ぼう（object）
01:10:01 TODOアプリの完了機能を完成させよう
01:15:10 エピローグ
について解説します。
今回使用したコードは下記にアップしております。
github.com/kiyodori/todo
---------------------------------------
■独学で自走できるエンジニアになるためのプログラミング学習サービス
dokugaku-engineer.com/
■UdemyでAWSやGitの入門講座を販売中
linktr.ee/yamaura
■プロフィール
山浦 清透（やまうらきよと）
Web系エンジニア
1987年生まれ、福岡県出身。京都大学大学院卒。
2014年に未経験からエンジニアに転向し、既存サービスの運営、新規事業の立ち上げ等を経験。プログラミングの修得に四苦八苦してきた経験から、開発現場で使えるエンジニアリング知識を発信。Udemy受講者数6万人。
周りにプログラミングを教わる人が居ないので助かってます。本当に分かりやすいです。ありがとうございます！！
非常にわかりやすく、楽しく学べ、個人的には有料コンテンツでも納得の内容でした。
ありがとうございました。
丁寧で分かりやすくて最高の動画でした！！ありがとうございます！！
この一本の動画もう４日もかけてやってる。だんだん理解出来てきた嬉しい
todoリスト作成でつまづいていた箇所、この動画で全て解決してくださいました！！本当に助かりました。ありがとうございます！
見ながらではありますが、初心者の私でも完成させることができました！
本当にうれしいです🎵
ありがとうございました！
すごく分かりやすいです。ありがとうございます！やっぱりエンジニア無理かなと思っている人にも希望が与えられる動画ですね。
ずっと山浦さんの手を目で追ってたら視力が上がりました！ありがとうございます！
本当に分かりやすい！ありがとうございます！
一冊の本に相当する内容だと思います。
とても参考になりました。
ありがとうございます。
１時間以上あるプログラミング講座を最後までできたのはこれが初めてです。
他のudemyの講師の方々は説明が難しかったり、コードが小さくて見にくかったりでなかなか難しいです。
今回の山浦さんの講座でまた理解が深まりました。ありがとうございます。
素晴らしすぎます。
とてもわかりやすくて勉強になりました。
動画をあげていただいてありがとうございます！
自分📝
17：45
divで囲みたい場所を選択後、ショートカットキーshift+ctrl+p ⇒ Emmet:Wrap~を選択 ⇒ divを入力してEnter
全くの初心者だと、細々した箇所が良くわからない状態になってしまうので、基礎構文をもう一度勉強し直してからやってみたいと思います。
すーばらしい、ここわからなかった。
ありがたいです！
私もココわからくて。。。助かりました！！！素敵☺️
command+pでEmmet:Wrapが検索バーで開きました。macとWindowsでは操作が若干違う？それか設定の関係ですかね？🤔よきアドバイスありがとうございます！
とても参考になりました!
駆け出しで、まだまだ理解できないところが多かったですが頑張ります。
丁寧にご説明いただきありがとうございます。
よかったですー！
もっと分かりやすく作れるよう僕も努力します！
空いた時間にちょこちょこ勉強させてもらっています。本当にわかりやすいです！とても勉強になっています！
ずっとjavascriptの初級者向けのサイトを漁っていたのですが、どれも文法事項しか載っておらず、どんな時にそれを使うかわからなかったのですが、
この動画は、その悩みを解消してくれるものでした。
とてもわかりやすかったです！ありがとうございました！！
ごきげんょう、お疲れ様です。
参考お勉強になりお勉強させて頂き
楽しく拝聴させて頂きました。
めちゃくちゃわかりやすいです。
この神動画に引き合わせてくれたUA-camAIに感謝
すんごく分かりやすくて、本当に助かりました！！！教え方も、どこがポイントなのかも、明確で丁寧で😂
勉強始めたはいいものの、挫折しそうになったのを、救ってくれました✨ 本当に助かりました！ありがとうございます☺️👍
連載形式でJavaScriptの講座やるつもりだったのですけど、まとめて一本の動画で学べるようにしようと思い直して、一本完結型にしました！
プログラミング学び始めた方やこれからJavaScript学びたい方の参考になれば嬉しいです！
コードはこちらです！
github.com/kiyodori/todo
3時間くらいかかったけどなんとかできたぁぁあ！！！！ありがとうございました😭
まだ理解できていない部分もありますが、動作するTODOアプリが作ることができてすごく勉強になりました。再度Javascriptを勉強し直します。ありがとうございました。
It was very easy to understand. Thank you very much. Keep on going.
1時間そこらでjsが理解できるほどjsは甘くないです！初心者、超入門向けというよりは、html、css、js、オブジェクト指向、その他ITの基礎知識をある程度知った上で、見たら大変有益だと思います。脱初心者への道【実践編】というタイトルだったなら納得です。
udemyで他の方のも学習しましたが、山浦さんのがとても分かりやすい。これが無料で学べるとか「神」です。自分はお金出せるんで有料でも良いけど、エンジニア分母を増やすために無料コンテンツが増えると良いなと思います。
これからも頑張って頂けたらと思っています。
わかりやすいです😭
この方すごいよなー。udemyでもこの方の講座受講した。gitのやつだけど。
わかりやすくて助かった。
とてもわかりやすく解説していただき、理解が進みました。確かにTODOリストには多くの基本的要素が詰まっていますね。
このわかりやすさで無料って…
助かりました！！
わかりやすいです！ありがとうございます^^
仕事でjsをコピペして使う（自分では書けない）程度の初心者ですが、丁度いい分かりやすさでした！ありがとうございます！
何回か繰り返し見て勉強します！
基礎を押さえた上でこの講座をみると、復習＋実践と言う形で、かなりすんなり内容が入ってきました！
今ではどんなレベルまで達した？
「超」入門講座のタイトルを信じて見ていますが、２０分でついて行けなくなりました。17：50「コンテナにふくめる」、17：57「emmetのラップ変換」の意味と操作方法（どうやったら入力画面が出るのか？）、18：18「DIVタグでくくってしまう」など初心者はそんなこともわからないので、山浦さんのような方にすがっているのです。私は初心者だと思っていましたが、「超・・・初心者」であることにきづいてしまいました。
とても勉強になりました！ありがとうございます。
documentがブラウザのapiだったとは！色々とスッキリしました！痒いところに手が届きました！
神どうがマジでわかりやすい感謝
初めてUA-camの実践で最後まで学習することができました。途中で分からなくなり放棄することが多くありましたが、このような動画を作成していただいて本当に助かります。
感謝あるのみ、本当に有難う御座います〜
ベストプラクティスな動画です😀
まじの初心者にはわかりにくすぎる笑
唐突に色んな新ワードをどんどん入力して進めてくるから頭追いつかん笑笑
長い説明を一生懸命してくださっているのが とても伝わります。
入門講座と明記されていたので拝見しようと思いましたが
例えば 「今回はadd()っていう関数を使ってそれを呼び出すようにします」と言われても add()って何? となる私のようなレベルには 分からないことだらけでした。
でもこういう活動をしてくださる方がいることに とても感謝しています。
分からないことだらけですが、 ググったりしながら やっていきたいと思います。
教えてくださりありがとうございます！
なるほどー、その辺りで分からない状態が発生してしまうのですね。今後はよりそのようなわからない部分が出ないように動画作成していきます！
Udemyでhtml,css,JavaScript の基本事項を一通り学んでからこの動画を観ました。これまで文法的に学んだ知識が、実際に活きる知識として整理できてとても良かったです！語学で例えると、基本的な文法と単語、熟語を身につけた後に、ある程度の長文を初めて自分で書きたいときに学ぶ動画として位置付けられますね。作成ありがとうございました😊最後が難しかったので、また勉強を進めてから改めて見直すようにします。
わかりやすい。趣味で５０代ですがありがたい。
お互い頑張りましょう
まだ冒頭のタクスバラシまでしか見てないけど、めっちゃわかりやすい！
お馬鹿な私でも理解できるかもと期待値アップ！
-めちゃくちゃわかりやすい！-
文法だけ習ってもいつ使えばいいか分からない！本当にその通りだと思います..
初見の際に、それなんだ？？？？ってところが常識のように流れていくので途中で断念してしまいました🥲でもJavaScriptの基礎本読んだ上でまたこちらの動画に挑んだ際に、わかる！！！となった時は感動してしまい！！求めてたことができる動画だったので！モチベアップしました！！！
I don't understand any Japanese but I understand what you are doing, really thank you for this video 👍
初心者です。
ほぼなにいってるかわかりませんでした。
これで超入門とはJavaScript恐るべしですね。
出直してきます。
簡単な機能のプログラムですが、いくつか躓くところがありましたが、なんとか、完成することができました。今度は何度か動画を見直して理解を深めていきたいと思います。ありがとうございます。
きよとさん！非常にわかりやすくプログラミングが楽しくなってきました！UdemyのAWSインフラも分かりやすかったです！明日から独学エンジニアもスタートします！
ありがとうございますー！独学エンジニアも改めてよろしくお願いします＾＾
勉強になりました！
ありがとうございます^_^
なんのためにメッソッドや構文が必要なのかがわかるので理解しやすかったです！
終盤にかけてだんだん訳が分からなくなったけど、とりあえずできました笑
Javaによるサーバ系を携わっていた文系出身の外国人PGですが、今月からアサインした案件でJavaScriptの知識も必要になり独学で進めているうちにこの動画をみていただきました。結論として言わせますととても分かりやすかったです。
これからも宜しくお願いいたします。
おー嬉しいです！ありがとうございます＾＾
がんばろう日本🇯🇵がんばろうビルマ
19:34~30:34 ここは重要だと思うので何度も見返して理解したいと思います。
山浦さんのような上司のもとで働けたら幸せそう、、と思いながら、見ていました＾＾；とても勉強になりました！UA-camでこんなに有益な情報をアップしてくださってありがとうございます。教科書で同じこと書いてても理解できないけれど、こちらの動画では「ほうほう、なるほど、できた！」ってなんだか勉強がすごくスムーズです(^^)これからも動画ＵＰ楽しみにしています！！
素晴らしい講義でした！
ご覧くださりありがとうございます＾＾
清人さんが一番わかりやすい！！
Apex（salesforce）も説明してほしい…
すごい！ よく理解してらっしゃる。
バックメインですが、フロントも最近触る機会が多いので、見させてもらいます。
解説からの実践での講義でいつもわかりやすく見させていただいてます。
用語なども丁寧に解説がありとても見やすいです。
その中で1:07:45のこれぞ見本！とばかりの二度見にツボってしまいその部分をリピートしてしまいました！
1時間越えの動画もストレスなく見させていただいてます！
width: ウィッズ、height: ハイト
とても勉強になりました。
let と const の演習の時に height を const で定義して、人生の世知辛さを表現して欲しかったです。
ドットインストールで学習中の初心者ですが、自分が既に得ている知識とこの動画を照らし合わせて見るとスムーズに理解出来て楽しいです。
何度も見に来ると思います。素晴らしい動画をありがとうございます。
VBAを大学生の時習ったのですが、今とあるソフトのスクリプトにJava Scriptが使われてるらしくプログラミングしっかり勉強したいと思っていたのでありがたいです。
よかったです＾＾
めちゃめちゃわかりやすい！！！
しばらくJS触ってなかったので、これ見て自分で一回作るだけでかなり感覚が戻る気がします！！
また何かJavaScript系の動画、是非お願いします！！！
たいきさんコメントありがとうございますー！
一回自分で作れば一番基礎のところはかなり復習になるはずです＾＾
かしこまりました！今だと「小学生でもわかるasync/await」って動画もJavaScript講座なので、よければご覧ください。
触ったことない人にはお勧めできない動画なのはわかったｗ
ある程度独学でJavascriptをやったタイミングで見ました。色々もんやりしてたことが、こういうことだったのか(DocumentはブラウザAPIとか特に)の連続で感動しました！😂予備知識ゼロでは確かに難しいかもしれませんが、今の自分には最高の動画でもっとJavascriptを勉強したくなりました☺️まとめるの超大変な動画だったと思います。ありがとうございました🙇♂️
素晴らしくわかりやすかったです。heightの発音は「ハイト」ですね。
ご指摘ありがとうございます💦
ほんとそれを思いましたよ笑
動画参考になりました！
一つ質問なんですが、inputタグに書いて下に出すところでBootstrapを使わずにcssで指定するにはどんな指定方法を利用すれば枠組みや表示が綺麗に寄りますか？
最初にどの言語から学ぼうかなと思い、学校ではC言語をやっていましたが、アプリ開発をしてみたいのでJSでいこうと思い、この動画に出会いました。
プログラミングを勉強して初めて(規模は小さいとは思いますが)開発？を経験しました。いざアプリが完成するとなんだか「おおっ！」って気持ちになります笑
ただ、超初心者の向けの動画だと思うのですが、それでも難しい言葉や、なぜこの書き方をするのかを理解できなかった点がいくつもあったので、ここは学習を通して徐々にマスターしていこうと思います。
thisってそういうことか！
よくわかった気がする
めっちゃ共感です、私は169.8くらいです
めちゃわかりやすかったです！！
何となく使っていた機能について深掘りしていただけて、理解が深まりました。この積み重ねで応用力がつくのだな、と思いました！
UdemyではJavaScriptコースを出さないのですか？
趣味としてプログラミングをはじめてみたく、何からしたらよいか分からぬまま本講座に辿り着き、勉強させていただきました。ありがとうございます。本来受講料をお支払いしなければいけないレベルのクオリティで、感謝致します。
通勤時に動画を見て、「？？？」に溢れながら家に帰って画面を静止させて、API(?)の役割を別途調べながらコードを自分でも打ってみて、なんとか一通りの挙動の流れと理屈は理解できたかな…？と感じます。(なんで「.」をつけるだけでそんなに便利なことができてしまうのだ？！どれだけ種類があるんだ？！というのが毎日の感想でした。。。)
言われれば「なるほど」となるのですが、これを自分で考えて組んでいくのはド初心者には絶望的に感じますね(笑)
ただ、「何がしたいのか」からの逆算で必要な動作を定義づけていく思考方法は非常に参考になったので、まずは当分 見様見真似で慣れていきたいと思います。
なんにせよ、楽しかったです。ありがとうございました！
何度も見てくださりありがとうございます！
今後はさらに説明分かりやすくできるよう解説していきます！
いつもありがとうございます。
動画を参考に少しずつ理解できるのでありがたいでし。
お聞きしたいのですが、こちらのVSCの配色テーマを教えてもらう事は可能でしょうか？
nice video
VSコードをダウンロードから丁寧に説明してる割にラップ変換の所がササッと進んでて、？？？でしたけど、調べて何とか出来ました。大変ありがたい動作ですが、小学生に教えるくらいの説明じゃないと私には厳しいです。
ぐぐぅ...次回からは出来る限り説明飛ばさないように気を付けます！
@@KiyotoUniv
なんか字を間違えてました。ありがたい"動作"じゃなくて"動画"です。まだ途中ですが頑張って最後までやってみます。ありがとうございます。
山浦さん
いいコンテンツありがとうございます。
動画では全然エラーが発生しないでサクサク進んでますが自分でやると中々エラーが解決できずに苦労しました。(^-^;
本当はダブルクリックで再編集とかできるようにしたいのですがまだ初学者なので難しいです(^-^;
最終的には「"text-decoration-line-through"」の記述ミスで挫折しようになりましたがサンプルコードと
自分のコーディングをコンペアツールで比較しながら解決しました。
単純にサンプルコピペでは動きけどなんの経験にもならないと思うので(^-^;（体験にはなるかも）
今後ともよろしくお願いします。
分野的に視聴者が増えにくい動画ですが今後とも期待しております。
Progateやるよりもこちらの方が数倍いいですね。
Jsしっかり覚えてTODOの追加行の再編集を行いたいと思います。(^^)/
TODOの追加行の再編集、是非に！一番力になると思います＾＾
今月からJavascriptを学び出しました。見ながら（止めながら・繰り返しながら）一緒にVScodeに打ち込みました。途中で動かない？？？。保存し忘れていました。(笑) 動作するように打ち込み完了できました。関連性やしくみを説明されているので、少し判るようようになった気がします。これから理解不足を解消するため、似たものを作ってみようと思います。
🔥🔥🔥
jsの基礎知識持ってる人が、この動画を見ながら答え合わせ+理解をスムーズにできる動画です。
配列とか、関数とか、条件式とか、
本当の初心者は、基礎知識身に付けてから見てください。楽しめると思います
UdemyのJavascript講座、期待しています！
説明が順序よく分かりやすかったです。この次におすすめのJavascriptで作るおすすめの物はありますでしょうか？
テトリスとかヘビゲームとか良いかもです！
javascriptは参考書でもとっつきにくいイメージがあり、スキル取得に憧れていましたが難しさに挫折したことがありました。
この動画を見て大変わかりやすいのと「コードを入力→作品を作って機能する」ワクワクする気分になれました(^^)/
何度も練習し、最終的にはこちらのコードをほとんど何も見ないで同等の物を作れるくらいまでにスキルを付けたいと思います！
今後も視聴させていただきますのでどうぞよろしくお願い致します。
プログラミングの理屈を学びたい人は「全員」必見です。
私もこの動画を10回以上見直してようやく少し理解ができるようになりました、本当にありがとうございました。
【質問】
動画(1:12:12)では配列 todo を先に作成し、その後に todos.push() の引数としてtodoを渡していますが、githubではtodos.pushで直接プロパティを追加しています。
作用としては同じに見えるのですが、何か理由(コードの短縮、トレンド、可読性の向上、管理のしやすさ等)があるのでしょうか？
お時間があるときで結構なので教えていただけると幸いです。
JavaScriptをHTML内で読み込ませるタイミングについて質問です！
defer属性とともにheadタグの中に埋め込むよりも、bodyタグの最後に入れる方が優れているのですか？ 違いがよくわからなくて…
Thank you.
Learning Japanese and JavaScript at the same time Lol
ブラウザはJSを実行するエンジンを持っている
実行するとHTMLの要素を変える
bodyタグの中にscriptタグを書くこと。
HTMLを表示させてからJSの処理させる。
小さく作ってまず動かす。
documentはブラウザのデータをプログラムが扱えやすいように提供してくれてるもの
inputタグを取得して、valueを取得する
letは再代入できる
constは定数
（varは古い）
特定のイベントが起きたら、JSを実行する
JSでliタグを作成させる
入力された値を取得
デザインを当てる
ulタグ
Progateで言われるがままJSの入力を無心でやってたので、実際どう使われるかがわかって『あ！ここProgateでやったとこだ！こういう場面で使えるのか！』ってなりました笑
超入門なのにemmetとかその他にも専門用語を使うので初学者には難しいと思う。
heightはハイトです！
11分台のとこでいきなり自分の環境で再現できなくて「マジかよはえーよ😭」と焦ったけど
どうもブラウザに入れてるDeepLの拡張機能が邪魔になるらしく、一旦オフにしたら再現できた。
良かった〜いきなり躓かないで。
きよとさん、heightは「ハイト」ですよー
console.log("innerTextとかElementとかその辺の知識が全くないからきつかった。でも天下逆賊たる悪名高きcontextmenuを使えたのは結構熱かった");
varは関数スコープ、letとconstはブロックスコープという役割の違いがあるので、varは今は使わない、使う必要がないと言い切るのは少々危ないのかなと思いましたがいかがでしょうか？
確かに現在はvarをほぼ使う機会はないかもしれませんが…
私の知識が浅いのかもしれませんが。
山浦さんのJavascript講座は他にもありますか？
今出してるのは後は非同期処理くらいです〜