JavaScriptの「基礎」が1時間で分かる「超」入門講座【初心者向け】

[@こんちゃーす-q7c]

初心者です。 ほぼなにいってるかわかりませんでした。 これで超入門とはJavaScript恐るべしですね。 出直してきます。

[@KiyotoUniv]

連載形式でJavaScriptの講座やるつもりだったのですけど、まとめて一本の動画で学べるようにしようと思い直して、一本完結型にしました！ プログラミング学び始めた方やこれからJavaScript学びたい方の参考になれば嬉しいです！ コードはこちらです！ github.com/kiyodori/todo

[@ChandyPeropero]

自分📝 17：45 divで囲みたい場所を選択後、ショートカットキーshift+ctrl+p ⇒　Emmet:Wrap~を選択　⇒　divを入力してEnter 全くの初心者だと、細々した箇所が良くわからない状態になってしまうので、基礎構文をもう一度勉強し直してからやってみたいと思います。

[@森下武夫-u2k]

すーばらしい、ここわからなかった。

[@saosaocha_nee]

ありがたいです！ 私もココわからくて。。。助かりました！！！素敵☺️

[@kezuharo]

command+pでEmmet:Wrapが検索バーで開きました。macとWindowsでは操作が若干違う？それか設定の関係ですかね？🤔よきアドバイスありがとうございます！

[@たか-i4y4l]

周りにプログラミングを教わる人が居ないので助かってます。本当に分かりやすいです。ありがとうございます！！

[@ryo1seto]

まだ理解できていない部分もありますが、動作するTODOアプリが作ることができてすごく勉強になりました。再度Javascriptを勉強し直します。ありがとうございました。

[@kinka5558]

この一本の動画もう４日もかけてやってる。だんだん理解出来てきた嬉しい

[@yuushal4654]

どれくらい出来るようになりました？

[@samokada]

この神動画に引き合わせてくれたKZbinAIに感謝

[@kentaroaso7699]

１時間以上あるプログラミング講座を最後までできたのはこれが初めてです。 他のudemyの講師の方々は説明が難しかったり、コードが小さくて見にくかったりでなかなか難しいです。 今回の山浦さんの講座でまた理解が深まりました。ありがとうございます。

[@masa-output]

いままで見た動画で1番わかりやすいです…！！いつも見てます！！！ありがとうございます！！

[@user-gw9vt9py5m]

todoリスト作成でつまづいていた箇所、この動画で全て解決してくださいました！！本当に助かりました。ありがとうございます！

[@stronghold6351]

一冊の本に相当する内容だと思います。 とても参考になりました。 ありがとうございます。

[@bass-chhrkrd]

ずっとjavascriptの初級者向けのサイトを漁っていたのですが、どれも文法事項しか載っておらず、どんな時にそれを使うかわからなかったのですが、 この動画は、その悩みを解消してくれるものでした。 とてもわかりやすかったです！ありがとうございました！！

[@pokecatah]

udemyで他の方のも学習しましたが、山浦さんのがとても分かりやすい。これが無料で学べるとか「神」です。自分はお金出せるんで有料でも良いけど、エンジニア分母を増やすために無料コンテンツが増えると良いなと思います。 これからも頑張って頂けたらと思っています。

[@hunterhunterdesu]

基礎を押さえた上でこの講座をみると、復習＋実践と言う形で、かなりすんなり内容が入ってきました！

[@Harrier97]

今ではどんなレベルまで達した？

[@YUKIKONEKOPANCHI]

長い説明を一生懸命してくださっているのが とても伝わります。 入門講座と明記されていたので拝見しようと思いましたが 例えば 「今回はadd()っていう関数を使ってそれを呼び出すようにします」と言われても add()って何? となる私のようなレベルには 分からないことだらけでした。 でもこういう活動をしてくださる方がいることに とても感謝しています。 分からないことだらけですが、 ググったりしながら やっていきたいと思います。

[@KiyotoUniv]

教えてくださりありがとうございます！ なるほどー、その辺りで分からない状態が発生してしまうのですね。今後はよりそのようなわからない部分が出ないように動画作成していきます！

[@Joy-of-the-Lord]

すごく分かりやすいです。ありがとうございます！やっぱりエンジニア無理かなと思っている人にも希望が与えられる動画ですね。

[@KM-sl9qw]

わかりやすい。趣味で５０代ですがありがたい。

[@renyuji]

お互い頑張りましょう

[@beakindpersonkak]

