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