JavaScript入門・完全版コース／プログラミング初心者向け、コスパ最強講座

👩‍💻セイトが運営するプログラミングスクール・研修事業「SiiD」
bug-fix.org/siid
👨‍💻セイトによるエンジニア専用・転職キャリア相談「EEE転職」
• 若手エンジニア皆さんの転職やキャリア相談にのります
✅LINEで配信・イベント情報・無料キャリア相談やってます
lin.ee/eR6BXOD
📙プログラミング入門書出版しました by 日経BP
amzn.asia/d/7Z3T5mH
◎お仕事のお問い合わせはこちらからお願いします
bug-fix.org
------------------------------------------------------------------
プログラミングを学習したい初心者の方、エンジニア転職を目指している方、Web制作したい方であればぜひ学習しておきたいのがJavaScriptです。
とくにフロントエンドエンジニアなら必須！バックエンドエンジニアでも確実に触れる機会はあるのでここで紹介している部分は抑えておいてほしいところ！
ここでは基礎仕様・クラスとインスタンス・UI作成・アプリの作成までを学習します。
-------------------------------------------------
🔽 サンプルコード
・JS基礎文法のソースコード
github.com/seito-developer/js...
・クイズゲームのソースコード
github.com/seito-developer/js...
・タブのソースコード
github.com/seito-developer/js...
・クラスとインスタンスのソースコード
github.com/seito-developer/js...
🔽目次
00:00 はじめに
02:32 環境構築
10:41 JavaScript基礎文法
01:02:59 JavaScript実践編(Webクイズゲーム)
01:47:49 定番UIの作り方
02:37:39 クラスとインスタンス
03:16:53 さいごに
🔽Special Thanks
動画編集：ぽぴぃ氏 Twitter ▷@poppy0p0
画像素材：いらすとや さん
#プログラミングスクール・転職キャリア相談・公式LINEやってます

[@webit7652]

↓こちらもよければチェックしてみてください〜 👩‍💻ゼミ形式で学ぶプログラミング研修「SiiD」 kzbin.info/www/bejne/jYq4Y3qfqZ2XiMk 👨‍💻エンジニアによるキャリア相談「EEE転職」 kzbin.info/www/bejne/g3-3q4F8fMygj6s ------------------------------------------------------------------

[@339abcat5]

とてもためになる動画でした！ありがとうございます！

[@___umzZ]

１周目終わりました！何回も見直して自分の力にできるように頑張ります！わかりやすい動画作ってくださって本当にありがとうございます😭！

[@user-oc4hx2kp1b]

cootstrapのサイトの仕様が変わっていて、CSS onlyが見当たりません、、、

[@paya6091]

わかりやすくてとても勉強になりました！これからも応援しています！！

[@webit7652]

感謝です！

[@asuna68k]

ちょうど古い動画を見始めたところに、補足を追加したまとめがアップされたので助かりました。分かりやすくて良かったです。

[@webit7652]

いいタイミングw ありがとうございます！

[@lifeisfullofdreams3899]

すごい。本当にありがとうございます。

[@koala_li]

神講座🤓

[@hide1864]

ありがとうございます! とても分かりやすいです! 応援してます。

[@webit7652]

感謝です！

[@tech-quest]

完全版ですね！！！✨ 高評価ポチらせていただきました😊 いつもありがとうございます！！！

[@webit7652]

高評価ありがとうございます！

[@user-iv8tn6km1c]

天才動画をありがとう。

[@happykeita1522]

部活でやってるので いつも見させてもらっています 自分の理解力が少なくて覚えたことは少ないですが 毎回ひとつ何かを作りながら 単語の意味説明分かりやすいです これからもよろしくお願いします

[@webit7652]

ありがとうございます！！ぜひ繰り返し使ってください💪

[@akiokunn9962]

リファクタリングのあたりはプロ感がすごくてびっくりしました！ 実務イメージが少し湧きました！ありがとうございました！

[@syavathekitchen1162]

本当ありがとうございます

