ขนาดวิดีโอ: 1280 X 720853 X 480640 X 360
แสดงแผงควบคุมโปรแกรมเล่น
เล่นอัตโนมัติ
เล่นใหม่
⚠コメント追記しているので「続きを読む」を押してくださいモダンJavaScriptを理解する上で最も重要なモジュールの基礎講座です。まずはES Modules形式（ESM形式）のモジュールについて見ていきます。CommonJS形式（CJS形式）と間違えないように注意しましょう。次回は import / export の書き方を学びます！✨-- 追記部分 --動画内で伝えること忘れていましたが、モジュールは基本的にはビルド前提で使うことが多いです。type="module" が IE が動かないのでそのサポートや、コードの最適化（例えばコードの圧縮や未使用のコード削除など）、他にも非常にたくさんのこと（TSの型削除やES2015を使えるようにするなどなど、説明しきれないぐらい多いです）が求められるので、 webpack などでビルドして使用するのが一般的です。なので、この動画のように素のJavaScriptでモジュールを書くことは機会としては少ないですが、ただ今回の基礎的な部分を抑えていないとモダンなJSを理解することができないと考えているので、まずはこちらから解説しています。
めちゃくちゃわかりやすかったです！初心者エンジニアを抜け出すために必須の内容だこれは、、、正直1回見ただけじゃ全部理解できないので、繰り返し見てます。
めっちゃわかりやすかったです！ありがとうございます！
モジュール解説はありがたいです。モジュールは初心者用書籍や解説サイトには詳しい解説はなく自分で調べたり中級者書籍を見ると一気に難しくなるので挫折しそうになります。しまぶーさんは動画で基本的なところや歴史を紹介してくれるので流れがわかりJavaScriptの理解が進みます。
とても役に立ちました。ありがとうございます！
モジュールがない場合とある場合で比較することで便利さを理解することができました😊また、テロップの大きさや色が僕にとっては見やすくて編集の方に感謝です✨次回も楽しみにしています😆
モジュールを使った開発が一般的なので、今後はそちらを覚えていく必要がありますね〜！私の固定コメントに追記を書いたので、そちらもよろしければ見てください。モジュールはビルド前提で使うことが多いですので、その点は注意が必要です（ビルドに関してももちろん将来の講座で扱います）。テロップに関しても良かったですー！編集は奥さんがしているのですが、伝えておきますね😁✨
こんな動画が無料で見れるなんて……ライバルたちには質が良すぎて紹介できないｗしまぶーさんの動画で点だった知識が線になっていく感覚を楽しめてます
モジュールという概念が理解できました。とてもわかりやすかったです。やはり文言だけだと真の理解ができていないですね。わからなくなった時は何度も復習しに帰ってきます。
実際にコードを見ないと分からないところはありますよね次の import / export 周りを見るとより理解が深まると思います✨
upお疲れ様です。あと登録者6万人おめでとうございます！
ありがとうございますー！この調子でまだまだがんばりますよー✊
いつも勉強になる動画を本当にありがとうございます。しまぶーさんの動画見て勉強するの楽しいです。
スクリプトタグの中身が数千行、一万行のところで思わずひっくり返りそうになりました😱 そんな行数のコードが存在しているなんて... いつも、有益な動画ありがとうございます🙇♂️
CodeSandbox初めて知りました。サインインせず、すぐ試せるのが良いですね。vscodeみたく、code補完もしっかりしてて驚いた.....コードとブラウザを同時に表示できるので、しまぶーさん向きですね！先月までJavaScriptが殆どちんぷんかんぷん??でしたが、毎日向き合うことで体が慣れてきました。今は取り敢えず、オリジナルのtodoリストの作成に取り組んでます！次のモジュール講座も楽しみにしてます！
JS講座待ってました！ありがとうございます！フロントエンドはかなり興味ある分野で勉強中なのでありがたいです。（あ、経営学筋トレの人です）
もちろん存じ上げておりますよ！アイコン変わってますね！笑良かったです。今回大事な部分なのでマスターしてくださいね（なんか毎回大事って言ってる気がします。大事なことしか取り扱っていないので仕方ないですが笑）！
@@shimabu_it （よくお気付きで、、！）そうですね！しまぶーさんのReact講座も楽しみにしております！応援しています。
さすが しまチュウさん！！笑今回もめちゃくちゃ分かりやすかったです！よくreactとか使っていると今回のES module の記法とか当たり前のように使っているので、復習がてら勉強になります。次回の講座も楽しみにしております😊
ちょうど今ファイル分割を実装しようとして悩んでいました！次回のimport/export待ち遠しいです！
次回のimport / exportも割とまとまっているので、そこそこ早めに出せるかと思います。期待していてくださいね😊
ポートフォリオ作成でつまづいていたimportがドンピシャで見れて感動。。モジュールってこういうのなんですねー。
講座内でもありましたが、モジュールが無い頃のコーディングは怖すぎますね・・・。スコープの問題を処理できるのは非常にありがたいですね。
target.addEventListener('click', () => {target.style.display = 'none';setInterval(()=>{target.style.display = 'block';},5000);},false);})クラス名取得などは省略してあります。クリックで消えその後復活するのですが、秒数が反映されているものもあるのですがすぐ復活してしまうものがあります。原因は何でしょうか？長々とすみません。
んーーー何を実現したいのかがわかっていないので適切な回答ができるか分かりませんが、おそらく setInterval と setTimeout がごっちゃになっている可能性があります。たぶんやりたいこと的には setTimeout ・・・？例えば下記記事など、検索したら無限に出てきますので詳しくは調べていただきたいです！qiita.com/chihiro/items/b105a901bbfd6c5b483cより詳しくは👇ja.javascript.info/settimeout-setintervalもし見当違いの回答でしたらごめんなさい。参考になれば嬉しいです🙌
@@shimabu_it Timeoutの方でした💦解決しましたありがとうございます。
今回も動画ありがとうございます😋自分は一回JS挫折して、php やらdbのサーバー系とAWSなどでインフラ系の勉強にどっぷり行ってました。そして、しまぶーさんのモダンJSの動画を発見してから一気に理解が深まりJSに戻ってくることができました！🤣今日はtypescriptを軽く触ってみたのですが、自分の性格上vueとReactも手を出しそうなのですが、手を広げすぎはあまり良くないですかね？😂興味を持ちすぎる性格がプログラミング学習を妨げてる気がしていて最近悩んでます！アドバイス頂けると嬉しいです！長文すみませんでした🙇♂️
もちろんサーバー側・インフラ側を学ぶのは大事なのでGoodです👍手を広げすぎるのは良くないですね、TypeScriptとVue・Reactなどを同時に学ぶのは正直無理だと私は思っています。なので、まずはReact（or Vue）を学び、その次にTypeScriptが良いかと思います。少なくともフロントエンドに関しては、ですね。同時に学んでもいいレベルのものと、無理なレベルがあるかと思います。JavaScriptの文法とちょっとしたDOM操作などを学ぶのは可能ですが、TypeScriptとVue・Reactレベルを一気に学ぶのは私は不可能だと考えている、ということですね。サーバー系・インフラ系も同じで、触りの部分だったら両方一緒に学ぶことはできるかと思います。ただし、難しい部分を両方一緒に学ぶのは「？」が増えて挫折しがち、または理解が浅くなりがちなので、気をつけてください！参考になれば✋✨
しまぶーのIT大学 丁寧なご返信ありがとうございます！やはりそうですよね。欲張りすぎて挫折する未来が見えていたのでアドバイス頂きとても助かりました。まずReactからしっかり勉強してみようと思います。エンジニア業界に転職する為に独学していて、しまぶーさんの動画が本当に励みになっているので、これからも応援しております！
いえいえー！こちらこそコメントありがとうございます！私が今新しい分野を学ぶときも必ず2つ以下にしています（それ以上いくと私でもパンクします）。まずは1つずつ着実な理解ですね。高く評価していただいて嬉しい限りです｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡今後も学びになる動画を出していきますので、ぜひご活用ください！✌
こんにちは。いつか日本でウェブプログラマーとして働きたい外国人です。githubとかstackoverflowで探しても日本の現況をよく知ることができませんでした。日本で将来に需要が高まるのはやはりnodejsとかphpですか？
私は、日本も海外も、流行る技術は大きくは変わらないと考えています。なので日本と海外で区別する必要はないかもしれません。仰るとおり、Node.jsとPHPは人気ですね。あとはRubyも人気だったりします。個人的な考えだと、海外でPythonが人気なので、これから日本でもPythonが更に流行るのではないかと見ています。
@@shimabu_it 返事ありがとうございます.
初めまして。vscodeではモジュールは使えないのでしょうか。同じようにコードを記載しましたが、うまく動きませんでした。
フロントエンドエンジニアを目指して現在スクールに通ったり、しまぶーさんの動画で勉強しています。フロントエンジニアは、rubyやruby on raiisの言語は使わないですか？
すみません。この動画と関係ない質問です。過去の動画でもしSIerに就職するなら自社雇用してるところが良いとおっしゃってたんですが、SESとSIerの客先常駐って雇用形態以外に違いはあるのでしょうか。
vsコードで！JavaScript書けないんですか？
この動画にはかんけいないですが、ついにマイクロソフトのIEがサービス終了しますね
IEのサポート打ち切り日の話ですね！2021/8ということで来年までは頑張る必要はありますが、それ以降は完全にスパッと切りたいですね。ちなみに私は3年前ぐらいから作るサービスでIE対応していないので、特に困っていませんでしたが・・・。システム開発の業界は恩恵が大きそうですね〜！
しまぶーのIT大学 僕もIE対応はあまり気にせずやってたので影響はさほど大きくないです！業界がどんな変化していくか楽しみですね😁
@@中村綾杜-y2b 一緒ですね！笑公的なサービスとかがIE対応のせいでだいぶレガシーなことしかできなかったかと思うので、そこが改善されることを願っています
モジュールはヘッドタグとボディタグのどちらの中に書くのが望ましいですか？
今ちょっと調べてみましたが、そこに関しては正直分からなかったです。差は無いと思っていて私だったら（なんとなく）見栄え的にheadタグの中に書きます。ここはむしろ詳しい人がいたら教えていただきたいポイントです
しまぶーのIT大学 ご回答ありがとうございます😌
⚠コメント追記しているので「続きを読む」を押してください
モダンJavaScriptを理解する上で最も重要なモジュールの基礎講座です。
まずはES Modules形式（ESM形式）のモジュールについて見ていきます。
CommonJS形式（CJS形式）と間違えないように注意しましょう。
次回は import / export の書き方を学びます！✨
-- 追記部分 --
動画内で伝えること忘れていましたが、モジュールは基本的にはビルド前提で使うことが多いです。type="module" が IE が動かないのでそのサポートや、コードの最適化（例えばコードの圧縮や未使用のコード削除など）、他にも非常にたくさんのこと（TSの型削除やES2015を使えるようにするなどなど、説明しきれないぐらい多いです）が求められるので、 webpack などでビルドして使用するのが一般的です。なので、この動画のように素のJavaScriptでモジュールを書くことは機会としては少ないですが、ただ今回の基礎的な部分を抑えていないとモダンなJSを理解することができないと考えているので、まずはこちらから解説しています。
めちゃくちゃわかりやすかったです！初心者エンジニアを抜け出すために必須の内容だこれは、、、
正直1回見ただけじゃ全部理解できないので、繰り返し見てます。
めっちゃわかりやすかったです！
ありがとうございます！
モジュール解説はありがたいです。
モジュールは初心者用書籍や解説サイトには詳しい解説はなく自分で調べたり中級者書籍を見ると一気に難しくなるので挫折しそうになります。
しまぶーさんは動画で基本的なところや歴史を紹介してくれるので流れがわかりJavaScriptの理解が進みます。
とても役に立ちました。ありがとうございます！
モジュールがない場合とある場合で比較することで便利さを理解することができました😊
また、テロップの大きさや色が僕にとっては見やすくて編集の方に感謝です✨
次回も楽しみにしています😆
モジュールを使った開発が一般的なので、今後はそちらを覚えていく必要がありますね〜！私の固定コメントに追記を書いたので、そちらもよろしければ見てください。モジュールはビルド前提で使うことが多いですので、その点は注意が必要です（ビルドに関してももちろん将来の講座で扱います）。
テロップに関しても良かったですー！編集は奥さんがしているのですが、伝えておきますね😁✨
こんな動画が無料で見れるなんて……
ライバルたちには質が良すぎて紹介できないｗ
しまぶーさんの動画で点だった知識が線になっていく感覚を楽しめてます
モジュールという概念が理解できました。とてもわかりやすかったです。
やはり文言だけだと真の理解ができていないですね。わからなくなった時は何度も復習しに帰ってきます。
実際にコードを見ないと分からないところはありますよね
次の import / export 周りを見るとより理解が深まると思います✨
upお疲れ様です。あと登録者6万人おめでとうございます！
ありがとうございますー！この調子でまだまだがんばりますよー✊
いつも勉強になる動画を本当にありがとうございます。しまぶーさんの動画見て勉強するの楽しいです。
スクリプトタグの中身が数千行、一万行のところで思わずひっくり返りそうになりました😱 そんな行数のコードが存在しているなんて...
いつも、有益な動画ありがとうございます🙇♂️
CodeSandbox初めて知りました。サインインせず、すぐ試せるのが良いですね。
vscodeみたく、code補完もしっかりしてて驚いた.....
コードとブラウザを同時に表示できるので、しまぶーさん向きですね！
先月までJavaScriptが殆どちんぷんかんぷん??でしたが、毎日向き合うことで体が慣れてきました。
今は取り敢えず、オリジナルのtodoリストの作成に取り組んでます！
次のモジュール講座も楽しみにしてます！
JS講座待ってました！ありがとうございます！
フロントエンドはかなり興味ある分野で勉強中なのでありがたいです。
（あ、経営学筋トレの人です）
もちろん存じ上げておりますよ！アイコン変わってますね！笑
良かったです。今回大事な部分なのでマスターしてくださいね（なんか毎回大事って言ってる気がします。大事なことしか取り扱っていないので仕方ないですが笑）！
@@shimabu_it （よくお気付きで、、！）
そうですね！しまぶーさんのReact講座も楽しみにしております！
応援しています。
さすが しまチュウさん！！笑
今回もめちゃくちゃ分かりやすかったです！
よくreactとか使っていると今回のES module の記法とか当たり前のように使っているので、復習がてら勉強になります。
次回の講座も楽しみにしております😊
ちょうど今ファイル分割を実装しようとして悩んでいました！
次回のimport/export待ち遠しいです！
次回のimport / exportも割とまとまっているので、そこそこ早めに出せるかと思います。期待していてくださいね😊
ポートフォリオ作成でつまづいていたimportがドンピシャで見れて感動。。モジュールってこういうのなんですねー。
講座内でもありましたが、モジュールが無い頃のコーディングは怖すぎますね・・・。
スコープの問題を処理できるのは非常にありがたいですね。
target.addEventListener('click', () => {
target.style.display = 'none';
setInterval(()=>{
target.style.display = 'block';
},5000);
},false);
})
クラス名取得などは省略してあります。
クリックで消えその後復活するのですが、秒数が反映されているものもあるのですが
すぐ復活してしまうものがあります。
原因は何でしょうか？長々とすみません。
んーーー何を実現したいのかがわかっていないので適切な回答ができるか分かりませんが、おそらく setInterval と setTimeout がごっちゃになっている可能性があります。たぶんやりたいこと的には setTimeout ・・・？
例えば下記記事など、検索したら無限に出てきますので詳しくは調べていただきたいです！
qiita.com/chihiro/items/b105a901bbfd6c5b483c
より詳しくは👇
ja.javascript.info/settimeout-setinterval
もし見当違いの回答でしたらごめんなさい。参考になれば嬉しいです🙌
@@shimabu_it
Timeoutの方でした💦解決しましたありがとうございます。
今回も動画ありがとうございます😋
自分は一回JS挫折して、php やらdbのサーバー系とAWSなどでインフラ系の勉強にどっぷり行ってました。
そして、しまぶーさんのモダンJSの動画を発見してから一気に理解が深まりJSに戻ってくることができました！🤣
今日はtypescriptを軽く触ってみたのですが、自分の性格上vueとReactも手を出しそうなのですが、手を広げすぎはあまり良くないですかね？😂
興味を持ちすぎる性格がプログラミング学習を妨げてる気がしていて最近悩んでます！
アドバイス頂けると嬉しいです！
長文すみませんでした🙇♂️
もちろんサーバー側・インフラ側を学ぶのは大事なのでGoodです👍
手を広げすぎるのは良くないですね、TypeScriptとVue・Reactなどを同時に学ぶのは正直無理だと私は思っています。なので、まずはReact（or Vue）を学び、その次にTypeScriptが良いかと思います。少なくともフロントエンドに関しては、ですね。
同時に学んでもいいレベルのものと、無理なレベルがあるかと思います。JavaScriptの文法とちょっとしたDOM操作などを学ぶのは可能ですが、TypeScriptとVue・Reactレベルを一気に学ぶのは私は不可能だと考えている、ということですね。
サーバー系・インフラ系も同じで、触りの部分だったら両方一緒に学ぶことはできるかと思います。ただし、難しい部分を両方一緒に学ぶのは「？」が増えて挫折しがち、または理解が浅くなりがちなので、気をつけてください！参考になれば✋✨
しまぶーのIT大学
丁寧なご返信ありがとうございます！
やはりそうですよね。
欲張りすぎて挫折する未来が見えていたのでアドバイス頂きとても助かりました。
まずReactからしっかり勉強してみようと思います。
エンジニア業界に転職する為に独学していて、
しまぶーさんの動画が本当に励みになっているので、これからも応援しております！
いえいえー！こちらこそコメントありがとうございます！
私が今新しい分野を学ぶときも必ず2つ以下にしています（それ以上いくと私でもパンクします）。まずは1つずつ着実な理解ですね。
高く評価していただいて嬉しい限りです｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡
今後も学びになる動画を出していきますので、ぜひご活用ください！✌
こんにちは。いつか日本でウェブプログラマーとして働きたい外国人です。
githubとかstackoverflowで探しても日本の現況をよく知ることができませんでした。
日本で将来に需要が高まるのはやはりnodejsとかphpですか？
私は、日本も海外も、流行る技術は大きくは変わらないと考えています。
なので日本と海外で区別する必要はないかもしれません。
仰るとおり、Node.jsとPHPは人気ですね。あとはRubyも人気だったりします。
個人的な考えだと、海外でPythonが人気なので、これから日本でもPythonが更に流行るのではないかと見ています。
@@shimabu_it 返事ありがとうございます.
初めまして。
vscodeではモジュールは使えないのでしょうか。
同じようにコードを記載しましたが、うまく動きませんでした。
フロントエンドエンジニアを目指して現在スクールに通ったり、しまぶーさんの動画で勉強しています。
フロントエンジニアは、rubyやruby on raiisの言語は使わないですか？
すみません。この動画と関係ない質問です。
過去の動画でもしSIerに就職するなら自社雇用してるところが良いとおっしゃってたんですが、SESとSIerの客先常駐って雇用形態以外に違いはあるのでしょうか。
vsコードで！JavaScript書けないんですか？
この動画にはかんけいないですが、
ついにマイクロソフトのIEがサービス終了しますね
IEのサポート打ち切り日の話ですね！2021/8ということで来年までは頑張る必要はありますが、それ以降は完全にスパッと切りたいですね。ちなみに私は3年前ぐらいから作るサービスでIE対応していないので、特に困っていませんでしたが・・・。システム開発の業界は恩恵が大きそうですね〜！
しまぶーのIT大学 僕もIE対応はあまり気にせずやってたので影響はさほど大きくないです！
業界がどんな変化していくか楽しみですね😁
@@中村綾杜-y2b 一緒ですね！笑
公的なサービスとかがIE対応のせいでだいぶレガシーなことしかできなかったかと思うので、そこが改善されることを願っています
モジュールはヘッドタグとボディタグのどちらの中に書くのが望ましいですか？
今ちょっと調べてみましたが、そこに関しては正直分からなかったです。差は無いと思っていて私だったら（なんとなく）見栄え的にheadタグの中に書きます。
ここはむしろ詳しい人がいたら教えていただきたいポイントです
しまぶーのIT大学
ご回答ありがとうございます😌