JavaScript入門・完全版コース／プログラミング初心者向け、コスパ最強講座
Вставка
- Опубліковано 5 лип 2024
- 👩💻セイトが運営するプログラミングスクール・研修事業「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やってます - Навчання та стиль
↓こちらもよければチェックしてみてください〜
👩💻ゼミ形式で学ぶプログラミング研修「SiiD」
ua-cam.com/video/WYU2Git8dRg/v-deo.html
👨💻エンジニアによるキャリア相談「EEE転職」
ua-cam.com/video/MNTzNFGgmYI/v-deo.html
------------------------------------------------------------------
超初心者なのでとても参考になります！！ありがとうございます！！
少しずつ勉強してるので、自分用に失礼します…。
【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
助かります。
１周目終わりました！何回も見直して自分の力にできるように頑張ります！わかりやすい動画作ってくださって本当にありがとうございます😭！
ちょうど古い動画を見始めたところに、補足を追加したまとめがアップされたので助かりました。分かりやすくて良かったです。
いいタイミングw
ありがとうございます！
わかりやすくてとても勉強になりました！これからも応援しています！！
感謝です！
リファクタリングのあたりはプロ感がすごくてびっくりしました！
実務イメージが少し湧きました！ありがとうございました！
部活でやってるので
いつも見させてもらっています
自分の理解力が少なくて覚えたことは少ないですが
毎回ひとつ何かを作りながら
単語の意味説明分かりやすいです
これからもよろしくお願いします
ありがとうございます！！ぜひ繰り返し使ってください💪
とてもためになる動画でした！ありがとうございます！
すごい。本当にありがとうございます。
神講座🤓
ありがとうございます! とても分かりやすいです!
応援してます。
感謝です！
完全版ですね！！！✨
高評価ポチらせていただきました😊
いつもありがとうございます！！！
高評価ありがとうございます！
色んな方の動画見させて頂きましたがセイト先生の解説内容がダントツで分かりやすかったですし、コード書くのが好きになりました！もしお時間があればJavaScriptの方も中級者向けの動画出して頂けませんでしょうか…🙏
クイズゲーム、タブ、アコーディオン作成、それぞれ課題が設定されており非常に助かりました。 PBLメインのSIID期待してます。
ありがとうございます！
いつも勉強になる動画ありがとうございます。
やっと半分まで進みましたが、めげそうです・・・
何回も見て、理解できるよう頑張ります。
動画自体長いですからね笑
ゆっくり頑張ってください👍
動画自体長いですからね笑
ゆっくり頑張ってください👍
マジで役に立つ、progetも利用しているけど、この動画を無料でみられるとは超ありがたい
ウレシス
きたーーー！🙌
セイトさんの動画わかりやすくて楽しいです。
感謝！
phpとPythonをほんの少しずつかじって勉強してますが、似てるから面白いですね！
天才動画をありがとう。
ちょうどJavaScriptへの転換が来ていたので助かりました。
使ったってください！
@@webit7652
有り難く！喜んで！！
様々なudemy教材よりもめちゃ分かりやすいし楽しいかも、定数unko2で笑いました！基礎編終わって理解進みます。ありがとうございます！
感謝！☺️
人生で初めて触れたコンピュータ言語がC言語でよかった。ヌルヌル理解出来る。
ありがとうございます！
怒涛の変数unkoラッシュで笑ってしまった
JavaScriptが未経験で今回この動画で初めて学ばせていただきました。
率直な感想としては完全未経験の自分にとっては難しかったです。。
なぜこうするんだろう？とかなぜこういう書き方をするのだろう？と思ったら自分で考えたり調べつつ行わないとただの板書になってしまう気がしました。。
ただそうこうしてるとどんどん動画は進んでしまって、、
もしかしたらどこかである程度学んだ人だったら、すんなり頭に入る内容なのかもしれません。
最高でした！！！ありがとうございます。
実際に書きながら進めたら6時間くらいかかったと思いますｗｗｗ（止めて書いてを繰り返して）
すごい！おつかれさまでした！！
セイト先生はHTML&CSS以外を先に学ぶことをお勧めしていました。なのでこの動画を見てJavaScriptを勉強しています。大変助かっています。Web制作をしたいので、視聴後はHTML&CSSと同時並行でJavaScriptの勉強した方が方がいいですか？
セイト先生の講座はわかりやすく、そして楽しく吸収できるので為になります
バックエンド一辺倒な自分でしたが、これを機にJS等にも触れていこうと思います
ありがたや！！！
ありがてぇ!
めちゃ助かる 理解が捗りましたああ
$〜 はHTMLを表してるっての大事ですねー！
よかったぁ☺️
let iよりunkoのほうが頭にスッと入ってくる不思議！
引数
49:25
本当ありがとうございます
今日から見て行きます
頑張るぜー〜！
真顔でunko言うのシュールで草
あざます！
基礎文法終わりー！
30:38 console.log と打っても色がつかない、候補に出てこないのですがなぜでしょう？BBEditなるエディタを使っていますが種類によるのでしょうか？
定番UIの作り方の所で、クリックしたら起こるイベントの下のhandleClickが読み取られることはありませんと出てしまいます。何か改善策はありますでしょうか？
2:00:19のis-activeの前になんでスペースがあるんですか？
htmlの属性ってスペース入れられるんですか？
HTML、CSS、JavaScriptを使用したハンバーガーメニュー🍔についての解説動画、みたいです☺️❣️
23:23の「囲ってあげてください」の具体的な動作がわかりません。表示されてる通りにしたのですが範囲指定のコードの右側に表示されている縦線が出てこないのでおそらく範囲が指定されてないからかボタンが中央表示になりませんでした。よろしければご教示の程よろしくお願いします。
初見です。bigUnkoは耐えられませんでした。
boiler plateのダウンロードのやり方を教えて下さい。どうやら、動画のようにダウンロードできないようです。
勉強させて頂きます(^^)ありがとうございます☆
今までどの動画見てもしっくりこなかったけど、なんかめっちゃするっと入ってきた笑
神ッ
激アツ
Javascriptの理解が深まりました。ありがとうございます。forEachの使い方を知りたいです。
お世話になっております。
エディタにて「ERROE: ''question' is assigned a value but never used. [no-unused-vars]と表示されてしまいエラーになってしまいます。原因がわからず困っています。
まさかunkoとgoToiletでオブジェクトの理解を深められるとは思わなんだ...
奇跡www
メモメモ
var 再宣言⭕️再代入⭕️
（同じ名前でもう一回作れちゃう）
let 再宣言❌再代入⭕️
（ダブりのない変数）
const再宣言❌再代入❌
（もう変わることのない定数）
クイズゲーム終わったら一旦html,cssとjsを詳しくやってる動画みないと初心者にはキツイかもしれないです
質問です。
こちらで作らせていただいたクイズアプリケーションを知り合いに共有したいのですが、どのようにすれば出来ますでしょうか。
サーバーに上げてURLを共有したい、という意味かな...？
この辺見るといいかもです
ua-cam.com/video/Hbxulm8iXSA/v-deo.html
vscodeのemmetという機能でHTMLの雛型を作ったんですけど、この動画に書いてある、ひながたと微妙に違うんですけど、今と昔で変わってりしてるんでしょうか？それとも自分で付け足さないといけないんでしょうか？返信していただいたら幸いです
あんまり気にしないでいいレベルの差異かなと思うです
返信ありがとうございます！気になっていたのでがちで助かります！これからも動画投稿頑張ってください！
何回見てもunkoってのが笑ってまう笑笑
19：32秒の上書きってどうやってやるんでしょうか？
定番UIの動画にて、htmlで各tab-nav-itemをaタグで作成されていますが、どういう意図でしょうか。例えばdivで作れば、preventDefaultで打ち消す必要がないと思うのですが。別のタブへ遷移するからaタグを使用されているのでしょうか。
divでもだめじゃないですが、「元々クリックされたることを前提としているタグ」を設定するほうが仕様的に自然なのでそうしてます。
タブでなくとも、ページ内リンクとかもaタグで実装するのが自然です
そういう意味でいうとbuttonタグでもいいですがbuttonだとデフォでCSSが色々ついていてそれをリセットするのが結構な手間なのでaタグに
青いアラート枠の上にボタンが来るのですが、どうすればいいですか？
2:24:00 "[data-content='" + targetVal + "']"
+ targetVal + はなぜダブルクォーテーションとシングルクォーテーションで囲まないといけないのでしょうか？わかる方がいましたら、教えていただきたいです。
文字列の中にクォーテーションを含めたい時に、外側のクォーテーションと同じ種類のクォーテーションを含めると、途中で文字列が閉じてエラーが出てしまいます。そこで、文字列を囲む外側のクォーテーションと文字列中で異なるクォーテーションを使用することで、これを回避しています。
今回の例では[data-content="targetValの値"]という文字列を作ろうとしています。=の右側の部分はクォーテーションで囲まなければいけないという記述上の規則があるので、外側のシングルクォーテーションと区別してダブルクォーテーションを使用しています。
質問させてください。1:18:18ぐらいのボタンのテキストを書き換える作業ですが、
document.getElementsByTagName("button")[0].textContent = answers[0]; と書きましたが、一番左のボタンがスーパーファミコンにならずPrimaryのままです。
試しにconsole.log(document.getElementsByTagName("button")[0].textContent = answers[0]); と書いてコンソール画面(?)を見るとスーパーファミコンと出てくるので、書き方は間違っていないと思うのですが、どうもボタン上の文字が書き換わりません・・・。
何か原因分かりますでしょうか？？
ちょっとその情報だとわかりませんが、一つ言えるのは動画の通りに正確にコードが書けていれば必ず動画通りの動きになるということです。
そうならないということはどこか間違えてコードを書いているのではないかと。
動画内でもお伝えしていますが、概要欄に実際のコードへのリンクがあるのでそれとご自身のコードをよく見比べてみてくださいｂ
さっそくのご回答ありがとうございます。やはりどこかが間違っているということですね。よくよく見比べておかしなところがないか確認してみます！
まったくの初心者です。
BootstrapのCSSonlyが見当たらないのですが…
1:56:41~
Ctrl + dで選択するところまでは分かるのですが、選択後に右端まで指定部分を広げるやり方が分からずモヤモヤしています。。。
もし良ければ教えて頂けるとありがたいです。
ctrl, shift, 矢印キーかな？
@@webit7652
なるほど。。。
スッキリしました！ありがとうございますん！
ダウンロードしたboilerplateのファイルの中にindex html がない場合どうすればよいでしょうか？？
絶対見落としてる！
まあ概要欄にあるソースコード全部貼ってますんでそっち見てもいいかと
タブ制作の以下の件、
$tab.querySelectorAll('[data-content="' + targetVal + '"]')[0].style.display='block';
説明がわからない。。。
プロゲートを見たので、こちらにチャレンジしてみます！44歳プログラム初心者。
おお！ぜひ頑張ってください！
2:07:50辺りの所で$nav＝$tab.略 としてますが$docではないのですか？ログで見たら結果は同じでしたが。$navには$tabのId値が入ってる（普通の代入のイメージ）だけなのにdocumentの要素をとれるんですか？つたない質問で申しわけありません。
初めまして、プログラミングの言語はcadソフトみたいにお金がかかるんですか？
かかりません！
Wunderlist なつかしいなぁ。
ブックマークバーって古くなりがちな気がする。（最新のものは、inbox的なところとかフォルダにどんどん入れていく傾向がある。）
もう、みんな『Microsoft To Do』使ってるかな？
1:34:18のwhile分へのリファクタリングをコード全く同じで実行してもボタンがprimaryに戻り正解・不正解の表示も出なくなります。
何故でしょうか。
残念ながらわかりません。サンプルコードと見比べてみてください
1:56:40でやってる一部分だけ一括で選択するやり方知りたい、、、、、！
いつも、勉強の為見させて頂いております。
クイズゲームを作成したのですが
一問目の問題、選択肢が表示されずに不正解、正解は表示されます。
二問目三問目は表示され最後の終了のウィンドウも出るのですが注意してみた方が良いところなどありますでしょうか？
ヒント：概要欄に載せているソースコードと自分のコードを見比べてどこが間違っているか見比べよう
@@webit7652
ご返信ありがとうございます！
やってみます！！
boiler plateがダウンロードできません。
セイト先生と同じサイトは開けているのですが、ダウンロードボタンが「はじめる」という風になっていてよく分からないです。分かりにくい説明ですがご教授お願いいたします、、泣
ボイラープレート、仕様変わっちゃったみたいです。
概要欄にソースコード貼ってあるのでコピペして活用してみてね
github.com/seito-developer/js-tutorial/blob/master/index.html
1:56:41 どうやってるんですか？
一番最初のダウロードができないです😢
bootstrapの仕様が変わっていてcss onlyが見つかりません
今のbootstrapならどれをコピーすればいいでしょうか
バージョン変えたらできました
動画通りにしたい場合はv4ですね
getbootstrap.jp/docs/4.2/getting-started/introduction/
cootstrapのサイトの仕様が変わっていて、CSS onlyが見当たりません、、、
同じくです、、、
それなです😭
何度も確認して間違いがないのに、alertが機能しません。そのせいで次の問題の進むことができません
index.htmlのとの間に文字を入れてブラウザで見ても、ブラウザ上で入れた文字が表示されません。どういうことでしょうか...
ヒント: 閉じタグができてない
よーく動画見てね！
サンプルコードからコピペしてみてね！
16:55
こちらのサイトが現在仕様変更されて、DownloadというボタンではなくGet Startedというボタンになっています
さらに、GitHubに飛ばされて初心者にとっては最初で詰んでしまうので、最新版お願いします...
ご指摘ありがとうございます！3年前の動画なので、現在最新版を作成し直しております。なるべく早くにアップします！
どなたか教えてほしいです。
17:02 のボイラープレートでダウンロードと出ません。
何か別の方法をご存知な方はいらっしゃいませんか
ボイラープレート、仕様変わっちゃったみたいです。
概要欄にソースコード貼ってあるのでコピペして活用してみてね
github.com/seito-developer/js-tutorial/blob/master/index.html
boilerplateのテンプレ見つけましたが動画のコードと違っているのですが問題ないですよね
ちなみにこれです
A simple primary alert-check it out!
Primary
Primary
Primary
Primary
誰か目次を作っておくれー
HTML5Boilerplateの始めようを押した後どうすればいいのかわかりません。
ボイラープレート、仕様変わっちゃったみたいです。
概要欄にソースコード貼ってあるのでコピペして活用してみてね
github.com/seito-developer/js-tutorial/blob/master/index.html
Pythonやって下さい！！！！
やりますかー！
//を一瞬で数行に当てるのはどうやるのでしょう？（汗
いじくり倒して解決しました（汗
//を当てたい範囲にCtrl＋/ でした
26:40 の所で困っています
index.jsを書いても後ろに .html が自動で付いてきます
パソコン自体少し前まで触って来なかった為知識も少ないです
教えていただけるとありがたいです
エクスプローラーやFinderではなく、VSCode上でファイルつくるようにしましょう
@@webit7652 左上の New File から index.jsを打ち込んだら JS Fileが作れました。
ご丁寧な対応ありがとうございました。
16:46
HTML
19:08
CSS
鳥貴族よりコスパ良すぎます。
あざます！ｗ
index.htmlってのがないんですけどどうすればいいですか?
めっちゃその質問くるけど100%あります、見逃してるだけです＞＜
侍テラコヤってどう思いますか？
SEOが超強い！
問題を増やしてからうまくいかなくなった...
1:02:00
基礎文法チュートリアル終わり
お疲れ様！！
文末に;書かなくても実行できるんですけど書くのはなぜですか？
それでも動いちゃうのがJS。
なるほどです。
返信ありがとうございます。
unkoがHallo world！したとか真顔でいわんでくれｗｗｗ
2:24:55
unkoが出てきたとき笑った
変数の癖が凄いw
てへぺろ
2:31:11
28:56何打つのかと思ったら唐突のうんこで草生えた
仕様が変わって最初のダウンロードがまず出来ない
どれのことを言ってるのか、具体的に言ってもらえたら助け舟出せるかと！😅
bootstrapのCSSのとこコピペしたけど読みに行かない。。。。
できました。すいません。
21:59
どうやってやるんですか？
選択してTabキー！
@@webit7652 ありがとうございます！