[@user-dg1uu3fj7m]

いつも勉強になる動画ありがとうございます。 やっと半分まで進みましたが、めげそうです・・・ 何回も見て、理解できるよう頑張ります。

[@webit7652]

動画自体長いですからね笑 ゆっくり頑張ってください👍

[@webit7652]

動画自体長いですからね笑 ゆっくり頑張ってください👍

[@musixxx43]

超初心者なのでとても参考になります！！ありがとうございます！！ 少しずつ勉強してるので、自分用に失礼します…。 【JavaScript基礎文法】 00:28:44 ①変数 00:32:16 ②定数 00:36:19 ③配列 00:38:49 ④ループ文 00:43:36 ⑤if else 文 00:46:13 ⑥関数 00:49:26 ⑥関数-引数 00:51:31 ⑦オブジェクト 00:55:18 特殊なオブジェクト 00:55:31 ①window 00:57:36 ②document 00:59:56 ③event

[@user-sm6fh5vt3q]

助かります。

[@user-xm4ly6zw6m]

ありがとうございます！

[@yellow_mouse99]

色んな方の動画見させて頂きましたがセイト先生の解説内容がダントツで分かりやすかったですし、コード書くのが好きになりました！もしお時間があればJavaScriptの方も中級者向けの動画出して頂けませんでしょうか…🙏

[@KentaroxKondo]

きたーーー！🙌

[@MKWD]

クイズゲーム、タブ、アコーディオン作成、それぞれ課題が設定されており非常に助かりました。　PBLメインのSIID期待してます。

[@webit7652]

ありがとうございます！

[@user-sm6fh5vt3q]

今日から見て行きます 頑張るぜー〜！

[@user-sm6fh5vt3q]

真顔でunko言うのシュールで草

[@webit7652]

あざます！

[@user-sm6fh5vt3q]

基礎文法終わりー！

[@LockSeedHollow]

ちょうどJavaScriptへの転換が来ていたので助かりました。

[@webit7652]

使ったってください！

[@LockSeedHollow]

@@webit7652 有り難く！喜んで！！

[@user-vy8hf6cs2z]

セイトさんの動画わかりやすくて楽しいです。

[@webit7652]

感謝！

[@ziyaoyuan7936]

マジで役に立つ、progetも利用しているけど、この動画を無料でみられるとは超ありがたい

[@webit7652]

ウレシス

[@user-ku6lg5iq4k]

ありがてぇ!

[@user-vn4gn8ln3m]

phpとPythonをほんの少しずつかじって勉強してますが、似てるから面白いですね！

[@user-md6fq2rn4i]

めちゃ助かる　理解が捗りましたああ $〜　はHTMLを表してるっての大事ですねー！

[@webit7652]

よかったぁ☺️

[@syuoochan8387]

様々なudemy教材よりもめちゃ分かりやすいし楽しいかも、定数unko2で笑いました！基礎編終わって理解進みます。ありがとうございます！

[@webit7652]

感謝！☺️

[@live_oto_evil]

セイト先生の講座はわかりやすく、そして楽しく吸収できるので為になります バックエンド一辺倒な自分でしたが、これを機にJS等にも触れていこうと思います

[@webit7652]

ありがたや！！！

[@renmeri]

人生で初めて触れたコンピュータ言語がC言語でよかった。ヌルヌル理解出来る。

[@deliciousjapanfoodline5018]

勉強させて頂きます(^^)ありがとうございます☆

[@user-mw7lh9jq4d]

最高でした！！！ありがとうございます。 実際に書きながら進めたら6時間くらいかかったと思いますｗｗｗ（止めて書いてを繰り返して）

[@webit7652]

すごい！おつかれさまでした！！

[@sk-ky8iz]

セイト先生はHTML&CSS以外を先に学ぶことをお勧めしていました。なのでこの動画を見てJavaScriptを勉強しています。大変助かっています。Web制作をしたいので、視聴後はHTML&CSSと同時並行でJavaScriptの勉強した方が方がいいですか？

