この記事
JavaScriptを学習し始めた人が、その記録を残します。
前回は基本文法とクラスで、今回はファイル間連携やパッケージについて軽く触れました。
デフォルトエクスポート
変数や関数、クラスはexportとimportで連携可能
デフォルトの場合は１ファイル１つの値まで可能
importの際に、名前を変えてもOK
ファイルA
export default Penguin;
↓
ファイルB
import Pen from "script.js";
名前付きエクスポート
名前は同じものを指定
複数指定が可能
ファイルA
export { Bear, Cat };
↓
ファイルB
import { Bear, Cat } from "test.js"
パッケージを使ってみる
readline-syncというパッケージを用いて
入力した内容を変数に代入する
import readlineSync from "readline-sync";
const scan = readlineSync.question("What's your name? ");
console.log(`Hello! ${scan}!`);
パッケージ管理
パッケージマネージャはnpm, yarnがあるが今回はnpmを扱う
パッケージ情報は、package.jsonというファイルで管理する
プロジェクトの情報はここに記載する
ファイルを作成後、npm initを使って内容を記載できる（直接も可）
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (test_npm)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
~
Is this OK? (yes)
npm install chalk
のように、ライブラリを追加すると
"dependencies": {
"chalk": "^4.1.0"
}
といったようにpackage.jsonに追記される
逆に、パッケージ情報を記載しておくことで
他の環境でも依存パッケージを npm installで用意することができる
インストールしたパッケージはnode_modulesディレクトリ内に入っている
$ ls node_modules/chalk/
index.d.ts license package.json readme.md source
yarnも同じように使用できるが、
パッケージインストールが並列で行われたり
整合性チェックがあったり等のメリットがある
配列操作メソッド
配列順次処理
forEachメソッド
引数penguinに対して、順番に処理がされる。
出力処理の例
const penguins = ["エンペラーペンギン", "コウテイペンギン", "アデリーペンギン", "ジェンツーペンギン"];
penguins.forEach( (penguin) => {console.log(penguin);} );
↓
エンペラーペンギン
コウテイペンギン
アデリーペンギン
ジェンツーペンギン
配列要素の探索
findメソッド
要素ごとに、処理が実行される
見つかればそこで終了する
オブジェクトのプロパティに対しても使用できる
条件に当てはまる全てを出力したい場合はfilterメソッドを使用
const Entries = [
{ent: 1, name: "エンペラーペンギン"},
{ent: 2, name: "コウテイペンギン"},
{ent: 3, name: "アデリーペンギン"},
{ent: 4, name: "ジェンツーペンギン"}
];
const foundPygoscelis = Entries.find( (pen) => {
return pen.name === "アデリーペンギン";
});
console.log(foundPygoscelis);
↓
{ent: 3, name: 'アデリーペンギン'}
処理して新配列を作成
mapメソッド
全ての要素に処理をした後、戻り値から配列を作成する
const array = [1, 3, 5]
const newArray = array.map( (value) => {
return value * value;
});
console.log(array)
console.log(newArray)
↓
[ 1, 3, 5 ]
[ 1, 9, 25 ]
感想
他の言語で学習した内容と似てる部分があり、まだ取り組みやすかった印象
最近AWSでLambdaを少し触ることがあり、たまたま事前にJavaScriptをほんの少し触れただけでも
Node.jsに対してあまり抵抗なく取り組めたのが嬉しかったです。
以前はさっぱりでしたが、こうやってきっかけを作っていくといい流れになるのかなと感じました。
使用したツール、ドキュメント
・Progate
https://prog-8.com/
・MDN web docs - JavaScriptリファレンス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference