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