【JavaScript超入門講座】定番UIの”タブ”を実装しよう！【初心者でも◯】

Подписаться 121 тыс.

Просмотров 82 тыс.

50% 1

↓こちらもよければチェックしてみてください〜
👩‍💻ゼミ形式で学ぶプログラミング研修「SiiD」
• 【ご報告】プログラミングスクール的な事業を始めます
👨‍💻エンジニアによるキャリア相談「EEE転職」
• 若手エンジニア皆さんの転職やキャリア相談にのります
------------------------------------------------------------------
【無料メルマガ】より深い情報発信をしてます！
my131p.com/p/r/Ym43EzoZ
【LINE】メール見るのだるい人向け、簡易版の発信
lin.ee/eR6BXOD
【お問い合わせ】お仕事のご依頼先
seito@bug-fix.org
【目次】
00:00 はじめに
01:33 今回のゴール
02:02 HTMLのコーディング
08:10 CSSのコーディング
12:54 JavaScriptのコーディング
・初期化
・イベント処理
・DOM操作
・リファクタリング
47:55 さいごに
【動画内のサンプルコード】
github.com/seito-developer/js...
【兄弟動画】
今回の動画に必要なJavaScriptの基礎文法は下記の動画で解説してます！
『【JavaScript入門】わずか50分で知識ゼロから基礎をマスター！』
• 【JavaScript超入門講座】わずか50...
🔽セイトのプロフィール
今はLIG Philippines Inc.て会社でVPoEしてます。
親会社のLIG Inc.含め、エンジニア中心としたクリエイティブ職採用では採用戦略〜最終面接を実施してます。
【Twitter】プログラミング／ライフハック系の話を発信してます！
/ seito_horiguchi
【TikTok】ショート役立つ話／あるある話
/ seito2020
🔽セイトのJavaScript動画
#1『【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター！』
• 【JavaScript超入門講座】わずか50...
#2『【JavaScript超入門講座】基礎文法だけでクイズゲームのアプリを開発！』
• 【JavaScript超入門講座】基礎文法だ...
#3『【JavaScript超入門講座】定番UIの”タブ”をカンタンに実装しよう！』
• 【JavaScript超入門講座】定番UIの...
🔽オススメの関連動画
プログラミング学習前の準備やら全体像やら把握されたい人はコチラがオススメ！
『【初心者向け】プログラミング学習の始め方【３ヶ月で達成できる】｜マナブ』
• 【初心者向け】プログラミング学習の始め方【３...
『プログラミングにはやってはいけない勉強法がある！？爆速で成長する王道のプログラミング学習法を紹介！｜東京フリーランス』
• プログラミングにはやってはいけない勉強法があ...
🔽Special Thanks
動画編集：@nao_nao_723 さん
画像素材：いらすとやさん（www.irasutoya.com/）
#無料メルマガとLINE始めました

Наука

Опубликовано:

26 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 99

@webit7652 Год назад

↓こちらもよければチェックしてみてください〜 👩‍💻ゼミ形式で学ぶプログラミング研修「SiiD」 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WYU2Git8dRg.html 👨‍💻エンジニアによるキャリア相談「EEE転職」 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MNTzNFGgmYI.html

@syo-roku6824 3 года назад

Udemyで有料化しても買っちゃうくらい良い動画なのにRU-vidで無料で見させてくれるとかセイトさん最高

@webit7652 3 года назад

恐縮です！

@user-zj5th9fq9q 3 года назад

プログラミングガチで初心者なので本当にありがとうございます。誤字脱字でエディタとブラウザ往復の無限ループ文になってますが、何回も見て勉強させて頂きます。これからも有益な動画楽しみです！

@user-hf6ln1ok2j 3 года назад

分かりやすかったです！今後の動画も楽しみです！

@webit7652 3 года назад

ありがとうございます！今後も更新していきます！

@ninemode_mode7095 3 года назад

セイト先生のプログラミング講座の動画がyoutube内で一番わかりやすいです。初心者がやりがちな間違いとかワザと盛り込んでくれているのも指摘です。javascriptの続編、pythonの続編ともに期待しています！

@webit7652 3 года назад

あざます！！うれしい… 次JSの講座来週出ます！

