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

エンジニア１

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

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

謎のスナギツネ

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

JavaScriptとTypeScriptの違い

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

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

PR

AIと英会話レッスン【スピークエル】

スマリッジで変わる出逢い

フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】

自宅で始めて、年収1,300万円以上が可能【IBJ】

静的型付けと動的型付け

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

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

型のサポート

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

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

開発の効率性

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

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

生産性

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

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

TypeScript独自の機能

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

ReactのおすすめUIライブラリ-絶対使うべきTOP5【技術選定】

JavaScript・TypeScriptで現在大人気もはや一強敵なしReactのおすすめ人気UIライブラリトップ5 – 選び方と特徴 〜 絶対使ったほうがよいおすすめライブラリを厳選して選定！もはやUIライブラリの技術選定はここから選べばOKか

3chome.net

2024.04.19

【asdfのインストール】導入方法解説・まとめてバージョン管理

【asdfのインストール】まとめてバージョン管理しよう！ちょうど調べる機会があったのでメモ程度で残しておきます。

3chome.net

2024.04.10

.jsと.jsxの違い

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

ファイルの内容

◆ .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のコードをよりシンプルで直感的に記述できます。

PR

.tsと.tsxの違い

◆ .ts（TypeScriptファイル）

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

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

◆ .tsx（TSXファイル）

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

jsxのTypeScript版ですね

.tsxと.tsの使い分け

.jsと.jsxと同じでOK

初心者、社会人におすすめの英語学習ベスト【オンライン英会話】

初心者向けからビジネス英会話まで英語学習サイトやツールをおまとめ。あなたのためのおすすめランキングベスト20を目的別に紹介。英語初心者はまずこれだ！忙しい社会人が楽しく勉強するためのオンラインスクール情報がここに

3chome.net

2023.09.09

さいごに

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

【フリーランスと会社員の違い】エンジニア年収を上げる方法紹介

エンジニアとしてキャリアアップするならたくさんの選択肢を知っておきたいものです。「フリーランス」と「会社員」の違い、これを知ったあなたならどうするか、キャリアには年収派？スキル派？安定派？スペシャリスト？マネジメント？たくさんの選択肢があります

3chome.net

2023.05.23

【React＆TypeScript入門】人気の組み合わせで爆速環境構築伝授

大人気のフロント開発言語であるReact＆TypeScriptを初心者向けに爆速環境構築方法〜！おすすめの人気フレームワークやライブラリも使っていきましょう！

3chome.net

2023.08.20

【TypeScript入門】型の自動拡張？wideningの防止と基礎

JavaScriptからTypeScriptを使い始める方向けに【TypeScript入門】型の自動拡張？wideningの防止と基礎

3chome.net

2023.09.22

超簡単フリーランスエンジニアになるには？おすすめの案件探し方

経験年数の少なさで諦めていませんか？経験が浅くてもフリーランスエンジニアになれる方法なり方と理由がここにあり。誰でもできる超簡単なおすすめの案件(仕事)の探し方解説！ベストなITエージェントの使い方はこれだ！時代を生き抜く力はフリーランスにあり

3chome.net

2024.04.22

[PR]

寄付の依頼

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

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