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

エンジニア１

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

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

3丁目オーナー

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

PR

\\ 3丁目オーナー開発アプリ！コンテンツ随時更新中 //

楽しいを知ろう！IT＆プログラミング学習専用教材集サイト | 楽しく学んでスキルアップだ！ Python・JavaScript Developer Learning Library @3丁目Engineer.net

無料でも学べる！わくわくプログラミング言語を学習したい！どんどんエンジニアでスキルアップしたい！楽しく勉強したい人向けにおすすめ教材をピックアップ！役立つ教材集〜生成AI・Python・JavaScript・HTML&CSS・WEBアプリ・ノーコード・設計手法な | #学習コース #オンライン学習 #勉強方法 #学習動...

3chome.net

PR

\\オーナー開発アプリ！コンテンツ随時更新中//

楽しいを知ろう！IT＆プログラミング学習専用教材集サイト | 楽しく学んでスキルアップだ！ Python・JavaScript Developer Learning Library @3丁目Engineer.net

無料でも学べる！わくわくプログラミング言語を学習したい！どんどんエンジニアでスキルアップしたい！楽しく勉強したい人向けにおすすめ教材をピックアップ！役立つ教材集〜生成AI・Python・JavaScript・HTML&CSS・WEBアプリ・ノーコード・設計手法な | #学習コース #オンライン学習 #勉強方法 #学習動...

3chome.net

JavaScriptとTypeScriptの違い

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

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

静的型付けと動的型付け

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

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

型のサポート

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

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

開発の効率性

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

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

生産性

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

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

TypeScript独自の機能

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

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

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

3chome.net

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

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

3chome.net

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

.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入門】.jsや.tsの使い方とフォルダ名の話

【React＆TypeScript入門】クセが強く個性豊かな多くの開発現場を経験した筆者がこれだけは、覚えて損はないと思った、主要な.js/.tsファイルの使い方とフォルダ名を付ける時に気をつけるべきポイントを解説。これだけで格段に変わる話

3chome.net

【React＆TypeScript入門】パッケージ構成意味のある分け方

悩み事の解決方針！アプリ開発始めて最初にぶつかるパッケージ構成どうする問題。どうやって整理していったら良いかほんとに迷いどころ考え方がものすごく分かれるため調べれば調べるほど分からなくなるので解説！フォルダ分けからESLint、ビルドまで解説

3chome.net

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

【React＆TypeScript入門】理解が進むreactとtypescriptの違いの話

JavaScript(js)ライブラリのreactとtypescript(ts)の違いについて簡単に解説します。概念の違いをしっかりと抑えておくとその後の学習や開発の際に理解が進むので身につく速度が変わります。基礎的な概念なので必ず覚えておきましょう

3chome.net

【完全保存版】React Hooksを完全に理解するHooksマスター講座【React18~19対応】

Hooksを制するものはReactを制します。レンダリングのタイミング/状態管理/キャッシュ/メモ化/パフォーマンスチューニング/楽観的UI更新/UIノンブロッキングetc...本講座でさらなるReactへの理解を深めることができます。

www.udemy.com

【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座

Reactを使って「ポケモン図鑑」「ブログ」「ノートメモアプリ」の3種類のアプリを構築する講座です。Reactの基礎は学び終えたからもっと実践的なアプリケーションを作りたい！応用が効くアプリ開発力を鍛えたい！という方は必見の講座内容です。

www.udemy.com

【無料プレゼント付き】就職/転職で有利なポートフォリオに！ 基礎〜応用4つのReactアプリで実践的な開発を学ぼう

Reactを使い「NARUTO図鑑」「音楽プレイヤー」「SNS」「AIコードレビュアー」の4つのアプリを作ります。 Reactの基礎をおえて、エンジニアとしての就職を考え始めてる方は必見です。5000円分のnote記事のプレゼント付き。

www.udemy.com

【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座

Next.jsフレームワークでマイクロブログを実際に構築しながら、Webアプリ読み込み速度やWebパフォーマンスを最大化するSSG/SSRプリレンダリング手法が学べる講座。モダンなフロントエンド技術をキャッチアップしてみよう。

www.udemy.com

さいごに

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

Nest.jsを使ったリクエストパラメータの取得方法【超入門】

BackendにもTypeScriptを使ってみよう！初心者〜中級者向けにNest.jsを使ったリクエストパラメータの取得方法について解説【超入門】

3chome.net

【React＆TypeScript入門】TypeScript, Next.js,MUIで爆速環境構築

大人気のフロント開発言語であるReact＆TypeScriptを初心者向けに爆速環境構築方法〜！Reactとの相性の良い組み合わせTypeScript, Next.js,MUIで環境を整え方を解説します。

3chome.net

【生成AI初心者向け】RAGとは？chunkとは？チャンク化とは解説

生成AIでおなじみのLLM + RAG！そこで重要なchunk（チャンク）、chunk化を中心に初心者向けに解説！chunkについて聞いたことがあるがそもそもよくわかっていない方向けの話！chunk分割やベクトルストアについても触れてみます

3chome.net

【賃貸にスマートロック】玄関におすすめ後付け可能な鍵比較5選

賃貸でも玄関の鍵にスマートロックを後付けすることが可能です。スマホで楽々解錠、急な来客や彼氏彼女に合鍵シェアっておしゃれですね。徹底的に調べて厳選比較しました。【賃貸OK】ITエンジニアがおすすめする賃貸でもできるスマートハウス化計画！

3chome.net

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

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

3chome.net

寄付の依頼

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

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