@masakabuto 3 года назад

今回も、すばらしい内容でした。ありがとうございました。この冬、引きこもりながら勉強します。さあ、次の動画だ！！！

@webit7652 3 года назад

あざます！レッツ引きこもり！

@yoheyyoutube1267 3 года назад

動画もギャグも最高です！！！

@webit7652 3 года назад

ありがとうございますｗｗ

@wataru9320 2 года назад

"先生のJavaScriptの動画見る"→"参考書進める"という順番でどんどん進めると理解がすごく早くできてる気がしてる。ど初心者だけどいつか先生に追いつき抜けるようにまずはコピーさせていただこう^_^本当にいつも最高の動画をありがとう！

@user-nq7jt1qr7s 3 года назад

分かりやすすぎて泣いた

@yujitanesaka8996 3 года назад

48:47 リポジトリ内　の甘噛みが最も面白かったです！

@webit7652 3 года назад

そこ！？😂

@user-cc3ht4bb6q 3 года назад

文法は分かるけど、実際に機能としてどう実装していくのか... それがわかる素晴らしい動画でした！

@webit7652 3 года назад

ありがたや！

@user-ic2xd3rk2b Год назад

本当に最高の動画をありがとうございました。

@webit7652 Год назад

観てくれてあざますｍｍ

@user-lb4hf2wg1h 3 года назад

タダほど怖いものはないって習ったのですが、こんなに有用な動画をたくさん無料で見れちゃっていいんですかね・・・寿命縮みませんかね・・・感謝感謝ですありがとうございます春休みを使ってjavascriptの学習頑張ります

@webit7652 3 года назад

頑張ってくだしあ！

@curiousitit8561 3 года назад

私はJavaScriptの教本を読み終えたとこですが、セイト先生さんの動画で理解がとても深まりました。とても感謝しています。追伸:サンプルで使用されるワード「unko」に時折持ってかれて頭に入らない時があります。これからも応援してます。

@taka-no-me9 Год назад

毎度ありがとうございます！

@webit7652 Год назад

SuperThanks!! ありがとうございます＞＜

@bun1773 3 года назад

何度もかぶせてきていた「かぶ」伏線だったんですね^-^ 見つけた時喜びました。基礎編＋3本のJavaScript動画がなければ多分もうくじけてました。助かりました。ありがとうございます。

@webit7652 3 года назад

誰も気づいてないであろうしょうもない伏線によくぞ......ありがとうございますｗ

@kk-nt7qd Год назад

わかりやすく何回もみて練習してます。これに内容を【閉じるボタン】の追加の動画もできれば最高です・・・

@burgabart 3 года назад

先生ありがとう

@user-uz7wn6zb1c 2 года назад

こんばんは☺️JavaScriptの理解を深めたくて、何回も拝見してます。関数は、難しいですね💦 これからも、動画　楽しみにしてます。いつも、ありがとうございます😊 コンピュータと会話する…でしたっけ？セイト先生が言ってあったこと、響きました！

@user-im1eb9wl6v 3 года назад

習ってるうちに、これもできそうあれも出来そうってなって寝る時間がかなり減っちゃいました…綺麗なプログラミングって楽しいですね！

@webit7652 3 года назад

おお、素晴らしい… そうです、楽しいんです。楽しんでいきましょ！

@user-fn3zi4uy3w 2 года назад

これちょっと応用するだけで、ToDoList作れちゃうの凄いな

@webit7652 2 года назад

ぜひ！応用してください！

@user-he4si5fj1g 3 года назад

JS初心者の身からすると後半の内容が少し難しかったですがなんとか大まかな内容は理解できました！自分で一からつくるにはまだまだ厳しそうなのでもう少し復習したいと思います…🤔

@webit7652 3 года назад

あざます！ 1作目、2作目の動画もよければ！

@TT-zy7ku 2 года назад

data属性使えば繰り返し処理でバインドできそうですね。タイムリーフでやってました。読みにくいのでもっと早く知ってれば良かったです。

@user-gp7rm8sg2f 3 года назад

勉強になりました！ありがとうございます！！とんでもないスピードで CSSの土台を作ってたの感動しました！やり方を教えていただけると嬉しいです！ググってもよくわかりませんでした。。

