【React&TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話

PR
【React&TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話
この記事は約6分で読めます。
エンジニア1
エンジニア1

JSとTSに分かれるのは知ってるけど。

とりあえずjsx,tsxを使っておけばいいんじゃないの?

謎のスナギツネ
謎のスナギツネ

たしかにな、わしも最初はよく分かってなくてそうじゃったなあ〜
でも、初級者レベル以降は、しっかり使い分けは大切じゃよ

PR

PR
PR

PR
PR

JavaScriptとTypeScriptの違い

JavaScriptとTypeScriptの違い

JavaScript(ジャバスクリプト)とTypeScript(タイプスクリプト)は、プログラミング言語であり、Web開発やアプリ開発などに広く使われていますが、いくつかの違いがあります。
開発の規模や目的に応じて、適切な言語を選択することが重要です。

TypeScriptは、JavaScript の上位互換のイメージでいてもらえればよいかと思います。

違いによるメリット・デメリット

JavaScriptのメリット

  • スピーディーかつ柔軟で簡単に使える

JavaScriptのデメリット

  • 大規模プロジェクトやチームでの開発では問題が生じることがある

TypeScriptのメリット

  • 開発初期から信頼性と品質を確保できる
  • 保守性が格段に上がる

TypeScriptのデメリット

  • コード記述に若干の手間がかかる
  • コード量が増える

静的型付けと動的型付け

JavaScript
動的型付け言語であり、変数の型を宣言せずに値を代入できます
実行時に変数の型が決定される

◆ TypeScript
静的型付け言語であり、変数の型を明示的に宣言する必要があります
コードをコンパイルする際に変数の型がチェックされます

型のサポート

JavaScript
型チェックがないため、変数の型を間違えたり予期しないデータ型を扱ったりする可能性が大いにある。※特に久しぶりにコードを見たときなど見通しが悪くなる

TypeScript
型チェックがあるため、コードの品質を向上させることができます
エラーを事前に検知してくれるため、バグを減らすことができる

開発の効率性

JavaScript
型チェックがないため、開発初期の段階ではスピーディーかつ柔軟にコーディングできる
大規模プロジェクトではデバッグが難しくなることがあります

TypeScript
型チェックにより開発初期からエラーを防ぐことができます
大規模プロジェクトでの信頼性が向上します

生産性

JavaScript
スピードが出せるため、短期間でのプロトタイプ開発に適しています。

TypeScript
保守性が上があがるため、プロジェクトの規模が大きくなるまたは、長期化するほど恩恵を受けることができます
コードの品質向上に寄与します

TypeScript独自の機能

JavaScriptにはない型定義インターフェースジェネリクスなどの機能を提供します
これにより、より堅牢なコードを記述することができる

.jsと.jsxの違い

.jsと.jsxとは、両方ともJavaScriptファイルの拡張子であり、下記の違いがあります

要するに

<div>などHTML風のタグを使うときと使わないときで使い分ければOK

  • .jsが使わない時
  • .jsxが使う時

ファイルの内容

.js
通常のJavaScriptファイルを表します

.jsx
JSX(JavaScript XML)を表します
JSXは、Reactなどのライブラリで使用される、JavaScriptとXML風の記法を組み合わせたものです

JSXのサポート

.js
JSXはデフォルトではサポートされていません
ReactなどのライブラリでJSXを使いたい場合は、別途設定を行う必要があります

.jsx
JSXがそのまま使用できます
ReactUIコンポーネントを直接記述することができます

.jsと.jsxの使い分け

.jsxと.jsの使い分けは、主にReactの開発において重要です。

Reactプロジェクトでは、一般的にUIコンポーネントを.jsxファイルに記述し、その他のロジック系のJavaScriptコードは.jsファイルに記述します。

.js

通常のJavaScriptファイルとして使用します。
Reactを使用しないプロジェクトや、Reactコンポーネントを別のファイルで記述する場合に適しています。
JSXを使用しない場合には、.jsファイルに純粋なJavaScriptを書くことが一般的です

.jsx

ReactUIコンポーネントを記述する際に使用します。
JSXを使うことで、HTML風の記法でReactUIコンポーネントを記述できます。
Reactの開発では、一般的に.jsxファイルを使用することが推奨されています。

.jsxファイルを使用することで、Reactのコードをよりシンプルで直感的に記述できます。

.tsと.tsxの違い

.ts(TypeScriptファイル)

TypeScriptの標準的なファイル拡張子です
通常のTypeScriptコードを記述するために使用されます

Reactを使用しないプロジェクトや、Reactコンポーネント以外のTypeScriptコードを記述する場合に使われます

.tsx(TSXファイル)

TypeScriptとXML風の構文(JSX)を併用するReactのコンポーネントを記述するためのファイル拡張子です

jsxのTypeScript版ですね

.tsxと.tsの使い分け

.jsと.jsxと同じでOK

tsファイルには、下記のようなファイルを作成します。

  • 型の定義:〇〇〇Type.ts
  • カスタムフック:use〇〇〇.ts
  • 定数定義:〇〇〇Constants.ts

参考にReactの開発でよく登場する使い方を紹介します。

理解が進むreactとtypescriptの違いの話

さいごに

よくわからないので、とりあえずjsxやtsxを使っているという方もいるかと思いますが、使い分けをすることで見通しが良くなりますので、お試しください。

【React&TypeScript入門】TypeScript, Next.js,MUIで爆速環境構築
大人気のフロント開発言語であるReact&TypeScriptを初心者向けに爆速環境構築方法〜!Reactとの相性の良い組み合わせTypeScript, Next.js,MUIで環境を整え方を解説します。
【生成AI初心者向け】RAGとは?chunkとは?チャンク化とは解説
生成AIでおなじみのLLM + RAG!そこで重要なchunk(チャンク)、chunk化を中心に初心者向けに解説!chunkについて聞いたことがあるがそもそもよくわかっていない方向けの話!chunk分割やベクトルストアについても触れてみます
【賃貸にスマートロック】玄関におすすめ後付け可能な鍵比較5選
賃貸でも玄関の鍵にスマートロックを後付けすることが可能です。スマホで楽々解錠、急な来客や彼氏彼女に合鍵シェアっておしゃれですね。徹底的に調べて厳選比較しました。【賃貸OK】ITエンジニアがおすすめする賃貸でもできるスマートハウス化計画!
超簡単フリーランスエンジニアになるには?おすすめの案件探し方
経験年数の少なさで諦めていませんか?経験が浅くてもフリーランスエンジニアになれる方法なり方と理由がここにあり。誰でもできる超簡単なおすすめの案件(仕事)の探し方解説!ベストなITエージェントの使い方はこれだ!時代を生き抜く力はフリーランスにあり

寄付の依頼

もし、少しでもご参考になりましたらサイト運営への寄付をお願いします。
とても励みになります。

If you would like to help, please make a donation to the site management.
It is very encouraging.

BTC (ビットコイン) アドレス
35AfkHtN3paTC1iNVtHg6BDmCnHmffzQWM
DEEPコイン アドレス
0x43Dbe7F99b4A31bF184b98A8A814ADEC48FB789D
PR
PR

コメント

タイトルとURLをコピーしました