Zenn
🥝

TypeScriptを学ぶためにJavascriptを学び直す

2022/01/23に公開2件
JavaScript
Node.js
TypeScript
tech

記事を書いた理由

基本的にPythonを使って仕事をしていますが、TypeScriptやJavascriptを使ったプロジェクトにアサインされるようになりました。
なんとなくTypeScriptできると思ったのですが、かなり苦戦したので学ぶ必要があると思いました。

TypeScriptのプロジェクトで感じた課題

  • JavascriptとTypeScriptの違い
    • TypeScriptか、Javascriptの記述なのかわからず、調べるのに苦労した。
  • パッケージやモジュールを理解する
    • 名前空間、依存関係の解決をイマイチ実感できなかった。
  • パッケージ管理ツールの使い方

なので、Javascriptの仕組みメインで細かい書き方などは割愛します。

<script type="module">

囲まれたコードは囲まれた範囲内でのみスコープを持つ

export

type="module"にスコープが限定されても指定したものをグローバルにする仕組み

ES module形式

モジュールの書き方はCommonJS, ES Modules, UMDといった種類がある。

Named Import, Export

よく使う書き方

// exportする側

//まとめて
const name = "車";
const name2 = "バイク";
export { name, name2 };

//宣言と同時
export const name = "車";
export const name2 = "バイク";

// 関数もできる
export function test(){
	console.log('test')
*}*

// importする側
import {name, name2} from "file path"

Alias

// export, importどちらでもaliasができる
// 基本import側で使う
// export
export { name as car, name2};

// import
import {car, name2 as bile} from "file path"

Default Import, Export

基本使わない


// 変数関数どちらもできる

// export
// 1モジュールに1回だけ記述できる。
const name = "車";
export default name;

// import
// import {name} from "file path"のように書けない
import name from "file path"

// export
// 値だけにも適用できる
export default '車';

// import
// name = '車'の状態
import name from "file path"

All Import

1つのモジュールから全てをimportする。

Alias必須

// export
const name = "車";
const name2 = "バイク";
export { name, name2 };

// import
import * as test from 'filepath'

console.log(test.name)
console.log(test.name2)

Re-Export

基本

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="./index.js"></script>
  </head>
  <body></body>
</html>

index.js

import * as vehicle from "./vehicle/index.js";
document.body.textContent = vehicle.car;

vehicle/index.js

export * from "./vehicle.js";

vehicle/vehicle.js

const car = "車";
const bike = "バイク";

export { car, bike };

named やalias, defaultを使ったRe-Exportなどがある。

こちらはややこしいく、必要な時に調べれば済みそうなので割愛。(自力でコード読めばわかる)

Side Effect Import

変数や関数をimportせずモジュール自体をimportする。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script type="module" src="./index.js"></script>
  </head>
  <body></body>
</html>

index.js

import "./side-effect-import.js";

side-effect-import.js

console.log("side effect import");

npm(yarn)

パッケージを導入、管理しやすくするツール

関連したファイル、ディレクトリ

  • package.json
    • 依存関係
  • yarn.lock
    • パッケージの依存関係を記録したファイル
  • node_modules
    • yarn addで導入したパッケージが保存されたディレクトリ
# package.jsonを作る
yarn init

# jquery導入
yarn add jquery
# バージョン指定
yarn add jquery@1.1.0

# パッケージのリスト
yanr list

# パッケージの削除
yarn remove jquery

パッケージがインストールされると dependencies , devDependenciesに記載される。

パッケージの使い方

node_modules/jquery/dist/filename　が基本。distに使いたいファイルがあるらしい。確実な方法はパッケージの公式サイトで書かれている。

<script src="node_modules/jquery/dist/jquery.min.js">

パッケージのグローバル、ローカルインストール

前提としてsassのようなコンソールで実行できるものに限定する

  • ローカルインストール
    • 基本的にこれを使う
    • node_module配下にインストールしたものが入る。
    • node_moduleは量が多いのでpackage.jsonだけ共有して各自インストールする。
  • グローバルインストール
    • 個人で雑に開発するなら使っていいかも
# ローカルインストール
yarn add sass
# ローカル削除
yarn remove sass

# ローカルインストール
yarn global add sass
# グローバル削除
yarn global remove sass

ローカルインストールすると node_modules/.bin/sassというファイルが生成される。

sassコマンド実行したい場合は node_modules/.bin/sass ファイル名で実行すればよい。

Discussion

masakimasaki

普段実務でReact × TypeScriptを使用しているものです。
とても良くまとまっていて理解がより深まりました、ありがとうございます🙇‍♀️

Re-Exportの箇所について一点だけ気になったのですが、

vehicle/index.jsで
export * from "./vehicle.js";
をしているのであれば、

index.jsでは、
import * as vehicle from "./vehicle/index.js";
だけでなく、
import * as vehicle from "./vehicle”;
にてimportも可能かと思います。
こちらいかがでしょうか？