@webit7652 3 года назад

あざます！今度その辺も取り上げてみましょうかね…！

@user-gp7rm8sg2f 3 года назад

@@webit7652 返信ありがとうございます！是非！！動画になるの楽しみにしてます！！

@user-ct3pe5fz8p 3 года назад

8:49 この行末だけを複数選択するショートカットキーは何でしょうか？

@ygy182 2 года назад

勉強になりました。とっともよかったです。 JSを学ぼうとしていろんな動画を探してきましたが、これは最高です( ´∀｀ )。ありがとうございました。ちなみに、JSを使用して、チャットしてくれるLINEボットが作れますでしょうか？もしそのような動画があると、助かります。

@Nah_Id_w1n_ 3 года назад

display:flex;のとこ、写ってるのが完成系の方だと気が付かずに「え？なんでtab-navとtab-contents紐付けされてるの？flexだけでこんな見た目変わる？」って感じで30分くらいコード見比べてました()

@user-tw3ge3on2n Год назад

addEventListenerの第二引数なんですが、ラムダ式の処理部分に関数を入れているということでしょうか？コールバック関数(handleClick)に引数(e)があるために、無名関数((e)=>)で包んでいるような解釈であってますか？第二引数内に、引数らしきeが2つあるので不思議に思ってしまいました。

@eich4268 3 года назад

29:00 あたりのところなのですが、preventするくらいだったら最初からアンカリングタグにしなけりゃいいやんと思ってしまいます。アンカリングにする意味があったら教えていただきたいです。

@user-ei3qt4kb9d 3 года назад

え！昨日頑張って作ったのに😭 昨日見たかった😭

@webit7652 3 года назад

ぜひ2個目の制作を…ｗ

@millmill_milk 3 года назад

Hello Unko!

@user-yq8zc7go9v 3 года назад

progateしかやっていない身としては結構難しかった。。繰り返し勉強します！

@webit7652 3 года назад

何よりです！

@mistron92 3 года назад

現在初めてのプログラミング言語としてJavaScriptを勉強してるのですが、その次は何を勉強したらいいと思いますか？ htmlCSSを学んで何かを作ろうと思ってるんですけど…

@webit7652 3 года назад

とにかくJSでなんか作ってアウトプットの繰り返しがおぬぬめです😇 あと他の言語にあまり目移りしないほうがいいっすー

@mistron92 3 года назад

@@webit7652 返信ありがとうございます。この動画でもある通りJSを使うならその二つも基礎くらいは抑えておいたほうが良いと思ってたんですけど違うんですね…

@user-oy2kl5le3u 3 года назад

クラスを複数当てた場合IEではそのcssが当たらなくなります例).tab-nav-item.is-active この場合はどうするのがいいのでしょうか？普段はsassなどでネストにして .tav-nav .tav-nav-item{ } .tav-nav .is-active{ } としています。

@webit7652 3 года назад

複数クラスと子クラスをごっちゃにしてませんか？？複数クラス、で調べてみてください！

@user-yr4np7bl3n 3 года назад

繰り返し処理を使う際にwhile文を用いていますが、for文を使わない理由は何かあるのでしょうか？

@webit7652 3 года назад

どちらでもお好みで！

@user-uu6ft3nm2w 3 года назад

28:00 クリックイベントeの話

@user-os4ty2fk2p 3 года назад

(e)の概念が難しい・・・。とりあえずeventオブジェクトを使用する時は引数に(e)と記述すればいいのかな？

@webit7652 3 года назад

むずいっすよねーでもそれであってます！

@user-catBrathers 3 года назад

配列の全要素走らせるのにforEachって使うのは危険ですか…？ (メモ) ・jsは即時関数を用いる・DOM要素は$…と変数を置く/定数は大文字・jsで使う属性はdata-***を用いる・jsで使うidは"js-***"とする

@webit7652 3 года назад

いいんじゃいすかね！

@user-NO_NAME192 3 года назад

他で説明されてたら申し訳ないんですが、リファクタリングの時に同じ文字列を同時に書き換えるのってどのキーでやられてるんですか？

@webit7652 3 года назад

cmd + Dのことかな！(Mac) Windowsはctrl+D！