ずっと山浦さんの手を目で追ってたら視力が上がりました！ありがとうございます！

[@saosaocha_nee]

すんごく分かりやすくて、本当に助かりました！！！教え方も、どこがポイントなのかも、明確で丁寧で😂 勉強始めたはいいものの、挫折しそうになったのを、救ってくれました✨　本当に助かりました！ありがとうございます☺️👍

[@user-nj3xb1cv5k]

見ながらではありますが、初心者の私でも完成させることができました！ 本当にうれしいです🎵 ありがとうございました！

[@tomatomato374]

この方すごいよなー。udemyでもこの方の講座受講した。gitのやつだけど。 わかりやすくて助かった。

[@OO-xu9ul]

Udemyでhtml,css,JavaScript の基本事項を一通り学んでからこの動画を観ました。これまで文法的に学んだ知識が、実際に活きる知識として整理できてとても良かったです！語学で例えると、基本的な文法と単語、熟語を身につけた後に、ある程度の長文を初めて自分で書きたいときに学ぶ動画として位置付けられますね。作成ありがとうございました😊最後が難しかったので、また勉強を進めてから改めて見直すようにします。

[@000voxy000]

初めてKZbinの実践で最後まで学習することができました。途中で分からなくなり放棄することが多くありましたが、このような動画を作成していただいて本当に助かります。

[@studentprograming2681]

19:34~30:34 ここは重要だと思うので何度も見返して理解したいと思います。

[@mgburma09]

Javaによるサーバ系を携わっていた文系出身の外国人PGですが、今月からアサインした案件でJavaScriptの知識も必要になり独学で進めているうちにこの動画をみていただきました。結論として言わせますととても分かりやすかったです。 これからも宜しくお願いいたします。

[@KiyotoUniv]

おー嬉しいです！ありがとうございます＾＾

[@kakkoiinippon]

がんばろう日本🇯🇵がんばろうビルマ

[@ミチさん-q4z]

初見の際に、それなんだ？？？？ってところが常識のように流れていくので途中で断念してしまいました🥲でもJavaScriptの基礎本読んだ上でまたこちらの動画に挑んだ際に、わかる！！！となった時は感動してしまい！！求めてたことができる動画だったので！モチベアップしました！！！

[@ヒカキンガチ勢-d4h]

神どうがマジでわかりやすい感謝

[@kentoo_1]

width: ウィッズ、height: ハイト

[@myoyster7869]

It was very easy to understand. Thank you very much. Keep on going.

[@電気ケトル-l9z]

文法だけ習ってもいつ使えばいいか分からない！本当にその通りだと思います..

[@tomohikohayashi]

素晴らしくわかりやすかったです。heightの発音は「ハイト」ですね。

[@KiyotoUniv]

ご指摘ありがとうございます💦

[@cfhky]

ほんとそれを思いましたよ笑

[@佐藤賢一-m6g]

空いた時間にちょこちょこ勉強させてもらっています。本当にわかりやすいです！とても勉強になっています！

[@ugfactory8686]

解説からの実践での講義でいつもわかりやすく見させていただいてます。 用語なども丁寧に解説がありとても見やすいです。 その中で1:07:45のこれぞ見本！とばかりの二度見にツボってしまいその部分をリピートしてしまいました！ 1時間越えの動画もストレスなく見させていただいてます！

[@8shall8]

とても勉強になりました。 let と const の演習の時に height を const で定義して、人生の世知辛さを表現して欲しかったです。

[@shingo7226]

とてもわかりやすくて勉強になりました。 動画をあげていただいてありがとうございます！

[@YunaOmura]

素晴らしい解説ありがとうございます。私もEchoAPIを使ってJavaScriptのAPIテストを行っているんですが、非常に助かっています。他の方のおすすめツールも聞いてみたいです！

[@hunterhunterdesu]

documentがブラウザのapiだったとは！色々とスッキリしました！痒いところに手が届きました！

[@ひろ-g7s6g]

このわかりやすさで無料って… 助かりました！！

[@niconicohahaha7]

丁寧で分かりやすくて最高の動画でした！！ありがとうございます！！

[@ヤマサキカヅヨ]

仕事でjsをコピペして使う（自分では書けない）程度の初心者ですが、丁度いい分かりやすさでした！ありがとうございます！ 何回か繰り返し見て勉強します！

[@eijiikeda5390]

