01 / 05
パッケージも名前付きで出している
aisatsu は export default で1つだけ出していた。でも、機能をいくつも持つパッケージは名前付きエクスポートで出していることのほうが多いよ。
取り込み方は自分のファイルのときとまったく同じ。{ } で欲しいものを選ぶだけだね。
import { yen } from 'keisan';console.log(yen(1200));実行結果
1,200円
ファイルを分ける・借りてくる
INPUT · スライド
01 / 05
aisatsu は export default で1つだけ出していた。でも、機能をいくつも持つパッケージは名前付きエクスポートで出していることのほうが多いよ。
取り込み方は自分のファイルのときとまったく同じ。{ } で欲しいものを選ぶだけだね。
import { yen } from 'keisan';console.log(yen(1200));実行結果
1,200円
02 / 05
yen(数) … 1,200円 の形の文字列を返すgoukei(配列) … 数の配列の合計を返すshishagonyu(数, けた) … 指定したけたで四捨五入した数を返す戻り値をそのまま別の関数に渡してもいい。下は合計を出してから、その数を円の形に整えているよ。
import { goukei, yen } from 'keisan';const prices = [300, 450, 120];console.log(yen(goukei(prices)));実行結果
870円
03 / 05
kurikaesu(文字, 回数) … 文字を回数ぶんつなげて返すsakasa(文字) … 逆さにして返すnagasa(文字) … 文字数を返す区切り線を引きたいときに kurikaesu はけっこう便利だよ。
import { kurikaesu, sakasa } from 'mojiretsu';console.log(kurikaesu("ト", 3));console.log(sakasa("やまびこ"));実行結果
トトト こびまや
04 / 05
パッケージの取り込みと、自分のファイルの取り込みは並べて書ける。./ の有無で見分けがつくから、混ざっても読めるよ。
並べる順番は決まっていないけれど、パッケージを先、自分のファイルを後にする人が多い。借り物と自作の境目が見えて読みやすいからだね。
// data.jsexport default [980, 1500];// main.jsimport { yen } from 'keisan';import prices from './data.js';console.log(yen(prices[0]));実行結果
980円
05 / 05
パッケージを使う場所は、できれば自分のファイル1つにまとめておくといいよ。
もっと良いパッケージを見つけて乗り換えるとき、直すのがそのファイルだけで済むからね。あちこちで直接呼んでいると、全部探して回ることになる。
借りるのは楽だけど、借りた場所を覚えておくのは自分の仕事。それじゃあ、組み合わせて使ってみよう。