[@user-cp2ne8kf4b]

神ッ

[@user-ok1is6tc9d]

とても勉強になりました！ありがとうございます。 質問させていただきたいのですが、クラスとインスタンスのところの、.hookNameは、.tagNameと同じようなプロパティなのでしょうか？調べても出てこなかったので＞＜ .tagName→呼び出された要素のタグ名を返す .hookName→id名を取得している？？

[@Ms-ww6bd]

Javascriptの理解が深まりました。ありがとうございます。forEachの使い方を知りたいです。

[@user-in3bp5ej8v]

定番UIの作り方の所で、クリックしたら起こるイベントの下のhandleClickが読み取られることはありませんと出てしまいます。何か改善策はありますでしょうか？

[@Star-qp7rv]

2:00:19のis-activeの前になんでスペースがあるんですか？ htmlの属性ってスペース入れられるんですか？

[@user-dc1xc5sg3i]

30:38　console.log　と打っても色がつかない、候補に出てこないのですがなぜでしょう？BBEditなるエディタを使っていますが種類によるのでしょうか？

[@KK-xn4cm]

怒涛の変数unkoラッシュで笑ってしまった

[@user-kk7fu1wf3q]

let iよりunkoのほうが頭にスッと入ってくる不思議！ 引数 49:25

[@kk-rb7no]

激アツ

[@GK-no9fm]

JavaScriptが未経験で今回この動画で初めて学ばせていただきました。 率直な感想としては完全未経験の自分にとっては難しかったです。。 なぜこうするんだろう？とかなぜこういう書き方をするのだろう？と思ったら自分で考えたり調べつつ行わないとただの板書になってしまう気がしました。。 ただそうこうしてるとどんどん動画は進んでしまって、、 もしかしたらどこかである程度学んだ人だったら、すんなり頭に入る内容なのかもしれません。

[@user-qw8nu8nb7z]

23:23の「囲ってあげてください」の具体的な動作がわかりません。表示されてる通りにしたのですが範囲指定のコードの右側に表示されている縦線が出てこないのでおそらく範囲が指定されてないからかボタンが中央表示になりませんでした。よろしければご教示の程よろしくお願いします。

[@lltj2232]

boiler plateのダウンロードのやり方を教えて下さい。どうやら、動画のようにダウンロードできないようです。

[@_sora3926]

19：32秒の上書きってどうやってやるんでしょうか？

[@user-zh3fi9zn1y]

まったくの初心者です。 BootstrapのCSSonlyが見当たらないのですが…

[@user-le8oi6ve7i]

お世話になっております。 エディタにて「ERROE: ''question' is assigned a value but never used. [no-unused-vars]と表示されてしまいエラーになってしまいます。原因がわからず困っています。

[@deliciousjapanfoodline5018]

一番最初のダウロードができないです😢

[@user-qm9rv2jz6l]

HTML、CSS、JavaScriptを使用したハンバーガーメニュー🍔についての解説動画、みたいです☺️❣️

[@Yoshio_video_editor]

青いアラート枠の上にボタンが来るのですが、どうすればいいですか？

[@user-fh5ie6gn8b]

タブ制作の以下の件、 $tab.querySelectorAll('[data-content="' + targetVal + '"]')[0].style.display='block'; 説明がわからない。。。

[@user-xf3iu9nh3t]

メモメモ var 再宣言⭕️再代入⭕️ （同じ名前でもう一回作れちゃう） let 再宣言❌再代入⭕️ （ダブりのない変数） const再宣言❌再代入❌ （もう変わることのない定数）

[@user-du9hw6gm6o]

初見です。bigUnkoは耐えられませんでした。

[@user-lj2jc8zy9h]

何回見てもunkoってのが笑ってまう笑笑

[@jack1999jp]

定番UIの動画にて、htmlで各tab-nav-itemをaタグで作成されていますが、どういう意図でしょうか。例えばdivで作れば、preventDefaultで打ち消す必要がないと思うのですが。別のタブへ遷移するからaタグを使用されているのでしょうか。

