ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター！
ฝัง
- เผยแพร่เมื่อ 15 ส.ค. 2024
- 👩💻セイトが運営するプログラミングスクール・研修事業「SiiD」
bug-fix.org/siid
👨💻セイトによるエンジニア専用・転職キャリア相談「EEE転職」
• 若手エンジニア皆さんの転職やキャリア相談にのります
✅LINEで配信・イベント情報・無料キャリア相談やってます
lin.ee/eR6BXOD
📙プログラミング入門書出版しました by 日経BP
amzn.asia/d/7Z...
◎お仕事のお問い合わせはこちらからお願いします
bug-fix.org
------------------------------------------------------------------
プログラミングを学習したい初心者さん、エンジニア転職を目指している方、Web制作したい方であればぜひ学習しておきたいのがJavaScriptです。
とくにフロントエンドエンジニアなら必須！バックエンドエンジニアでも確実に触れる機会はあるので最低限抑えておきましょう。
ここで学んだ知識を使って、実際にJSでクイズアプリを作る動画もあるので観てね！
------------------------------------------------------------------
【動画内のサンプルコード】
github.com/sei...
【目次】
00:00 はじめに
02:03 Webアプリケーションとは？
05:25 最小限のHTML/CSSを用意する
17:48 JavaScript基礎文法7つ
17:58 1.変数
21:36 2.定数
25:37 3.配列
28:07 4.ループ文
32:58 5.if/else文
35:30 6.関数
40:50 7.オブジェクト(+ イベント)
51:30 さいごに
🔽Special Thanks
動画編集：@poppy0p0 さん
画像素材：いらすとや さん（www.irasutoya....
#プログラミングスクール・転職キャリア相談・公式LINEやってます
4ヶ月かけて130時間html/css学んだ私にはとても有意義な1時間だった。
最初のhtmlとBootstrapのとこは、ある程度知ってたので復習で見れた。（多分この動画の説明レベルだと、本当の初心者はここで挫折する可能性高いと思います）
本題のjavascriptはめっちゃくちゃ分かりやすい！
unkoやイノキを使ったユーモアある説明はクスッと笑える！😃
JavaScript初学者には超有益動画だと思います。
ありがとうございました！
1 週間前からHTMLとCSSの基礎を学び、その後もう一度この動画みたらめちゃんこわかりやすかった！
神動画すぎるから復習したかったんだけどyoutubeでjavascriptとかで検索するとしまぶーしか出てこなくて、javascript うんこって検索かけたら1位にでてきたよ。
まさかの検索方法ですねｗ
神認定あざます！😂
基礎のきを教えてくれる素晴らしい動画です。感謝！！！！！🙏🙏🙏🙏🙏
どうしてこんなに簡単かつ重要なことはほかのところでみつからないと逆に不思議に思います。
ありがとうございます！！
ほんとにこの話の流れ、動画の構成を見る・真似るだけでも就職成功できそうなほどお手本のような説明です…！
最近就活始めようとしてる院生ですが、とてもお世話になっております。今後も視聴させていただきます。
ありがたいお褒めの言葉😂
またうpしていくので何卒！
なんだろう、unkoで説明されると直感的にわかる… そしてスッキリする。
不思議な現象www
うんこ？
もらすなｗ
@@user-dr5ny3fx5k 世界共通言語にしよう
私も思いました
うんこドリル効果ですね
子どもたちの教材に
『うんこ』をつけると記憶力がつくようなんです
私自身も初めて効果を実感しました！
以前くじけてしまったjavascriptが、こんなに効率的にかつ実践的に理解できるなんて。
もっと早く見ておきたかった...
神チャンネルです！！
それな
凄く真面目に「ふむふむ」と聞いてたらたまに小ボケ挟んでて面白かったです！
もちろん内容も良かったです笑
😂😂😂あざます！
この動画は神レベルです。javascript の学習を始めたばかりで、よく分からず挫折気味でしたが、セイト先生の解説で理解が深まりました。
全ての初学者が見るべき動画です。
ありがとうございました。これからも続編や他の言語の解説をお願いします。
神認定ありがとうございます！ｗ
ぼちぼち他の講座もうｐしていきます！
セイト先生は実用性が高い講座をしてくれるので、とても助かります‼️
超初心者の私でもやれる気がします
嬉しいコメントありがとうございます！
ぜひトライしてみてください :)
短時間でここまでわかるように教えてくれるのめちゃありがたい。しかも無料！！
いえい！
いろんな動画やサイトで学習してますが、関数の説明はこちらが一番わかりやすいです。初心者にわかりやすい説明で助かります。
嬉しいコメントありがとうございます！😭
神動画。まじで。もっとこんなの作ってくれ
神認定あざます！😂
がんばる！！
飽きそうなタイミングでサクッとギャグを入れてみてくれるので最後まで楽しく勉強することができました
ありがとうございます！他の動画もチェックしてみます！
ありがとうございます！勉強がんばってください！
僕もエンジニア芸人として頑張っていきます！
この動画神です！！！！！！
超役に立ちます！！！！！！
即登録しました！！！！！！
直感的にわかりました。
この人は神だ。
嬉しいコメントありがとうございます！神ｗそんなｗ
次回もがんばります！
セイト先生👍
独学者です。めちゃわかりやすいです。Tiktokも面白いです！
TikTokも見つけてくれてありがとうございます！😂
めちゃくちゃわかりやすくて参考になりました！！
時折入ってくるunkoとinokiがそれまでの学習で凝り固まった頭をいい感じにリセットしてくれて、理解を助けてくれました笑
同意見
最初に学習した頃に見たかった笑
テキトーな名前だからこそ分かりやすい
そう。真面目な変数名だとそれにすら意味があってそうしなくちゃいけないのかと思っちゃうからありがたい
ちょうどWEBデザインの勉強を始めようとおもった時にこちらの動画にたどり着きました。
とても完結に重要な箇所に触れらていてとてもためになりました。
続きも是非見させていただきます。
ウレシスです！
Progateで一通りJSを学習してきましたがこの動画ではより具体的にどんなことができるのかや便利なツール、ショートカットなどを知ることができてもっとJSを活用してみたいと思いました！わかりやすい解説ありがとうございます！
あざます！！
安定・安心のセイト先生の講義。初学者でも迷子にさせない教え方がとても気に入っています！
サイド学習では他の方の講義も色々と見ますが、メインの流れを理解したり、初っ端に学ぶとき、立ち返って学習する際には決まってセイト先生の動画です！
嬉しい言葉感謝です！
とても分かり易かったです！
今後もたくさん更新して欲しいです！！
ありがとうございます！うｐしていきますー！
今もちょうどJavaScript講座の動画編集してますゆえ！
分かりづらいサイトも多い中、体系的に知識がまとめられていて非常に参考になります！
シンプルで要点がまとまっていたのと、実践のイメージがつきやすくめちゃめちゃわかりやすかったです！
次回も楽しみにしています！！mm
嬉しいコメントありがとうございます！
またタメになる講座作れるようがんばりますー！
全体構成の説明があって分かりやすかったです
最高です！おかげで短時間で理解できました！ありがとうございました！
おお、役に立って何よりです！
教え方がめちゃくちゃ上手い。笑いも誘いながら飽きさせないように工夫されてて凄いです！javascriptに対して凄く理解深まりました。もちろん登録させていただきました。
めちゃくちゃ嬉しいコメントありがとうございます！🥺
お恥ずかしながら４日かかってようやく終了しました。先生が書いた通りコードを打ち込んだだけですが、自分が指定した通り画面が動くのが感激で、もっとプログラミングの勉強を進めたくなりました。次のゲームも取り組みます！
お疲れさまでした！素晴らしいです😇
Progateやドットインストールで勉強している最中なんですが、
硬い言葉で分かりづらかったので
この動画を見ているとスラスラ頭に入っていって飽きる暇もなく動画終わってました。ありがとうございます！
よかったです！
あざます！
すごいわかりやすいー！！何で勉強しても関数でつまづいていたけど、初めてなるほど！と思いました。ありがとうございました！！！
あざます！！
真面目な講義から時折り出てくる「鳥貴族」、「unko」が好きです
ありがとうございます！
たまにふざけたくなっちゃう性分でして…
そのほうがキャラクターあるし、親近感湧きます！
自分も同じ感じなので
@@user-cx7pf9kd2p よかったですｗｗｗ
また隙あらばどこかで仕込みます！
有料でも余裕で見る内容。本当に感謝です。
ありがたいコメント…😭
今後もうpしていきます！
38:50 引数
非常に分かりやすかったです。
あざます！
仕事で急遽JavaScriptの知識が必要になったので、こちらの動画で勉強させていただきます。いつもわかりやすいお話ありがとうございます！
おお、参考になったなら幸いです！
JSの入門動画で最もわかりやすいです！
最も...！ｗ
ありがとうございます！😂
初心者には圧倒されてついていけなかったですが、とても貴重な体験
させてもらいました😅ありがとうございます。🙇♂️
ありがとうございます！
今後も初心者さん向け動画出しいきますので！！
8年前に見たかった素晴らしい動画☺️
これからプログラミングやりたい人にこの動画を見て欲しい。
すごいわかりやすいです。ありがとうございます！
ありがとうございます！！
progateでjavascriptやってもっとスッキリ理解したいなーと思ったらこの動画にたどり着きました。めっちゃ分かりやすいし。ひろゆき氏も何かものを作りながら学ぶといいと言っていたので、こういうことかと納得。
あざます！よかったー！
初めまして、最近プログラミング学習をはじめました！動画、とてもわかりやすい内容でした。ありがとうございます！次の動画も見ていきます！！
とても分かりやすかったです。
この1時間の動画でたくさんの発見がありました。
これからも楽しみにしています☺️
嬉しいコメントありがとうございます！！
また良い動画講座うｐできるようがんばります！
ほんとに分かりやすい。
全動画見ます！！
嬉しいコメントありがとうございます！！ぜひ！ｗ
21:26「unkoはHelloWorldした」
自分が今まで色々勉強してきて色々なハテナが生まれました。
ただ、この動画を見て、そのハテナを綺麗に回収することができました！
また、色々な動画を見てみたいです！
ありがとうございます！
おお、よかったです！
またボチボチ講座うｐしていきますので、よろしくですー！
本を読むより断然こっちの方が頭に入りました；ありがとうございました。
感謝です！
function で宣言せずアロー関数をいきなり教えるところが実践的で最高！
チャンネル登録しました！
おお、そこですかw
あざます！
@@webit7652 グラフの描画むずすぎてキレそうなので動画作成まってます！
alert('うんこ！');
ちょうどjsを学習中で壁にぶち当たっていました。でもこの動画を見たらあれ？意外と分かってると実感しました。何か自分の中で複雑に考え過ぎていたようです。話すテンポも良く頭にスッと入って分かりやすいです！！
一番わかりやすいと言われている初心者向けの本をやるよりもわかりやすいです！！
明日はクイズゲームやってみます！
HTMLもCSSも飛ばして、javasprictから勉強しようと思ってこの動画を初めて見ましたがすごく勉強になりました。途中で拡張子がjsにならなかったり、コンソールがcorsブロックされたりしてましたが、ローカルサーバー使用したら解決しました。次はアプリ開発の動画を見てみます。こんな有益な動画を無料で上げていただきありがとうございました。
その辺説明足らずでしたね💦
にもかかわらず完走できてすごい！お疲れ様でした！
JavaScript勉強し始めたのでこの動画見たけど、面白くて苦手なループ文も理解出来た(気がする)
感謝！
50分といいつつ、動画を止めて書いたり、調べたり、巻き戻したり、エラーが出てうわぁぁぁぁぁぁとなったりと
いつの間にか2時間半あっという間に過ぎているという。
JSでできることがなんとなくわかったのでちょっといろいろ遊んでみます。ありがとうございます。
実際はそうなりますよね笑
頑張ってください！
わかりやすっ！ww引数の説明うまっ！
あざます！w
とても分かりやすいです！！！✨
動画を参考に実際に作成させていただきましたが、この内容を無料で公開してるのはすごいと思います、、。😅
変数名もユニークな感じで楽しかったです💩
ありがとうございます！！！💩
早足でしたが、とても参考になりました。
ありがとうございます。
Bootstrap最強すぎやん笑今まで1から書いてたのが一瞬！！
とても勉強になりました。
今後JavaScriotを学んでいきます。
よかったです！ぜひ！
とてもわかりやすく面白かったです。有意義な動画でした。数多ある動画の中で、この講座で勉強出来たことは幸運でした。これからも、期待しています。😀
感謝です！
後半のjavascriptの基礎を爆速でやっていくのが良かった！
多分progateやるより数倍早い
私の国で勉強していたが、なんとか、日本語で説明できなくて、このビデオ見たら、めっっちゃ素晴らしかったな。。。。
感謝！！
めちゃめちゃわかりやすかったです！
これからセイト先生の動画で学ばせていただきます！
なぜかunko登場してから親近感が一気に湧きました。
あざます！unko!
趣味でプログラミング始め、この動画とクイズ動画３回見て勉強させてもらいました。理解が進みました。これからも動画楽しみにしてます。とても面白い方ですね！！
あざます！！！
最近プログラミングにどハマりしてるので参考になります！！
おお、なによりです！
プログラミング苦手なんですけど、とても分かりやすかったです！感謝です！
嬉しいコメントありがとうございます！！
感動の連続でした！
すごく勉強になります。
ありがとうございます！！！
ウレシスです！あざます！
すごくわかりやすい！
わかりやすくて感動しています。
ありがとうございます。
感動してくれてありがとうございますｗ
今後も更新していきますので何卒！
関数、引数の部分すごくわかりやすくて助かりました。また定期的に学習系の動画もアップしてもらえると嬉しいなぁ！
あざます！ただいま3本編集中です。長すぎて編集に時間かかってます😂
わかりやすすぎる
あざます！！
すごい分かりやすく解説ありがとうございます。50代でプログラミング歴４ヶ月の新参者ですが、今後も参考にさせていただきたいので
チャンネル登録しました😀
ありがとうございます！今後とも何卒！
2013年頃に独学でhtmlを学習した時に最も自分が疑問に思っていた事を具体的に解説されていてとてもスッキリしました。
当時はheadだのbodyだの全て手打ちするのが面倒で途中で挫折してしまいましたが、このようにコピペエンジニアリングするだけでそれらしいプログラミングがやはりできてしまうのですね。
当時は解説動画も無かったので素晴らしい時代になったのだと痛感しました。
ありがたや！
去年に何度くりかえしても理解できなかった関数がこの動画でだいぶ理解できた気がします。
トークもうまいのでスッと頭に入りやすい〜勉強させて頂きます！
何よりです！あざます！
良い動画！仕事でDBAやってる者です。やっぱりアプリとかも趣味レベルで触ってみたくて。
javaとかpythonとか文法は本でぱっと勉強したけど、やっぱなんか動かしたいなーというときこの動画嬉しかったです！
特にHTML/CSSを一から文法やるのめんどくさかったので（本気では取り組まないし）、文法を細かく解説しない感じが時間の節約になりました^ ^
私はよわよわDBAなので？何かを作って、動かす。ってshellかVBAくらいなんですが、GUI(ブラウザ)で何か動かす体験って結構面白いですねー。
チャンネル登録しましたので、今後も手軽に体験できる系動画よろしくお願いします！
ありがとうございます！
作ってみたいですよね。僕もどこで使うのかもわからない文法中心の教材で退屈した経験があったので、こういうのをやってみましたw
インフラ系で、でもCSSはいまさら、、と思う私でも良いなと思いました。bootstrapという単語も聞いた事ありましたが、具体的にコピペで活用する方法は初めて知ったので良いですね。let、constあたりも。
でも、bigUnkoはやめろーw
挫折しそうになっていたのに、はじめてﾌﾟﾛｸﾞﾗﾐﾝｸﾞを理解できた気がして、もうちょっと頑張ってみようかなと思い始めました。救われた気がしました。ありがとうございます。感謝です♪
嬉しい！よかったです！
テンポがちょうどいい！分かりやすかったです。ありがとうございます。
韓国から拝見してますよ。^^本当に役に立ちました。ありがとうございます。^^
なんと海外から…！！ご視聴ありがとうございます😇
初見でしたが、鳥貴族か！が面白かったので高評価しました笑
しかもめちゃめちゃ分かりやすかったです！！
大変参考になりました！
ありがとうございます！
嬉しいコメントありがとうございます！
鳥貴族がウケてくれたら僕の中では目的達成ですｗ
5月からの新人研修に向けて勉強させていただきます！よろしくお願いします！
すっごい分かりやすくて面白いです！
ありがとうございます
ありがとうございます！
大学の授業の100倍わかりやすかった❗️
あざます！！
めっちゃわかりやすい説明でありました！
あざます！
文字列の意味あいも教えてくれるのがほんとありがたい
意味がわかると理解もしやすいですよね！
面白すぎるww一週間前にこの動画見た時はついていけなかったけど今ならわかる🥺
よかった！あざます！
JavaScript初学者です。
とても分かりやすかったです。
ありがとうございます！！
めっちゃわかりやすくて、参考になりました。
日本語もjsの知識もよく受けたのは嬉しいです。
ありがとうございました。
わかりやすいですね！！
HTMLとCSSだけ書いたSublimeを放置してたんで、先生に倣って動的なページにしてみようと思います。動画全部観させて頂きます！ありがとうございます！！！
あざます！ぜひこれを機に！
5年前にこの動画を見たかった……
嬉しいコメントありがとうございます！😂
schooの時もCSSの授業よかったです。今回もありがとうございます。
おお、そんな前から知って頂けているとは…！ありがとうございます！！
さすがです。
こういった実用的な動画がセイト先生には合ってると思います。
競争相手は多いと思いますが、超わかりやすいので絶対もっと伸びると思います。
嬉しいコメントありがとうございます！もっと伸びてほしいなぁ…w
新しいことをやってみたいと思い最近勉強し始めた者です。HTML/CSSはなんとなく掴めたのですが、JavaScriptで詰んでしまい、独学では限界なのか？と思った矢先調べて出てきたのがこちらの動画でした。とても見やすくわかりやすかったです。また動画見させてもらいます！
参考になってよかったです！！
ふざけた例出してるのにそれが慣習だったりの割と重要なことに繋がってるの強い(強い)
いろんな動画をみて挫けそうになっていましたが、とってもわかりやすくて希望が持てました！
特に、初心者ながらに私が実行してみたいイベントの処理を実演してくださったところが参考になりました！
「とりあえず丸暗記」が苦手なので、ひとつひとつ理由を解説していただけてとても嬉しいです！記憶に定着しそうです！
ありがとうございます！ぜひ続けてください！
@@webit7652 今後も動画を漁らせていただきますので、よろしくお願いいたします！！！m(_ _)m
初心者でもわかりやすい！！！
big Unko!
めっちゃおもしろかったです！
感謝！
今までもやもやしてたのがすっきりしました！他のも見ます☺️
あぞます！！
おし、家帰って見るわ、まってて👍
鳥貴族か！って言ってるのみてこの人の動画最後まで見れるって確信した
そこｗｗｗありがとうございますｗ
ちょうどループで混乱していたので助かりました！速攻でチャンネル登録しました！
あざます！
めっちゃわかりやすかったです！
ありがとうございます！
あざます！
結構最高にわかる！！
ありがとうございます。
次も見ます。
よかったです！！また出します！
@@webit7652 ウンコかなって思っちゃうんだよな
無料だと申し訳ないので細やかですが！
いつも参考にさせていただいております！
ありがとうございます。
おお、TH-camの新機能！
ありがとうございます！
質問失礼します。
Dark
の「ml-1」がブラウザ側で反映されません。
Alertの「margin top」は反映されます。
動画との違いを上げるとすれば、ボタンの種類が違ったりブラウザがFireFoxであることぐらいです。
一応の中身を貼っておきます。
A simple danger alert-check it out!
Dark
Dark
Dark
Dark
初心者で初めての質問なので、わかりにくい点があると思いますが回答していただけると幸いです。
うーんなんででしょうね…
ただとりあえず言えることは、あまり初めの内はアレンジ加えず動画の内容通りやった方がいいですよ〜。
アレンジ加えて謎なところでバグるのは初心者さんあるあるです！
↑それにこのソースコードの綺麗さは、少なくとも僕の書いたものより残念ながら劣化してしまっております。
@@webit7652 返信ありがとうございます！
わかりました。まずは完コピしてみます。
実は他の方の動画を参考にしながらやっているときに、同じようなバグがおきました。
必ず両方仕上げます！
遅れましたが一応報告します。
できました！
でもやっぱりml-1は反映されなかったのでcssでずらしました。
ありがとうございました。
来年から新卒でエンジニアになる者です！ユーモアもあってほんとにわかり易い！
ありがたや！