@user-NO_NAME192 3 года назад

@@webit7652 ありがとうございます！ショートカットキー知ってた方が便利ですねこれ

@anne34879 Год назад

タブって皆んなjavascript使って書くんですか？それとも他の言語を使うのが主流なんですか？

@user-vp4cg1dr9g 3 года назад

クイズ作った時には即時関数使ってませんでしたがクイズの方を放置しておくと他のJavaScriptのコードにも侵入してくるのでしょうか？

@webit7652 3 года назад

その通りです！

@user-gf3zo5it2m 3 года назад

対象のコンテンツをアクティブ化するところの、 [data-content=" ' + targetVal + ' "]って他の書き方ありますか？うまく飲み込めずにいます。。

@user-oh7le5fd2p 3 года назад

以下の書き方でも同じ動作になります。 $content[targetVal].style.display = "block";

@user-gf3zo5it2m 3 года назад

@@user-oh7le5fd2p ありがとうございます！助かります！もっと勉強します。

@user-jk5fk6yl2q 3 года назад

なんでこんなに早くコーディング出来るの ❓️ 私ならこれだけで一週間はかかるよね 😱

@user-eb8fd2zl3s 3 года назад

プロゲートのJavaScriptもやって、 JavaScript超入門講座みたけど、8割型さっぱりわからん。どうしよ変数定数引数戻り値ループ文はわかるけど。 $tabとかの$ってどこの動画で説明してるんだろう、見落としたかな

@user-qh1de4kx3h Год назад

8:30 20:31 21:31 28:27 32:15

@user-gu2qq4dr4i 3 года назад

参考にさせていただいております。業務でCADを使っているのですが、JavaScriptで一部作業を自動化したいと考えて勉強を始めました。作りたい物のイメージはあるのですが、JavaScriptで他アプリが動くイメージが掴めていません。何か良い例をご紹介いただけませんでしょうか。

@webit7652 3 года назад

あざます！アプリの仕組みを解説した動画があるんですがそれとかどうでしょう？ ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qIRtN61gMfQ.html

@aronmozu7121 3 года назад

nodeを使用してmy SQLと接続する動画が見たいです。

@webit7652 3 года назад

やりますかー！

@user-jk5fk6yl2q 3 года назад

範囲内の変数や定数を【読み上げるソフト】って無いですか ❓️ エラーが出た時変数名や定数名などタイプミスしてる箇所を探すのに 🙄 目で追うのは本当に疲れるんですよね 😖 変数を読み上げてくれると一発でタイプミスした箇所を探せるんですが m(_ _)m

@webit7652 3 года назад

概要欄にも貼ってあるプラグインのKite とVS Codeがおすすめです！

@user-dn1vd3wq6c 3 года назад

9:01 余計なところを消すというショートカットキーが存在するのでしょうか？調べ方が悪いのかわからないので、どなたか教えてください。お願いします。

@webit7652 3 года назад

そういうショートカットはないですねん💦

@user-dn1vd3wq6c 3 года назад

@@webit7652 返信あざます。 9:01の[余計なところ消していきます。]の時の操作方法がわかりません。不要なスペース消すとか、カーソルで合わせた点を下に伸ばす方法があるとお見受けしました。伝われば良いのですが、教えて頂きたいです。🙏

@user-zx9kt1gw2h 3 года назад

@@user-dn1vd3wq6c ▼▼▼不要なスペース消す？▼▼▼ これを .tab .tab-nav .tab-nav-item ↓ こうしたいなら .tab .tab-nav .tab-nav-item 範囲を選択した上で[shift] + [tab] ▼▼▼カーソルで合わせた点を下に伸ばす方法？▼▼▼ (B)これを .tab .tab-nav .tab-nav-item ↓ (B)こうしたいなら |.tab |.tab-nav |.tab-nav-item [alt] + [shift] + [.tabの頭から.tab-nav-itemの頭へドラッグ] ↓ (B)さらにこうしたいなら ↓ .tab| .tab-nav| .tab-nav-item| [ctrl] + [左矢印キーを押す]

@user-dn1vd3wq6c 3 года назад

@@user-zx9kt1gw2h 丁寧に返信頂きありがとうございます。本当にありがとうございます。m(_ _)m