[@webit7652]

divでもだめじゃないですが、「元々クリックされたることを前提としているタグ」を設定するほうが仕様的に自然なのでそうしてます。 タブでなくとも、ページ内リンクとかもaタグで実装するのが自然です そういう意味でいうとbuttonタグでもいいですがbuttonだとデフォでCSSが色々ついていてそれをリセットするのが結構な手間なのでaタグに

[@onlystudy3844]

いつも、勉強の為見させて頂いております。 クイズゲームを作成したのですが 一問目の問題、選択肢が表示されずに不正解、正解は表示されます。 二問目三問目は表示され最後の終了のウィンドウも出るのですが注意してみた方が良いところなどありますでしょうか？

[@webit7652]

ヒント：概要欄に載せているソースコードと自分のコードを見比べてどこが間違っているか見比べよう

[@onlystudy3844]

@@webit7652 ご返信ありがとうございます！ やってみます！！

[@user-datodemoomottaka]

1:56:41~ Ctrl + dで選択するところまでは分かるのですが、選択後に右端まで指定部分を広げるやり方が分からずモヤモヤしています。。。 もし良ければ教えて頂けるとありがたいです。

[@webit7652]

ctrl, shift, 矢印キーかな？

[@user-datodemoomottaka]

@@webit7652 なるほど。。。 スッキリしました！ありがとうございますん！

[@arthurtateixi8969]

クイズゲーム終わったら一旦html,cssとjsを詳しくやってる動画みないと初心者にはキツイかもしれないです

[@ch-lm6ij]

質問です。 こちらで作らせていただいたクイズアプリケーションを知り合いに共有したいのですが、どのようにすれば出来ますでしょうか。

[@webit7652]

サーバーに上げてURLを共有したい、という意味かな...？ この辺見るといいかもです kzbin.info/www/bejne/fpPbpp-jbc6LiaM

[@user-hc1pb4uf9c]

質問させてください。1:18:18ぐらいのボタンのテキストを書き換える作業ですが、 document.getElementsByTagName("button")[0].textContent = answers[0];　と書きましたが、一番左のボタンがスーパーファミコンにならずPrimaryのままです。 試しにconsole.log(document.getElementsByTagName("button")[0].textContent = answers[0]);　と書いてコンソール画面(?)を見るとスーパーファミコンと出てくるので、書き方は間違っていないと思うのですが、どうもボタン上の文字が書き換わりません・・・。 何か原因分かりますでしょうか？？

[@webit7652]

ちょっとその情報だとわかりませんが、一つ言えるのは動画の通りに正確にコードが書けていれば必ず動画通りの動きになるということです。 そうならないということはどこか間違えてコードを書いているのではないかと。 動画内でもお伝えしていますが、概要欄に実際のコードへのリンクがあるのでそれとご自身のコードをよく見比べてみてくださいｂ

[@user-hc1pb4uf9c]

さっそくのご回答ありがとうございます。やはりどこかが間違っているということですね。よくよく見比べておかしなところがないか確認してみます！

[@AOZAWA-jr1zq]

まさかunkoとgoToiletでオブジェクトの理解を深められるとは思わなんだ...

[@webit7652]

奇跡www

[@kamikaze37136]

今までどの動画見てもしっくりこなかったけど、なんかめっちゃするっと入ってきた笑

[@user-tu6fv6pf8h]

vscodeのemmetという機能でHTMLの雛型を作ったんですけど、この動画に書いてある、ひながたと微妙に違うんですけど、今と昔で変わってりしてるんでしょうか？それとも自分で付け足さないといけないんでしょうか？返信していただいたら幸いです

[@webit7652]

あんまり気にしないでいいレベルの差異かなと思うです

[@user-tu6fv6pf8h]

返信ありがとうございます！気になっていたのでがちで助かります！これからも動画投稿頑張ってください！

[@user-ws2ff5ss8x]

