1
/
5

Wantedlyは、300万人が利用する国内最大のビジネスSNSです

This page is intended for users in Japan. Go to the page for users in United States.

【BLOG】「import/export/require編」~つかもうぜドラ〇ンボール~

こんにちは。ランドネット広報の山崎です。
ランドネットのエンジニアをもっと知って頂くために、エンジニアブログを始めました。
今回は、ランドネット期待の若手エンジニア「アジキング」が書いてくれました。

前回のアジキング記事はこちら

※登場する人物は、超人気アニメ「ドラ◯ンボール」とは一切関係ありません。

オッス!おら孫アジキング! 今ジャヴァスクリプトのインポートとかエクスポートをやってんだけどサッパリなんだ。全然わかんねっぞー。

JavaScriptね!確かにそこは難しいよねー。それにしても孫くんがパソコン触ってるなんてビックリだわ

オラもこんな事より、早く修行がしてーけどよー。ヂヂがこれくらいはできるようにしろってスゲーんだよ。シノブルマ教えてくれよー

require

まずはリクワイヤーってやつを教えてくれ。Node.jsは大体分かったぞ

なら良かったわ、require()は、node_moduleからパッケージを持ってくる事を意味するの。例えば

const package1 = require('package1')

って書かれてたらパッケージのpackage1の内容を定数package1に持ってくる事を意味してるの。

node_moduleの中から持ってこれるっちゅーのか!スゲーな!ってことは、自分で作ったやつとかはできねーのか?

できるわよ。そーゆう時は、相対パスで書くのよ。

const myPackage = require('./MyPackage')

こうやって書けばできるわよ。ちなみに.jsと.jsonと.tsの場合は拡張子を省略できるのよ。

スゲーな!でもファイルを持ってくる方は書いたけど、持ってこられる方に何にも書かなくてもいいのか?

よく気づいたわね、そう言う時に書くのがmodule.exportsって文よ!
これはね、出力する意味があるの。例えば

// example.js
module.exports = e => e + 1;

このexample.jsが出力されるファイルで

//sample.js
const example = require('./example');

console.log(example(3));
// 4

sample.jsでexample.jsの関数を取り込んで、引数に3を渡しているのよ。

こんなこともできるのか!あれ?でもオラさっき普通のexportsだけっちゅーんも見たぞ?

そう、module.exportsだと複数出力する時に使い勝手が悪いから普通のexportsもあるの。例えば

// sample.js
exports.example = i => i + 1;

※module.exportsを複数書くと一番最後の文が有効になる。

まずexportsから始まるのに注目よ。そして

// index.js
const example = require('./sample');
console.log(example(3));
// 4

この時にexampleは揃える必要があるから注意する必要があるけど、色々な名前で出力することができるようになるの。

そう言うことだったのかー!でもこれでたくさんexportsするとごちゃごちゃしそーだなー。

そうね。ほどほどが一番よ。それじゃあ本題の、importとexportの説明するわよ。

importとexport

じゃあまず、exportの説明からいくわよ。
exportは、exportは3種類あるの。まず、1種類めのexport defaultからいくわ!

// example.js
export default test => test + 1;

これで今まで通りexportができるんだけど、実はimportも2種類あるの

// sample.js 1
import example from './example.js'

console.log(example(3))
// 4
// sample.js 2
import * as example from './example.js'

console.log(example.default(3))
// 4

1つめの方法がdefaultをそのままimportしているの、
2つめの方法がファイルの中身一気にimportしてその中からdefaultを選んでいる感じね。

そーゆうことか!なんとなく分かったぞ!

それなら良かったわ。それじゃあもう一つのexportに移るわよ。実はこのexportだけで2種類あるんだけど。それが

// example.js 1
export const test = t => t + 1;
// example.js 2
const test = t => t + 1;
export { test };

exportを定数(const)と一緒に書く方法と定数とexportを分けて書く方法があるの。
これのimportもさっきと2種類で大体同じだけど、少し書き方が変わるわ。

// sample.js 1
import { test } from './example.js';
// import { test as ttt } from './example.js'; //

console.log(test(3))
// 4


// sample.js 2
import * as example from './example.js';

console.log(example.test(3))
// 4

今度は、{}がついてっぞー!

そう、defaultの時と違うところで1つ目の方法は、importの後に{}が必要になるの。この時にtestは名前が一致する必要があるから気をつけるの。

そういうことか!分かったぞ!やっぱフルマは頭いいなー!じゃあオラもう我慢できねーから、修行行ってくる!!


次回へ続く、、、、

株式会社ランドネットでは一緒に働く仲間を募集しています
同じタグの記事
今週のランキング