「超」入門講座のタイトルを信じて見ていますが、２０分でついて行けなくなりました。17：50「コンテナにふくめる」、17：57「emmetのラップ変換」の意味と操作方法（どうやったら入力画面が出るのか？）、18：18「DIVタグでくくってしまう」など初心者はそんなこともわからないので、山浦さんのような方にすがっているのです。私は初心者だと思っていましたが、「超・・・初心者」であることにきづいてしまいました。

[@yua1027]

ごきげんょう、お疲れ様です。 参考お勉強になりお勉強させて頂き 楽しく拝聴させて頂きました。

[@ykou]

素晴らしすぎます。

[@TaikiIshida-i8v]

めちゃめちゃわかりやすい！！！ しばらくJS触ってなかったので、これ見て自分で一回作るだけでかなり感覚が戻る気がします！！ また何かJavaScript系の動画、是非お願いします！！！

[@KiyotoUniv]

たいきさんコメントありがとうございますー！ 一回自分で作れば一番基礎のところはかなり復習になるはずです＾＾ かしこまりました！今だと「小学生でもわかるasync/await」って動画もJavaScript講座なので、よければご覧ください。

[@満足したいコダック]

VBAを大学生の時習ったのですが、今とあるソフトのスクリプトにJava Scriptが使われてるらしくプログラミングしっかり勉強したいと思っていたのでありがたいです。

[@KiyotoUniv]

よかったです＾＾

[@firstgear11382]

I don't understand any Japanese but I understand what you are doing, really thank you for this video 👍

[@にょにょ-m6s]

まじの初心者にはわかりにくすぎる笑 唐突に色んな新ワードをどんどん入力して進めてくるから頭追いつかん笑笑

[@sorayuzu-hp5im]

とても参考になりました! 駆け出しで、まだまだ理解できないところが多かったですが頑張ります。 丁寧にご説明いただきありがとうございます。

[@KiyotoUniv]

よかったですー！ もっと分かりやすく作れるよう僕も努力します！

[@名もなき詩-c6y]

きよとさん！非常にわかりやすくプログラミングが楽しくなってきました！UdemyのAWSインフラも分かりやすかったです！明日から独学エンジニアもスタートします！

[@KiyotoUniv]

ありがとうございますー！独学エンジニアも改めてよろしくお願いします＾＾

[@take6shin]

とてもわかりやすく解説していただき、理解が進みました。確かにTODOリストには多くの基本的要素が詰まっていますね。

[@my_name_is_TanakaTarou]

3時間くらいかかったけどなんとかできたぁぁあ！！！！ありがとうございました😭

[@ファギョ]

バックメインですが、フロントも最近触る機会が多いので、見させてもらいます。

[@user-em5ol9zz6f]

ドットインストールで学習中の初心者ですが、自分が既に得ている知識とこの動画を照らし合わせて見るとスムーズに理解出来て楽しいです。 何度も見に来ると思います。素晴らしい動画をありがとうございます。

[@Cオロナイン]

VSコードをダウンロードから丁寧に説明してる割にラップ変換の所がササッと進んでて、？？？でしたけど、調べて何とか出来ました。大変ありがたい動作ですが、小学生に教えるくらいの説明じゃないと私には厳しいです。

[@KiyotoUniv]

ぐぐぅ...次回からは出来る限り説明飛ばさないように気を付けます！

[@Cオロナイン]

@@KiyotoUniv なんか字を間違えてました。ありがたい"動作"じゃなくて"動画"です。まだ途中ですが頑張って最後までやってみます。ありがとうございます。

[@user-kq3sd7iy8r]

清人さんが一番わかりやすい！！ Apex（salesforce）も説明してほしい…

[@japanfoodsmarket]

簡単な機能のプログラムですが、いくつか躓くところがありましたが、なんとか、完成することができました。今度は何度か動画を見直して理解を深めていきたいと思います。ありがとうございます。

[@sraual]

わかりやすいです！ありがとうございます^^

[@堀内-y6f]

ベストプラクティスな動画です😀

[@Ti-zl9cy]

素晴らしい講義でした！

[@KiyotoUniv]

ご覧くださりありがとうございます＾＾

[@takenowataru1729]