プロゲートを見たので、こちらにチャレンジしてみます！44歳プログラム初心者。

[@webit7652]

おお！ぜひ頑張ってください！

[@user-ws2ff5ss8x]

2:07:50辺りの所で$nav＝$tab.略　としてますが$docではないのですか？ログで見たら結果は同じでしたが。$navには$tabのId値が入ってる（普通の代入のイメージ）だけなのにdocumentの要素をとれるんですか？つたない質問で申しわけありません。

[@JapanaishiteruJapan]

1:56:41 どうやってるんですか？

[@hayaton909]

ダウンロードしたboilerplateのファイルの中にindex html がない場合どうすればよいでしょうか？？

[@webit7652]

絶対見落としてる！ まあ概要欄にあるソースコード全部貼ってますんでそっち見てもいいかと

[@ta-by8im]

2:24:00 "[data-content='" + targetVal + "']"　 + targetVal + はなぜダブルクォーテーションとシングルクォーテーションで囲まないといけないのでしょうか？わかる方がいましたら、教えていただきたいです。

[@KA-ng6eu]

文字列の中にクォーテーションを含めたい時に、外側のクォーテーションと同じ種類のクォーテーションを含めると、途中で文字列が閉じてエラーが出てしまいます。そこで、文字列を囲む外側のクォーテーションと文字列中で異なるクォーテーションを使用することで、これを回避しています。 今回の例では[data-content="targetValの値"]という文字列を作ろうとしています。=の右側の部分はクォーテーションで囲まなければいけないという記述上の規則があるので、外側のシングルクォーテーションと区別してダブルクォーテーションを使用しています。

[@s1h1i1n8]

1:34:18のwhile分へのリファクタリングをコード全く同じで実行してもボタンがprimaryに戻り正解・不正解の表示も出なくなります。 何故でしょうか。

[@webit7652]

残念ながらわかりません。サンプルコードと見比べてみてください

[@user-cb6fy1lh6c]

16:46 HTML

[@STUDIO23..]

初めまして、プログラミングの言語はcadソフトみたいにお金がかかるんですか？

[@webit7652]

かかりません！

[@natu12345]

Wunderlist なつかしいなぁ。 ブックマークバーって古くなりがちな気がする。（最新のものは、inbox的なところとかフォルダにどんどん入れていく傾向がある。） もう、みんな『Microsoft To Do』使ってるかな？

[@user-cb6fy1lh6c]

19:08 CSS

[@user-wg9dt1wz8d]

boiler plateがダウンロードできません。 セイト先生と同じサイトは開けているのですが、ダウンロードボタンが「はじめる」という風になっていてよく分からないです。分かりにくい説明ですがご教授お願いいたします、、泣

[@webit7652]

ボイラープレート、仕様変わっちゃったみたいです。 概要欄にソースコード貼ってあるのでコピペして活用してみてね github.com/seito-developer/js-tutorial/blob/master/index.html

[@kouseich]

16:55 こちらのサイトが現在仕様変更されて、DownloadというボタンではなくGet Startedというボタンになっています さらに、GitHubに飛ばされて初心者にとっては最初で詰んでしまうので、最新版お願いします...

[@webit7652]

ご指摘ありがとうございます！3年前の動画なので、現在最新版を作成し直しております。なるべく早くにアップします！

[@user-cd5ep3xt3g]

bootstrapの仕様が変わっていてcss onlyが見つかりません 今のbootstrapならどれをコピーすればいいでしょうか

[@user-cd5ep3xt3g]

バージョン変えたらできました

[@webit7652]

動画通りにしたい場合はv4ですね getbootstrap.jp/docs/4.2/getting-started/introduction/

[@zoo9294]

誰か目次を作っておくれー

[@user-qw7ig4fn7e]

26:40 の所で困っています index.jsを書いても後ろに .html が自動で付いてきます パソコン自体少し前まで触って来なかった為知識も少ないです 教えていただけるとありがたいです

[@webit7652]

