【モダンJavaScript #8】Named import / exportの書き方をマスターしよう！【フロントエンドエンジニア講座】

Рет қаралды 24,787

Күн бұрын

文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
モジュール間のやり取りには名前付き（Named import / export）とデフォルト（Default import / export）の2種類があります。今回の動画では前者の Named import / export を見ていきます。実際の仕事でも確実に使うので、Webフロントエンドエンジニア志望の方は必ず習得してください！
📙 もくじ
0:00 イントロダクション
0:55 前回のおさらい
2:25 export / import の種類
3:10 変数: 複数まとめて export
4:20 変数: 宣言と同時に export
4:53 関数: 複数まとめて export
6:22 関数: 宣言と同時に export
6:48 エイリアスとは
7:47 named export のエイリアス
9:15 named import のエイリアス
10:06 named export / import 両方でエイリアス
11:01 エイリアスが使われるタイミング例
14:01 エンディング
🔥 モダンJavaScript 講座
#2 歴史から学ぶJavaScript前編。
ECMAScript、CommonJS、モジュール、名前空間を知ろう
• 【モダンJavaScript #2】歴史から...
#3 歴史から学ぶJavaScript後編①
Node.jsとパッケージ管理システムnpm
• 【モダンJavaScript #3】歴史から...
#4 歴史から学ぶJavaScript後編②
IIFE・AMDモジュールとブラウザ向けパッケージ管理システムBower
• 【モダンJavaScript #4】歴史から...
#5 歴史から学ぶJavaScript完結編
バンドル・コンパイルを知る。Browserify, webpack, Babel
• 【モダンJavaScript #5】歴史から...
#6 JavaScriptで重要な3つの概念
• 【モダンJavaScript #6】Java...
#7 モジュールの基礎を理解しよう！
名前空間（スコープ）の問題とはおさらば！
• 【モダンJavaScript #7】モジュー...
👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#JavaScript #import #export

Пікірлер: 19

@shimabu_it 3 жыл бұрын

今回は Named import / export の講座です！モジュール間のやり取りでは最も頻繁に使われている書き方です。目次が良い感じに分類できたので、ぜひ使ってみてください！✨ 次回は Default import / export について見ていきます👀

@GuCcI-tp4hb 3 жыл бұрын

本当に分かりやすいです😍

@user-pr5mw8gu1o 3 жыл бұрын

前回の動画を見て、すぐさま移動してきました。 export/importは使ったことがないので、習得するために何度も見返します。

@shimabu_it 3 жыл бұрын

実際にコードを書いて動かしている動画なので、ブログなどの記事よりは分かりやすいのではないかなーと思っています！ぜひぜひマスターしてください👍👍 余談ですが、import /export と書くか、 export / importと書くか未だに迷ってます笑

@user-gh5pm9ki6j 3 жыл бұрын

歴史の動画見てからこの動画見てると type = "module" ってさりげなく登場する彼にありがたや…と手を合わせたくなりますね

@ytmi1230 3 жыл бұрын

import / exportは初心者には難しく感じてつい避けてきました。それだといつか行き詰るのはわかっているのですが… このような動画での解説は大変ありがたいです。しまぶーさんの解説は初心者にもすごく分かりやすいので助かります。

@trusai5833 3 жыл бұрын

いつも投稿お疲れ様です！

@shimabu_it 3 жыл бұрын

ありがとうございますー！✨

@takuya008 3 жыл бұрын

いつの間にか新しい動画が上がっていた！（ついさっき前回の動画にコメントしたばかりだった笑）今回もとても分かりやすく勉強になります。ありがとうございます😊

@user-zw9px4bc8m 5 ай бұрын

10:26

@user-oj7qs1rh1s 3 жыл бұрын

エイリアスと聞いた瞬間、パニックになりました🤯 しかし、日本語訳で「別名」と聞いて安心して続きが見れました✨笑英語に苦手意識があるので治したいですね💦 しまぶーさんのKZfaqはとてもわかりやすいです。目次が上手に区切られてて見やすいです😆 僕は職場などで相手に説明するとき、話のまとまりがないと言われます。まとまりがある話し方をするにはどうしたらいいですか？

@shimabu_it 3 жыл бұрын

エイリアスって何！？って感じですよね😅よく使われるプログラミング用語なのでここで覚えておいてくださいね！目次が上手に区切られるときもあれば微妙な区切りのときもありますよ！今回はたまたまうまくいった回でした笑話し方はまず大きく2つのケースに分けたほうが良くて、この動画のようなプレゼンの場合と、相手がいる前提の対話の場合です。前者だと筋道立てた話し方が重要ですね。本を書くような気持ちで、まずは目次から考えるということが重要です。目次がキレイに作れたら、後はそのとおりに話すと筋道立った話になるかと思います。職場での話だと相手がいる前提の、つまり後者になるパターンが多いかと思いますが、その場合は相手が何を求めているのかを理解することが必要です。結論からほしいのか、話に納得感がほしいのか、それとも対話したいのか、シチュエーションによって求められるものが変わるので、まずは落ち着いて相手が欲しいものを理解することが重要ですね。世間でいうコミュニケーション的な話だとは思いますが、結局、相手が何を求めているかだと私は思っています！🙂

@JiNYLenny 3 жыл бұрын

SQLのSelect分で使ってたasはエイリアスだったのか！

@dmcreatorjapan 3 жыл бұрын

Reactとかやってるとおまじないのように「export default xxxxxxxx;」って書くけど export defaultって何ってところまで詳しくないなあ。とりあえず1つのコンポーネントをexportするくらいの理解。

@shimabu_it 3 жыл бұрын

私も最初モダンなJavaScriptを学ぶ上でだいぶ理解が浅かったところです。export {}とかexport defaultって何が違うの・・・という感じだったので、今回しっかり解説することにしました。次回、default export / import をやりますが、だいぶ学びになるかと思われますので楽しみにしていてくださいね✌

@ulu7113 3 жыл бұрын

upお疲れ様です！しまぶーさんポケモンのゲームやられていましたか？🤔

@shimabu_it 3 жыл бұрын

ありがとうございます！ポケモンは金銀までで止まっております😂

@user-bp5th2jp9i 3 жыл бұрын

初めてのエイリアスはpythonだったな～import tkinter as tk まだどれも中途半端だけど… しまぶーさんは一段落した際の息抜きみたいのあったりしますか？安倍首相お疲れ様です。しまぶーさんも体にお気を付けください。

@shimabu_it 3 жыл бұрын

全部の言語を知っているわけではないのですが、エイリアスは基本どの言語でもありそうですよね。PHPやRubyにも存在します。息抜きはゲームです。時間としては多くはないですが、ちょくちょくスマブラやってますよー🎮✨ 安倍首相の辞任で世間は忙しいですが、私は私でしっかり休養しつつ本業や動画制作がんばります✊🔥