ファイルを分ける・借りてくる

INPUT · スライド

他の人が書いたコードを借りる

01 / 06

それ、もう誰かが書いている

日付をきれいに整える。数字にカンマを入れる。パスワードを安全にしまう。

こういう「よくある処理」は、世界中の誰かがもう書いていて、しかも無料で使えるように公開してくれていることが多い。自分で書くと1日かかることが、借りれば5分で終わるんだ。

もちろん自分で書く力も大事。でも、作りたいものに集中するために借りる、という判断も同じくらい大事だよ。

02 / 06

パッケージという単位

公開されているコードはパッケージという単位でまとまっている。中身はこれまで書いてきたものと同じで、関数やクラスを export したファイルの集まりだよ。

つまり、前のレッスンでやったことがそのまま通じる。取り込む相手が自分のファイルから他人のファイルに変わるだけなんだ。

03 / 06

実際は npm install で取ってくる

本物の開発では、パッケージはターミナルから取ってくる。下のコマンドを打つと、node_modules というフォルダにダウンロードされて、import で呼べるようになる。

ただし正直に言うと、manabiya はブラウザの中だけで動いているアプリだから、このコマンドは走らせられない。この画面では、あらかじめ入れてあるパッケージを使う

手順そのものは覚えておいて、自分のパソコンで開発するときに使えばいいよ。

npm install aisatsu

04 / 06

manabiya に入っている3つ

この教材で使えるパッケージは次の3つ。どれも manabiya が練習用に書いた小さなものだよ。

  • aisatsu … 時間帯を渡すと、あいさつの文を返す
  • keisan … 数の見た目を整えたり、合計を出したりする
  • mojiretsu … 文字をくり返す、逆さにする、長さを数える

本物の npm にあるものではないので、名前を検索しても出てこない。使い方の練習にはこれで十分だよ。

05 / 06

裸の名前で取り込む

パッケージを取り込むときは ./ を付けない。名前だけを書くんだ。

./ が付いていたら自分のファイル、付いていなかったらパッケージ。この見分け方は、人の書いたコードを読むときにも役立つよ。

// main.jsimport aisatsu from 'aisatsu';console.log(aisatsu("asa"));

実行結果

おはよう

06 / 06

中身は読まなくていい

パッケージの中がどう書かれているかは、使うときには気にしなくていい。知りたいのは何を渡すと何が返るかだけだよ。

aisatsu の場合はこう。

  • "asa" を渡すと おはよう
  • "hiru" を渡すと こんにちは
  • "yoru" を渡すと こんばんは
  • どれでもない文字なら やあ

それじゃあ、取り込んで使ってみよう。