⚠コメント追記しているので「続きを読む」を押してください モダンJavaScriptを理解する上で最も重要なモジュールの基礎講座です。 まずはES Modules形式（ESM形式）のモジュールについて見ていきます。 CommonJS形式（CJS形式）と間違えないように注意しましょう。 次回は import / export の書き方を学びます！✨ -- 追記部分 -- 動画内で伝えること忘れていましたが、モジュールは基本的にはビルド前提で使うことが多いです。type="module" が IE が動かないのでそのサポートや、コードの最適化（例えばコードの圧縮や未使用のコード削除など）、他にも非常にたくさんのこと（TSの型削除やES2015を使えるようにするなどなど、説明しきれないぐらい多いです）が求められるので、 webpack などでビルドして使用するのが一般的です。なので、この動画のように素のJavaScriptでモジュールを書くことは機会としては少ないですが、ただ今回の基礎的な部分を抑えていないとモダンなJSを理解することができないと考えているので、まずはこちらから解説しています。

とても役に立ちました。ありがとうございます！

めちゃくちゃわかりやすかったです！初心者エンジニアを抜け出すために必須の内容だこれは、、、 正直1回見ただけじゃ全部理解できないので、繰り返し見てます。

めっちゃわかりやすかったです！ ありがとうございます！

さすが しまチュウさん！！笑 今回もめちゃくちゃ分かりやすかったです！ よくreactとか使っていると今回のES module の記法とか当たり前のように使っているので、復習がてら勉強になります。 次回の講座も楽しみにしております😊

いつも勉強になる動画を本当にありがとうございます。しまぶーさんの動画見て勉強するの楽しいです。

こんな動画が無料で見れるなんて…… ライバルたちには質が良すぎて紹介できないｗ しまぶーさんの動画で点だった知識が線になっていく感覚を楽しめてます

upお疲れ様です。あと登録者6万人おめでとうございます！

@shimabu_it

3 жыл бұрын

ありがとうございますー！この調子でまだまだがんばりますよー✊

モジュールがない場合とある場合で比較することで便利さを理解することができました😊 また、テロップの大きさや色が僕にとっては見やすくて編集の方に感謝です✨ 次回も楽しみにしています😆

@shimabu_it

3 жыл бұрын

モジュールを使った開発が一般的なので、今後はそちらを覚えていく必要がありますね〜！私の固定コメントに追記を書いたので、そちらもよろしければ見てください。モジュールはビルド前提で使うことが多いですので、その点は注意が必要です（ビルドに関してももちろん将来の講座で扱います）。 テロップに関しても良かったですー！編集は奥さんがしているのですが、伝えておきますね😁✨

モジュール解説はありがたいです。 モジュールは初心者用書籍や解説サイトには詳しい解説はなく自分で調べたり中級者書籍を見ると一気に難しくなるので挫折しそうになります。 しまぶーさんは動画で基本的なところや歴史を紹介してくれるので流れがわかりJavaScriptの理解が進みます。

モジュールという概念が理解できました。とてもわかりやすかったです。 やはり文言だけだと真の理解ができていないですね。わからなくなった時は何度も復習しに帰ってきます。

@shimabu_it

3 жыл бұрын

実際にコードを見ないと分からないところはありますよね 次の import / export 周りを見るとより理解が深まると思います✨

CodeSandbox初めて知りました。サインインせず、すぐ試せるのが良いですね。 vscodeみたく、code補完もしっかりしてて驚いた..... コードとブラウザを同時に表示できるので、しまぶーさん向きですね！ 先月までJavaScriptが殆どちんぷんかんぷん??でしたが、毎日向き合うことで体が慣れてきました。 今は取り敢えず、オリジナルのtodoリストの作成に取り組んでます！ 次のモジュール講座も楽しみにしてます！

スクリプトタグの中身が数千行、一万行のところで思わずひっくり返りそうになりました😱 そんな行数のコードが存在しているなんて... いつも、有益な動画ありがとうございます🙇‍♂️

ポートフォリオ作成でつまづいていたimportがドンピシャで見れて感動。。モジュールってこういうのなんですねー。

ちょうど今ファイル分割を実装しようとして悩んでいました！ 次回のimport/export待ち遠しいです！

@shimabu_it

3 жыл бұрын

次回のimport / exportも割とまとまっているので、そこそこ早めに出せるかと思います。期待していてくださいね😊

JS講座待ってました！ありがとうございます！ フロントエンドはかなり興味ある分野で勉強中なのでありがたいです。 （あ、経営学筋トレの人です）

@shimabu_it

3 жыл бұрын

もちろん存じ上げておりますよ！アイコン変わってますね！笑 良かったです。今回大事な部分なのでマスターしてくださいね（なんか毎回大事って言ってる気がします。大事なことしか取り扱っていないので仕方ないですが笑）！

@yurukei20

3 жыл бұрын

@@shimabu_it （よくお気付きで、、！） そうですね！しまぶーさんのReact講座も楽しみにしております！ 応援しています。

講座内でもありましたが、モジュールが無い頃のコーディングは怖すぎますね・・・。 スコープの問題を処理できるのは非常にありがたいですね。

フロントエンドエンジニアを目指して現在スクールに通ったり、しまぶーさんの動画で勉強しています。 フロントエンジニアは、rubyやruby on raiisの言語は使わないですか？

すみません。この動画と関係ない質問です。 過去の動画でもしSIerに就職するなら自社雇用してるところが良いとおっしゃってたんですが、SESとSIerの客先常駐って雇用形態以外に違いはあるのでしょうか。