エクスプローラーやFinderではなく、VSCode上でファイルつくるようにしましょう

[@user-qw7ig4fn7e]

@@webit7652 左上の New File から index.jsを打ち込んだら JS Fileが作れました。 ご丁寧な対応ありがとうございました。

[@user-sw7gp9bc1k]

何度も確認して間違いがないのに、alertが機能しません。そのせいで次の問題の進むことができません

[@user-gf1np1hc4j]

//を一瞬で数行に当てるのはどうやるのでしょう？（汗

[@user-gf1np1hc4j]

いじくり倒して解決しました（汗 //を当てたい範囲にCtrl＋/ でした

[@kotori7548]

index.htmlのとの間に文字を入れてブラウザで見ても、ブラウザ上で入れた文字が表示されません。どういうことでしょうか...

[@webit7652]

ヒント: 閉じタグができてない

[@webit7652]

よーく動画見てね！ サンプルコードからコピペしてみてね！

[@user-lv1kh6vx2g]

どなたか教えてほしいです。 17:02　のボイラープレートでダウンロードと出ません。 何か別の方法をご存知な方はいらっしゃいませんか

[@webit7652]

ボイラープレート、仕様変わっちゃったみたいです。 概要欄にソースコード貼ってあるのでコピペして活用してみてね github.com/seito-developer/js-tutorial/blob/master/index.html

[@user-jc6bf2qk8r]

boilerplateのテンプレ見つけましたが動画のコードと違っているのですが問題ないですよね

[@user-jc6bf2qk8r]

ちなみにこれです A simple primary alert-check it out! Primary Primary Primary Primary

[@user-ft7tp9rk2p]

侍テラコヤってどう思いますか？

[@webit7652]

SEOが超強い！

[@user-ws7mf4sl8j]

HTML5Boilerplateの始めようを押した後どうすればいいのかわかりません。

[@webit7652]

ボイラープレート、仕様変わっちゃったみたいです。 概要欄にソースコード貼ってあるのでコピペして活用してみてね github.com/seito-developer/js-tutorial/blob/master/index.html

[@ikustas]

問題を増やしてからうまくいかなくなった...

[@user-sm6fh5vt3q]

文末に;書かなくても実行できるんですけど書くのはなぜですか？

[@webit7652]

それでも動いちゃうのがJS。

[@user-sm6fh5vt3q]

なるほどです。 返信ありがとうございます。

[@YOUSUPERTERIO]

1:02:00 基礎文法チュートリアル終わり

[@webit7652]

お疲れ様！！

[@SS-bz3uw]

index.htmlってのがないんですけどどうすればいいですか?

[@webit7652]

めっちゃその質問くるけど100%あります、見逃してるだけです＞＜

[@user-hg7ll9vq5s]

Pythonやって下さい！！！！

[@webit7652]

やりますかー！

[@Yoran91]

仕様が変わって最初のダウンロードがまず出来ない

[@webit7652]

どれのことを言ってるのか、具体的に言ってもらえたら助け舟出せるかと！😅

[@user-cb1yn7bg7e]

unkoがHallo world！したとか真顔でいわんでくれｗｗｗ

[@user-ik3dk1lm8g]

21:59 どうやってやるんですか？

[@webit7652]

選択してTabキー！

[@user-ik3dk1lm8g]

@@webit7652 ありがとうございます！

[@takafumifujiwara4911]

変数の癖が凄いw

[@webit7652]

てへぺろ

[@user-us4pz1st4g]

鳥貴族よりコスパ良すぎます。

[@webit7652]

あざます！ｗ

[@user-sw7gp9bc1k]

unkoが出てきたとき笑った

[@hide1864]

2:31:11

[@user-zt9ce4ot3i]

28:56何打つのかと思ったら唐突のうんこで草生えた

[@aaa-um4zm]

2:24:55

[@user-of3mm2ms2c]

bootstrapのCSSのとこコピペしたけど読みに行かない。。。。

[@user-of3mm2ms2c]

できました。すいません。