趣味としてプログラミングをはじめてみたく、何からしたらよいか分からぬまま本講座に辿り着き、勉強させていただきました。ありがとうございます。本来受講料をお支払いしなければいけないレベルのクオリティで、感謝致します。 通勤時に動画を見て、「？？？」に溢れながら家に帰って画面を静止させて、API(?)の役割を別途調べながらコードを自分でも打ってみて、なんとか一通りの挙動の流れと理屈は理解できたかな…？と感じます。(なんで「.」をつけるだけでそんなに便利なことができてしまうのだ？！どれだけ種類があるんだ？！というのが毎日の感想でした。。。) 言われれば「なるほど」となるのですが、これを自分で考えて組んでいくのはド初心者には絶望的に感じますね(笑) ただ、「何がしたいのか」からの逆算で必要な動作を定義づけていく思考方法は非常に参考になったので、まずは当分 見様見真似で慣れていきたいと思います。 なんにせよ、楽しかったです。ありがとうございました！

[@KiyotoUniv]

何度も見てくださりありがとうございます！ 今後はさらに説明分かりやすくできるよう解説していきます！

[@百人一首-c8c]

まだ冒頭のタクスバラシまでしか見てないけど、めっちゃわかりやすい！ お馬鹿な私でも理解できるかもと期待値アップ！

[@鈴村準也]

本当に分かりやすい！ありがとうございます！

[@marudddddd]

わかりやすいです😭

[@juntube1401]

プログラミングの理屈を学びたい人は「全員」必見です。 私もこの動画を10回以上見直してようやく少し理解ができるようになりました、本当にありがとうございました。 【質問】 動画(1:12:12)では配列 todo を先に作成し、その後に todos.push() の引数としてtodoを渡していますが、githubではtodos.pushで直接プロパティを追加しています。 作用としては同じに見えるのですが、何か理由(コードの短縮、トレンド、可読性の向上、管理のしやすさ等)があるのでしょうか？ お時間があるときで結構なので教えていただけると幸いです。

[@百さん-x6v]

めっちゃ共感です、私は169.8くらいです

[@JPbbYu]

終盤にかけてだんだん訳が分からなくなったけど、とりあえずできました笑

[@yusuke2040]

今、勉強してるのでありがたいです。

[@PlusOne_SmartTutor]

とても勉強になりました！ありがとうございます。

[@tattook7933]

感謝あるのみ、本当に有難う御座います〜

[@1000-michael]

きよとさん、heightは「ハイト」ですよー

[@tmt3917]

勉強になりました！ ありがとうございます^_^

[@hakusai3325]

ブラウザはJSを実行するエンジンを持っている 実行するとHTMLの要素を変える bodyタグの中にscriptタグを書くこと。 HTMLを表示させてからJSの処理させる。 小さく作ってまず動かす。 documentはブラウザのデータをプログラムが扱えやすいように提供してくれてるもの inputタグを取得して、valueを取得する letは再代入できる constは定数 （varは古い） 特定のイベントが起きたら、JSを実行する JSでliタグを作成させる 入力された値を取得 デザインを当てる ulタグ

[@やさやささ]

最初にどの言語から学ぼうかなと思い、学校ではC言語をやっていましたが、アプリ開発をしてみたいのでJSでいこうと思い、この動画に出会いました。 プログラミングを勉強して初めて(規模は小さいとは思いますが)開発？を経験しました。いざアプリが完成するとなんだか「おおっ！」って気持ちになります笑 ただ、超初心者の向けの動画だと思うのですが、それでも難しい言葉や、なぜこの書き方をするのかを理解できなかった点がいくつもあったので、ここは学習を通して徐々にマスターしていこうと思います。

[@itoy.8930]

ある程度独学でJavascriptをやったタイミングで見ました。色々もんやりしてたことが、こういうことだったのか(DocumentはブラウザAPIとか特に)の連続で感動しました！😂予備知識ゼロでは確かに難しいかもしれませんが、今の自分には最高の動画でもっとJavascriptを勉強したくなりました☺️まとめるの超大変な動画だったと思います。ありがとうございました🙇‍♂️

[@albasiempre5931]

heightはハイトです！

[@いんちきべんちゅら]

すごい！　よく理解してらっしゃる。

[@funsui1140]

UdemyのJavascript講座、期待しています！

[@wiwiclub]

今月からJavascriptを学び出しました。見ながら（止めながら・繰り返しながら）一緒にVScodeに打ち込みました。途中で動かない？？？。保存し忘れていました。(笑)　動作するように打ち込み完了できました。関連性やしくみを説明されているので、少し判るようようになった気がします。これから理解不足を解消するため、似たものを作ってみようと思います。

[@三代目たかちゃん]

-めちゃくちゃわかりやすい！-

[@User-wb5nq]

thisってそういうことか！ よくわかった気がする

[@kumashiro652]