今回も動画ありがとうございます😋 自分は一回JS挫折して、php やらdbのサーバー系とAWSなどでインフラ系の勉強にどっぷり行ってました。 そして、しまぶーさんのモダンJSの動画を発見してから一気に理解が深まりJSに戻ってくることができました！🤣 今日はtypescriptを軽く触ってみたのですが、自分の性格上vueとReactも手を出しそうなのですが、手を広げすぎはあまり良くないですかね？😂 興味を持ちすぎる性格がプログラミング学習を妨げてる気がしていて最近悩んでます！ アドバイス頂けると嬉しいです！ 長文すみませんでした🙇‍♂️

@shimabu_it

3 жыл бұрын

もちろんサーバー側・インフラ側を学ぶのは大事なのでGoodです👍 手を広げすぎるのは良くないですね、TypeScriptとVue・Reactなどを同時に学ぶのは正直無理だと私は思っています。なので、まずはReact（or Vue）を学び、その次にTypeScriptが良いかと思います。少なくともフロントエンドに関しては、ですね。 同時に学んでもいいレベルのものと、無理なレベルがあるかと思います。JavaScriptの文法とちょっとしたDOM操作などを学ぶのは可能ですが、TypeScriptとVue・Reactレベルを一気に学ぶのは私は不可能だと考えている、ということですね。 サーバー系・インフラ系も同じで、触りの部分だったら両方一緒に学ぶことはできるかと思います。ただし、難しい部分を両方一緒に学ぶのは「？」が増えて挫折しがち、または理解が浅くなりがちなので、気をつけてください！参考になれば✋✨

@user-so7nu7ft2l

3 жыл бұрын

しまぶーのIT大学 丁寧なご返信ありがとうございます！ やはりそうですよね。 欲張りすぎて挫折する未来が見えていたのでアドバイス頂きとても助かりました。 まずReactからしっかり勉強してみようと思います。 エンジニア業界に転職する為に独学していて、 しまぶーさんの動画が本当に励みになっているので、これからも応援しております！

@shimabu_it

3 жыл бұрын

いえいえー！こちらこそコメントありがとうございます！ 私が今新しい分野を学ぶときも必ず2つ以下にしています（それ以上いくと私でもパンクします）。まずは1つずつ着実な理解ですね。 高く評価していただいて嬉しい限りです｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡ 今後も学びになる動画を出していきますので、ぜひご活用ください！✌

初めまして。 vscodeではモジュールは使えないのでしょうか。 同じようにコードを記載しましたが、うまく動きませんでした。

こんにちは。いつか日本でウェブプログラマーとして働きたい外国人です。 githubとかstackoverflowで探しても日本の現況をよく知ることができませんでした。 日本で将来に需要が高まるのはやはりnodejsとかphpですか？

@shimabu_it

3 жыл бұрын

私は、日本も海外も、流行る技術は大きくは変わらないと考えています。 なので日本と海外で区別する必要はないかもしれません。 仰るとおり、Node.jsとPHPは人気ですね。あとはRubyも人気だったりします。 個人的な考えだと、海外でPythonが人気なので、これから日本でもPythonが更に流行るのではないかと見ています。

@fa43fawa3f

3 жыл бұрын

@@shimabu_it 返事ありがとうございます.

target.addEventListener('click', () => { target.style.display = 'none'; setInterval(()=>{ target.style.display = 'block'; },5000); },false); }) クラス名取得などは省略してあります。 クリックで消えその後復活するのですが、秒数が反映されているものもあるのですが すぐ復活してしまうものがあります。 原因は何でしょうか？長々とすみません。

@shimabu_it

3 жыл бұрын

んーーー何を実現したいのかがわかっていないので適切な回答ができるか分かりませんが、おそらく setInterval と setTimeout がごっちゃになっている可能性があります。たぶんやりたいこと的には setTimeout ・・・？ 例えば下記記事など、検索したら無限に出てきますので詳しくは調べていただきたいです！ qiita.com/chihiro/items/b105a901bbfd6c5b483c より詳しくは👇 ja.javascript.info/settimeout-setinterval もし見当違いの回答でしたらごめんなさい。参考になれば嬉しいです🙌

@user-bp5th2jp9i

3 жыл бұрын

@@shimabu_it Timeoutの方でした💦解決しましたありがとうございます。

vsコードで！JavaScript書けないんですか？

モジュールはヘッドタグとボディタグのどちらの中に書くのが望ましいですか？

@shimabu_it

3 жыл бұрын

今ちょっと調べてみましたが、そこに関しては正直分からなかったです。差は無いと思っていて私だったら（なんとなく）見栄え的にheadタグの中に書きます。 ここはむしろ詳しい人がいたら教えていただきたいポイントです

@user-qr2ee7lj6t

3 жыл бұрын

しまぶーのIT大学 ご回答ありがとうございます😌

この動画にはかんけいないですが、 ついにマイクロソフトのIEがサービス終了しますね

@shimabu_it

3 жыл бұрын

IEのサポート打ち切り日の話ですね！2021/8ということで来年までは頑張る必要はありますが、それ以降は完全にスパッと切りたいですね。ちなみに私は3年前ぐらいから作るサービスでIE対応していないので、特に困っていませんでしたが・・・。システム開発の業界は恩恵が大きそうですね〜！

@user-up5ej7xu3e

3 жыл бұрын

しまぶーのIT大学 僕もIE対応はあまり気にせずやってたので影響はさほど大きくないです！ 業界がどんな変化していくか楽しみですね😁

@shimabu_it

3 жыл бұрын

@@user-up5ej7xu3e 一緒ですね！笑 公的なサービスとかがIE対応のせいでだいぶレガシーなことしかできなかったかと思うので、そこが改善されることを願っています