わかりやすい動画ありがとうございます。とてもためになります。一つだけ、こちらに向かってhitするような手が少し怖くて最初見るのをやめてました。

[@g.m-trade9122]

jsの基礎知識持ってる人が、この動画を見ながら答え合わせ+理解をスムーズにできる動画です。 配列とか、関数とか、条件式とか、 本当の初心者は、基礎知識身に付けてから見てください。楽しめると思います

[@Sケイ-d3i]

山浦さんのJavascript講座は他にもありますか？

[@KiyotoUniv]

今出してるのは後は非同期処理くらいです〜

[@ゆ彦]

11分台のとこでいきなり自分の環境で再現できなくて「マジかよはえーよ😭」と焦ったけど どうもブラウザに入れてるDeepLの拡張機能が邪魔になるらしく、一旦オフにしたら再現できた。 良かった〜いきなり躓かないで。

[@hirohiro6585]

初心者向けのフレームワーク教えてください。

[@ST-lm9zz]

山浦さんのような上司のもとで働けたら幸せそう、、と思いながら、見ていました＾＾；とても勉強になりました！KZbinでこんなに有益な情報をアップしてくださってありがとうございます。教科書で同じこと書いてても理解できないけれど、こちらの動画では「ほうほう、なるほど、できた！」ってなんだか勉強がすごくスムーズです(^^)これからも動画ＵＰ楽しみにしています！！

[@youtubefan1822]

山浦さん いいコンテンツありがとうございます。 動画では全然エラーが発生しないでサクサク進んでますが自分でやると中々エラーが解決できずに苦労しました。(^-^; 本当はダブルクリックで再編集とかできるようにしたいのですがまだ初学者なので難しいです(^-^; 最終的には「"text-decoration-line-through"」の記述ミスで挫折しようになりましたがサンプルコードと 自分のコーディングをコンペアツールで比較しながら解決しました。 単純にサンプルコピペでは動きけどなんの経験にもならないと思うので(^-^;（体験にはなるかも） 今後ともよろしくお願いします。 分野的に視聴者が増えにくい動画ですが今後とも期待しております。 Progateやるよりもこちらの方が数倍いいですね。 Jsしっかり覚えてTODOの追加行の再編集を行いたいと思います。(^^)/

[@KiyotoUniv]

TODOの追加行の再編集、是非に！一番力になると思います＾＾

[@tpp_tkg]

33:55位のpreventDefault、まったく止まってくれないんですがどうすれば、、

[@misamisa_4]

Progateで言われるがままJSの入力を無心でやってたので、実際どう使われるかがわかって『あ！ここProgateでやったとこだ！こういう場面で使えるのか！』ってなりました笑

[@tomohiromatsuyama8900]

説明が順序よく分かりやすかったです。この次におすすめのJavascriptで作るおすすめの物はありますでしょうか？

[@KiyotoUniv]

テトリスとかヘビゲームとか良いかもです！

[@KentaroxKondo]

めちゃわかりやすかったです！！ 何となく使っていた機能について深掘りしていただけて、理解が深まりました。この積み重ねで応用力がつくのだな、と思いました！ UdemyではJavaScriptコースを出さないのですか？

[@吉田力-j3m]

Height＝ハイト　ですね。 Documentがjsの機能じゃないのは知らなかった！

[@lovechocojan]

細かい点ですみません。高さ height の発音はヘイトではなく【háit】ですよね。ヘイトだとhate憎むを思い浮かべてしまいます・・・。

[@kinka5558]

超入門なのにemmetとかその他にも専門用語を使うので初学者には難しいと思う。

[@immersion6174]

Thank you. Learning Japanese and JavaScript at the same time Lol

[@SAMURAI_JAPAN.]

CRAZY WEDDINGのHPに山浦さんの素敵な写真があり驚きました！サイト制作にも関わっていたのでしょうか？

[@KiyotoUniv]

んん！？他人の空似の気がしつつ、気になります（URL知りたいです）

[@Harry_jitter_aim]

まずform idとは？input typeとは？ id？placefolder？？？みたいに基礎が分かっていないのでここら辺に関してはProgateとかで学ぶといった方が良いですかね、、？

[@mesot5235]

プログラミング屋さんは heightをヘイトっていうのか。 ハイトの方がいいと思うけどな。

[@kencharles369]

const height != “ヘイト” ; height =“ハイト”;

[@shige7200]

どなたかご教授おねがいいたします。 1:02:15 で何故ここにイベントリスナーを設定してクリックしたliタグの情報が取得できるのでしょうか。