Laravelとは、PHP言語の開発に役立つフレームワークの1つです。Microsoft製フレームワークである「.NET」チームにも参加していたTaylor Otwellが開発しており、2011年にリリースされました。**LaravelはRuby on Railsのように手軽にアプリケーション開発を始めることが可能であり、PHPフレームワークのシェアとしては1位を誇っています。**
【参考】：[Laravel](http://laravel.jp/)

一方、ReactはJavaScript言語のライブラリの1つです。メタ・プラットフォームズ社（旧Facebook社）により2013年にリリースされました。**ReactはWEB開発におけるシングルページアプリケーション（以下、SPA）や、モバイルアプリケーションの開発に特化しています。**
【参考】：[React](https://ja.reactjs.org/)

本記事では、バックエンド技術であるLaravelと、フロントエンド技術であるReactを連携させるメリットや、連携時の手順について解説します。

PHPとは一体何か？他のプログラミング言語と異なるポイントを解説！

JavaScriptとは？人気のJavaScriptを5分で学ぶ

## LaravelにReactを導入し、シングルページ化する手順

本章では、既存のLaravelプロジェクトにReactを導入する手順を紹介します。本来、「リクエストに対してLaravelがJSONを返し、ReactがJSONをレンダリングしてWebページやアプリ画面を表示する」という構成が一般的なのですが、実現には別途API開発の知識が必要になってきます。そのため、今回はJSON連携部分に関しては割愛することにします。

導入後の動作確認では、Reactコンポーネントがブラウザで表示できたことまでを確認します。

### UIパッケージ導入〜Reactインストール

*Laravelプロジェクトに、Laravel UIパッケージを導入します。*Laravelプロジェクトのルートディレクトリで、以下のコマンドを実行してください。

Laravel UIは認証関連機能の雛型を提供するLaravel公式のライブラリです。「composer」はPHPのライブラリの依存関係を管理するツールであり、「require」をつけて実行することでライブラリを追加することができます。

また、上記で使われているartisan（アーティザン）はPHP用のコマンドラインインターフェースの1種です。PHPアプリケーション上で様々なコマンドを実行することができます。

### シングルページ用のphpファイルを残し、他は除外

*シングルページアプリケーション化のため、サーバーサイドで出力するPHPファイルを1つに絞ります。*今回はLaravelのプロジェクト開始時に作成される「app.blade.php」を出力することにします。「resources/views」フォルダ配下にはapp.blade.phpファイルのみがある状態とし、ファイル内には下記を記載してください。

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

### resources/js/components/Example.jsを修正

app.blade.phpの「id=”app”」部分に、Exampleコンポーネントをレンダリングするよう修正します。
getElementById部分を下記コードに修正してください。

    ReactDOM.render(<Example />, document.getElementById('app'));

これにより、Laravelが動いているWEBサーバはHTMLファイルのみを返し、フロント側でHTMLファイルをレンダリングするようになります。

どのURLからもWEBサーバがapp.blade.phpを返すように修正します。
routes/web.phpに下記を追記してください。

Laravelプロジェクトのルートディレクトリで、以下のコマンドを実行してください。

localhostにアクセスして、ブラウザに「Example Component」が出力されていることを確認してください。確認できれば、Reactを導入できています。

## バックエンドとフロントエンドを分けるメリット

従来のWEBアプリケーション開発では、「ブラウザからのリクエストがあった際にDBからデータを取得し、適切な処理をした後ブラウザにHTMLを返却する」処理を1つのアプリケーションとして捉えていました。

*一方で近年では、「バックエンド」「フロントエンド」といった呼び分けをして技術を細分化する傾向があります。*バックエンドとは「サーバサイド」とも呼ばれ、フロントからのリクエストに応じてDBのデータを参照し、適切な処理を行う部分を指します。今回だとLaravelやPHPがここに当たります。

「フロントエンド」とはバックエンドから取得したデータをどのように画面に表示するかを担当する部分を指します。React.jsやVue.jsもその1つです。

本記事ではLaravel + Reactという「バックエンド」+「フロントエンド」構成でアプリケーションを作りましたが、この構成を用いるメリットについて以下で解説します。

### バックエンドの再利用性が高まる

多くの場合、バックエンドとフロントエンドで担当領域を分けることで、バックエンド側のプロダクトはHTTPリクエストに対してレスポンスを返すAPIとして作成されます。これにより、画面の作りを意識することなく、サーバがデータのみを返すことができるようになります。

*この場合、フロント側で表示方法を調整するだけで、1度作ったアプリケーションをPCやスマホなど別デバイスから利用可能にすることができます。*

*バックエンドとフロントエンドを分けて開発することで、別チームとして開発タスクを割り振り、並行開発が可能になります。*結果として、1チームで開発した場合と比べてより効率的な開発が行える可能性が高いです。

### デプロイサイクルが短くなる

従来のアプリ開発では、少し画面の見せ方が変更になるだけでも、バックエンド部分とフロントエンド部分を両方一気にデプロイする必要がありました。

**一方、バックエンドとフロントエンドを分けることで、フロント側だけの修正をデプロイすることができるので、リリース期間を短く保つことができます。**

## Laravelのフロント技術としてReactを選ぶメリットは？

PHPの人気フレームワークであるLaravelプロジェクトに、フロントエンド技術としてReactを導入する手順や、LaravelとReactの相性について解説します。また、バックエンドとフロントエンドを分けて開発するメリットについても紹介します。

LaravelにReactを導入するには、Laravel/UIコンポーネントをインストールし、BladeテンプレートにReactコンポーネントをレンダリングする設定が必要

バックエンドとフロントエンドを分けるメリットは、再利用性の向上・並行タスク化ができること・デプロイサイクルを短くできることの3つ

Laravelのバージョン5ではフロント技術としてVueが標準だが、Reactを選択しても問題ない

LaravelとReactは相性抜群？導入手順やメリットを解説

**React（React.js、読み方：リアクトジェイエス）とは、JavaScriptのライブラリーの1つ**です。ここでは、Reactの概要やNext.jsとの違い、将来性について解説します。

プログラミングで使うライブラリとは？メリット・デメリットを解説

Reactは、Webサービス・アプリケーションのUIに関するコードに特化したライブラリーで、SNSで有名なメタ・プラットフォームズ社（旧Facebook社）によって開発されました。*Facebook・Instagramなどの著名なSNSで利用されており、日本でも注目され始めているライブラリー*です。

Reactはオープンソースとして公開されており、**常に新しいバージョンへのアップデート**されています。日本でもReact経験者のエンジニアの要求は高まっており、今後Reactは、フロントエンドエンジニアにとってなくてはならないものになる可能性があります。

React.jsと同じく「.js」を持つものの1つに、Next.jsがあります。*NextはJavaScript上で使えるアプリケーションフレームワーク*で、サーバー機能などを有しています。一方、ReactはUI構築に役立つライブラリであるためサーバー機能などは持たない点が両者の大きな違いです。

さらに、Nextはフレームワークであるため、フレームワーク全体がNext.jsの記法や開発状況に依存してしまう点には注意が必要です。一方、**Reactはさまざまなフレームワークの一部分に導入できるライブラリであり、既存のアプリケーションにも容易に導入**できます。

*Reactはその導入・改造・管理の容易さから多くのフロントエンドエンジニアに支持*されており、日に日に需要が高まっているライブラリーです。メタ・プラットフォームズ社による安定的なアップデートもあるため、今後のフロントエンド開発においてさらに活用が広がると考えられます。

一方、**現時点では日本でReactを扱えるエンジニアがまだまだ少ないのも事実**です。今のうちからReactを学習し扱えるようになっておけば、今後Reactが日本のフロントエンド開発の主流となった際に活躍が期待できます。

Reactの需要が高まっている背景には、導入しやすさや管理のしやすさといったReactの特徴があります。ここでは、React公式サイトでも紹介されている**「宣言的なView」「コンポーネントベース」「1度学習すれば、どこでも使える」**の3つの特徴について解説します。

参考：[React ユーザーインターフェース構築のためのJavaScriptライブラリ](https://ja.reactjs.org/)

### 「宣言的なView」が効率的でデバッグもしやすい

Reactの特徴としてまず挙げられるのが「宣言的なView」である点です。宣言的（Declarative）なViewでは、*対象のサイト・アプリケーションを「このような見た目にしたい」という宣言から設計*できます。これにより設計自体がシンプルになり、誰にでもわかりやすいのが特徴です。

また、変更や更新が必要なときでも、**Reactでは全体ではなく必要な部分だけを変更・更新**します。結果として、効率的なUIの作成ができるだけでなく、サイト・アプリケーションの将来の見通しを立てやすく、デバッグ作業の容易化にも寄与します。

### カスタマイズしやすい「コンポーネントベース」

Reactがコンポーネントベースであることは、管理・改修のしやすさに直結しています。*Reactでは細かく分けられたコンポーネント（構成要素）を組み合わせてインターフェースを構築*します。変更が生じた場合にも、該当するコンポーネントを変更するだけで済む点はReactの大きな特徴です。

また、**1度使ったコンポーネントは再利用して別のサイト・アプリケーションでも利用可能**です。これは開発工数を削減できる便利な特徴で、変更の容易さと併せて、Reactのカスタマイズ性の高さを実現している要素と言えます。

### 既存技術との組み合わせが容易で「1度学習すれば、どこでも使える」

Reactは、既存のアプリケーションに組み込まれることを想定して用意されているライブラリーです。Reactを活用して*新しい機能を追加するようなケースにおいても、既存のソースコードを書き換える作業は生じません*。既存技術との組み合わせやすさはReactの魅力の1つです。

また、PC向けアプリケーションだけでなく、Reactはスマホアプリの作成にも活用できます。**React Nativeを使えば、Android・iOS問わずスマホアプリの開発にReactを使えます**。UberEatsやSkypeなどの著名なアプリも、React Nativeを使用していることで知られています。

参考：[React Native](https://reactnative.dev/)

React初心者向けの入門として、*Reactの基本コンセプトを学ぶ方法と、実際に手を動かしてReactを使ってみる方法*について紹介します。

Reactの基本コンセプトを学ぶには、*公式のガイドを参照する方法が有効*です。ReactはJavaScriptのライブラリであるため、学習のためにはJavaScriptの基礎知識が前提とされています。JavaScriptの知識がない人は先に基礎を身につけておいたほうが効率的です。

ガイドでは、プログラムの例を見ながらReactの使い方を学習できます。**DOM更新方法やコンポーネントの定義方法、コードの再利用方法などReactの特徴を踏まえた基礎的な知識**を得られます。次のチュートリアルを実施する際も、確認できる実践的な補助教材としての位置付けです。

参考：[React 一段階ずつ学べるガイド](https://ja.reactjs.org/docs/hello-world.html)

### 初心者はまずチュートリアルを利用

Reactの基本コンセプトや基礎知識を理解できたら、実際に手を動かしてReactを使ってみることが大切です。*公式のチュートリアルを活用すれば、詳しいサポートを受けながらReactを練習*できます。前述のガイドと同様、JavaScriptの基本スキルが求められる点には注意が必要です。

チュートリアルでは、最終的に簡単なゲームを完成させることを目的とします。各ステップにおける詳細な説明のほか、**要所で正しいコードを確認できるため、初心者でも効率的にReactを学習可能**です。

参考：[チュートリアル：Reactの導入](https://ja.reactjs.org/tutorial/tutorial.html)

フロントエンド開発の開発での活用が広がっているReactですが、*利用に際しての注意点*がいくつかあります。

### ドキュメントは英語がメイン

Reactを導入する企業は増えているものの、前述のとおり日本ではまだ使用実績が少ないのが現状です。したがって*参照できるWeb上のドキュメントには日本語のものがまだ少なく、英語がメイン*である点には注意する必要があります。

この背景には日本でReactを扱えるエンジニア数もそれほど多くないことがあります。ただ、公式ガイド以外にも、書籍・動画教材は探せば見つかります。**日本語のドキュメントが少なく学習に手間がかかる側面はあるものの、先駆けてReactを学んでおく価値はある**と考えられます。

### Reactが適さないWebサービスもある

Reactは*仮想DOMによって、Webの動作を軽くする仕組みを採用*しています。メモリにDOM構造を記憶しておき、ユーザーの操作で変更された部分だけを更新することで、軽快な動作を実現可能です。反面メモリ消費が大きく、アクセス時のタイムラグが課題と言えます。

マップサービスのようにユーザーの操作で頻繁に表示を変更するようなアプリケーションにおいては、仮想DOMによる軽快な動作がメリットとして作用します。一方、**ユーザーがほとんど操作する必要がないページでは、アクセス時のタイムラグがUXの低下を招く**ため注意が必要です。

## 将来性の高いReactを活用できるエンジニアになろう

*Reactはシンプルで扱いやすく汎用性が高いJavaScriptのUIライブラリー*です。日本での実績はまだ少ないとは言え、今後のフロントエンド開発においてなくてはならないものになる高い将来性を秘めていると考えられます。

Reactの活用が広がるに伴って、**Reactを扱えるエンジニアの需要も高まってくることが予想**されます。フロントエンドエンジニアの方は、公式のガイド・チュートリアルを中心に学習を進め、Reactを使いこなせるようになっておくことをおすすめします。

フロントエンドエンジニアとバックエンドエンジニアを詳しく解説！

Reactは、JavaScriptのUIのコードのライブラリーです。デバッグやカスタマイズのしやすさや、再利用が容易な汎用性の高さから、多くのフロントエンドエンジニアの支持を獲得しています。本記事ではReactの概要について初心者向けにわかりやすく解説します。

Reactは、著名なSNSでも採用されているJavaScriptのUIに特化したライブラリーである

扱いやすさや汎用性の高さから、日本での活用実績は少ないものの、今後需要が高まるものと考えられる

Reactは公式のガイドやチュートリアルを利用して効率的に学習できる

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

フロントエンジニアにHTMLは必須の言語ですが、HTMLに慣れてくると、ついついミスを犯しがちです。基本的なHTMLコードは、基本的に開始タグと閉じタグがセットになっていなければなりませんが、うっかり閉じタグの記述を忘れると画面レイアウトが崩れる原因になることがあります。

こうした**コーディングミスを簡単に発見してくれるのが「HTMLエラーチェッカー」**です。一時的に、ChromeストアからHTMLエラーチェッカーがなくなっ たことがありましたが、現在は改良版がアップされていますので、問題なく利用できます。

HTMLの編集ソフトおすすめ5選！初心者向け【2021年版】

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

### HTMLエラーチェッカーの概要

HTMLエラーチェッカーはWebブラウザ、Chromeの拡張機能です。HTMLエラーチェッカーでは**Webのレイアウトの崩れ、表示不具合の原因であるHTML構文ミス（閉じタグの記述漏れ）を検出するツール**です。

### HTMLエラーチェッカーはHTMLの品質向上に必要

HTMLは多少のミスは許容されてしまうため、案外ミスを見逃しがちですが、場合によっては表示の不具合でユーザに迷惑を掛け、商用サイトでは受注減や企業への信頼低下につながりかねないため、品質にはこだわるべきです。

**HTMLエラーチェッカーを利用することで、品質向上の一助となる**ため、コーディングを仕事とする方、フロントエンジニアはぜひ使うべきツールです。

### HTMLエラーチェッカーができること

HTMLエラーチェッカーと聞くと、全てのエラーを見つけてくれるように気がしますが、実はできることは以下の2点のみに限定されます。

*▪開始・終了タグの閉じミスの検知* 
*▪エラー件数・エラー箇所の報告*

それでも、HTML記述ミスで最も多いと言われるHTMLタグの閉じ忘れや閉じミスを検知してくれるのは大変ありがたい機能です。さらに、この**エラー検知が簡単に行えるため、コーディングミスの不安が解消し、生産性向上**にもつながります。

### HTMLエラーチェッカーを使う人

ここまで述べた通り、HTMLエラーチェッカーはHTMLコーディングにおけるミスの防止に有効ですが、他にサイト公開前チェックや納品前チェックでも使えます。そのため、コーディング担当者は当然ですが、**品質管理を行うWeb担当者やWebディレクターなど、Web制作に関わるすべての人に役立つツール**と言えます。

## HTMLエラーチェッカーを使ってみる

HTMLエラーチェッカーの概要や利用目的を理解したところで、**実際にHTMLエラーチェッカーを導入**してみましょう。

### Chromeの拡張機能として追加する

Chromeの拡張機能追加は大変簡単です。**以下のHTMLエラーチェッカーのリンクを開き、『Chromeに追加』のボタンを押すだけ**です。『HTMLエラーチェッカーがChromeに追加されました』というメッセージが表示されれば完了です。
*【参考】：[HTMLエラーチェッカー（Chromeウェブストア）](https://Chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja)*

*《注意》*：ブラウザとしてChromeが前提ですので、HTMLエラーチェッカーを使う場合は、Chromeがインストールされている必要があります。新たにChromeをインストールされる方は以下のサイトを利用してください。
*【参考】：[Google Chrome をダウンロードしてインストールする（Google Chrome ヘルプ）](https://support.google.com/Chrome/answer/95346?hl=ja&co=GENIE.Platform%3DDesktop)*

### HTMLエラーチェッカーの使い方

前述のChromeの拡張機能としてHTMLエラーチェッカーが追加されると、Chrome画面の右上に、「拡張機能」のアイコンが追加されます。続いて、以下の手順でHTMLエラーチェッカーを利用します。

*1.Chromeを起動し、チェックをしたいWebページにアクセスする*
*2.Chrome画面の右上、「拡張機能」アイコンをクリックし、『HTMLエラーチェッカー』のアイコンを押す*
*3.Webページのエラーチェックが行われ、結果が表示される*

▪エラーが無い場合は、青色のポップアップで「タグはおそらく完璧です」と表示されます。
▪エラーが発見された場合は、赤色のポップアップで「〇個のタグが対応していません」という表示とともに、その下にエラー行とエラー内容が表示されます。

### 自動エラーチェック機能を使ってみる

HTMLエラーチェッカーには、オプションに「自動チェック機能」があります。
**自動チェック機能を設定しておくと、Webページを見るだけで自動的にエラーチェック**してくれます。

HTMLエラーチェッカーのアイコンを右クリックして表示される『拡張機能を管理』をクリックし、「拡張機能」の画面が開いたら『オプション』をクリックします。
次に「自動チェック機能を有効にする」ボタンを『ON』にします。

自分が担当しているWebページなど、常にチェックするページを指定したい場合は、その下にある
*「フィルタリング用のURLを設定」欄にページのURLを入力しておくと、指定したページだけが毎回チェックされる*ので、変更時などのチェック漏れを防げます。

*■オリジナルの警告ルールを設定する*

**HTMLエラーチェッカーは、独自のエラーチェックのルールの追加が可能**です。

例えば、担当しているWebサイトのSSL化を行った際に、httpのWebページが残っていないかなどのチェックが自動で行えます。

HTMLエラーチェッカーの設定画面下部の「フィルタリング用のキーワードを設定」入力欄に、http:// （チェックしたいサイトのドメイン）を記述しておくと、サイト内にhttpページが残っているとエラーが表示されます。

### ローカルファイルのチェックができない問題

HTMLエラーチェッカーには当初バグがあり、ローカルファイルのチェックで**「リロードしてください」と表示され、解析ができないという問題がありましたが、既にバグは解消**していますので、過去にHTMLエラーチェッカーをうまく使えなかった方は改めて試してみてください。

## オンラインHTMLエラーチェックサイトを活用

HTMLエラーチェッカーをChromeの拡張機能で利用する方法を説明しました。実際に試した方は、その便利さを実感されたことと思います。しかし、**HTMLエラーチェッカーはシンプルな反面、エラーチェック機能が限定**されています。

「開始・終了タグの閉じミスの検知 」機能だけあれば十分だという方は、そのままHTMLエラーチェッカーを活用してください。一方、*他の文法チェック機能が欲しいという方には、オンラインで利用できるHTMLエラーチェッカーサイトを1つご紹介*します。

*「Markup Validation Service」*はWeb技術の標準化を推進する、非営利団体「W3C（World Wide Web Consortium）」が無償で提供している**HTMLの文法チェッカーのオンラインサイト**です。

HTMLの仕様を決めているW3Cが提供しているだけあって、チェックの精度は高いと評判です。HTML5への対応などもあり、*おすすめのHTMLエラーチェックサイト*ですが、Webサービス版は時に処理が重たいのと、英文である点が弱点です。

ただ、Chromeの自動翻訳機能を使えば、多少翻訳ミスはあるものの、かなり使えるサービスです。

オンラインサービスと、オープンソースによるローカルで動作するツールの2種類がありますが、ここではオンライン環境で気軽に利用できるサービスを紹介します。

### Web版 W3C Markup Validatorの使い方

使い方は至って簡単で、下記のサイトにアクセスし、**「Address欄」にチェックしたいWebサイトのURLをペーストするだけ**です。実際に試して見ると分かりますが、大半のWebページは何らかのエラーや警告が表示されます。

エラーがあること自体は大きな問題ではありませんが、無視して良いエラーと、放置できないエラーがあるため、その見極めができるようになるとこのツールはさらに便利になります。

*【参考】：[W3C Markup Validation Service](https://validator.w3.org/)*

### Web版 M3C Markup Validatorの3つの機能

**Web版のW3C Markup Validatorにはチェック機能が3種類**あり、画面上部の3つのタブから以下の方法を選択できます。

*▪Validate by URI「URLで検証する」*
*▪Validate by File Upload「ファイルアップロードによる検証」*
*▪Validate by Direct Input「直接入力による検証」（HTMLソースを貼りつける）*

最も多く使うのはURLによる検証だと思いますが、まだWebサイトにアップできない作成中のHTMLファイルや、ソースコードのある部分だけをチェックしたい場合などには、タブを切り替えてそれぞれの機能を使い分けすると良いでしょう。

「CSS Validation Service」は、同じく**W3C提供のCSSの文法チェックサービス**です。使い方は「Markup Validator」とほぼ同じですので、「Markup Validator」を使える方は抵抗なく使えるでしょう。

*【参考】：[CSS Validation Service](https://jigsaw.w3.org/css-validator/validator.html.ja)*

## 高品質のHTMLを作成するスキルを身に付けよう

HTMLの文法エラーはチェックツールを利用すると、かなりのエラーメッセージが表示され、逆にエラーつぶしで余計な手間が掛かったという話もあります。実際のところ、エラーがあっても表示や動作に問題がないケースもあり、どこまで修正すれば良いのか悩ましいところです。

基本的には表示に影響がなく、互換性などで問題が発生していなければ、多少のエラーには目をつぶっても構わないでしょう。

しかし、HTMLを勉強中の方、初心者の方は、表示などに問題がなくともエラーチェックの結果は確認する癖をつけましょう。

第三者によってエラーチェックが行われ、エラーが多過ぎると、エンジニアとしてのスキルに疑問符が付きかねません。ここで紹介した**HTMLエラーチェッカーを活用し、高品質のHTMLを作成する癖**をつけておきましょう。

ウェブデザイナー必見！HTMLのおすすめ資格を比較解説します

HTMLでできることは少ない？できないことやタグも一覧でまとめた

HTML言語はコンパイル機能がなくバグ解消に苦労しがちです。その解消策として、Chromeの拡張機能、HTMLエラーチェッカーについて紹介します。併せてHTML文法チェックに適したオンラインのHTMLエラーチェックサイトも紹介しますので、ぜひ活用してください。

HTMLエラーチェッカーはChromeの拡張機能として利用でき、インストールや利用方法が非常に簡単である

HTMLの文法チェックを行うには、オンラインサービスのW3C Markup Validatorがおすすめである

高品質のHTML作成を心掛けると、第三者からの評価も上がるので、HTMLエラーチェッカーの利用を心掛けよう

HTMLエラーチェッカーは必須？ミスの予防＆品質向上に最適！

**Microsoft社は2021年11月17日（米国時間）に、オープンソース・プログラミング言語「TypeScript」の最新版、「TypeScript 4.5」**を公開しました。

TypeScript 4.5では「Awaited」型の導入を初めとして、数多くの新しい機能追加、改善などがあり、プログラミングの生産性向上、パフォーマンス向上などのメリットがあります。

TypeScriptは「JavaScript」をベースとするオープンソース・プログラミング言語で、JavaScriptとは互換性を持ち、大規模開発にも適しています。

*TypeScriptはJavaScriptのスーパーセット（上位互換）*の位置づけにありますが、知名度ではまだJavaScriptに後れを取っています。

では、両者は何が違うのか、TypeScriptはどんなメリットを持っているのか、TypeScriptはJavaScriptに置き換わるのかなど、「TypeScriptの超入門編」として解説をしていきます。

*【参考】：[Announcing TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/)*

**「TypeScript」は大規模開発向けに開発された「JavaScript」のスーパーセットです。**

JavaScriptは1995年に誕生しましたが、もともと大規模開発には向いておらず、Webアプリケーション開発が活発になるにつれて、その弱点が顕在化し始めました。

何度もその対応を迫られましたが、ベンダー同士のコンセンサスには至らず、ここで「JavaScript」の進化が止まってしまったのです。

一方で、JavaScriptのコミュニティでは、その解決策が模索され続け、*Microsoft社から2012年に「TypeScript」が発表されました*。

TypeScriptはJavaScriptのスーパーセットとして、「モジュール性」や「型」などの特徴を備えて登場し、特に大規模開発で活用されるようになりました。Google社ではTypeScriptを6番目の社内標準言語として採用するなど、大規模開発で活用されています。

TypeScriptとは？JavaScriptとの違いも解説！

TypeScriptのTypeとは「型」のことです。言ってみれば**TypeScriptは「型」が付いた「JavaScript」**です。

プログラミングでは型があることのメリットが大きいため、AltJS（代替JavaScript言語）の代表格としてTypeScriptの人気が高まっています。

TypeScriptで書かれたコードはJavaScriptにコンパイルされて動作するため、*JavaScriptが実行できるOSやブラウザであれば、TypeScriptは問題なく利用可能です*。続いて、TypeScriptの特徴を列挙してみましょう。

**TypeScriptはJavaScriptに型（Type）が追加されたスーパーセット（上位互換）**であるため、JavaScriptでも静的型付けを使いたい場合に代替することが可能です。

*▪実行時のエラーが起きにくい*

TypeScriptはタイプセーフです。 型があることでコンパイル時にエラーが分かり、実行時のエラーを回避できます。

*▪型推論により型を自動決定*

TypeScriptには型推論があるため、すべてに型指定をする必要がなく、*プログラマのコーディング作業を軽減できます*。

オープンソースであることから、元の実装を確認することができ、TypeScript側に問題と思われる箇所があるようであれば、自らプルリクエストを出したり、issueを立てることが出来ます。
また、TypeScriptはMicrosoft社が開発したオープンソース言語であるため、品質に対する信頼性は高いと思われます。

### 「TypeScript」と「JavaScript」の違い

TypeScriptはJavaScriptの進化系のプログラミング言語です。その進化した部分が両者の違いです。では、TypeScriptは何が進化したのかを見ていきましょう。

JavaScriptは実行時にデータ型が自動で決められます。これを動的型付けと言い、コーディングが手軽に行える反面、実行をしてみないとエラーが見つからないという弱点があります。

一方、TypeScriptは*静的型付けを採用*しており、変数のデータ型をあらかじめ決めておけるため、コンパイル時にエラーを判別でき、コードが読みやすいことから大規模開発に向いています。

*▪TypeScriptはJavaScriptの構文が使える*

TypeScriptはJavaScriptの上位互換であるため、JavaScriptの構文が使え、JavaScriptのライブラリやフレームワークも利用可能です。

## 「TypeScript」のメリットとデメリット

TypeScriptの特徴を挙げましたが、この特徴によって導き出されるメリット・デメリット、それぞれを確認しておきましょう。

最初にTypeScriptのメリットを見ていきましょう。

TypeScriptで型定義をすることで、定義された関数がどういった型のデータを必要としていて、どういった型のデータを返すのかが一目瞭然となります。クラスが作成できるため、JavaScriptと比べてコードの記述を大幅に簡略化できます。この結果、**コードは短く読みやすくなり、既存のコードを読み込む時間が減りコーディングの負荷や無駄を軽減できます**。

*▪「JavaScript」との互換性が高い*

TypeScriptはJavaScriptとの互換性が高いため、JavaScriptのライブラリやフレームワークを活用できる他、JavaScriptエンジニアを短期間でTypeScriptエンジニアとして戦力化できるのも強みです。

TypeScriptは静的型付け言語のため、あらかじめ変数の型を宣言できることから、コンパイル時点でエラーを排除できます。そのためJavaScriptのような実行時エラーが起きにくいのです。

*▪Visual Studio が強力にサポート*

「Visual Studio」や「Visual Studio Code」などのエディタは、TypeScriptの入力支援機能をサポートしており、開発効率が格段に向上します。

TypeScriptはJavaScriptの進化系でもあり、JavaScriptと比較してデメリットは少ないです。しかし、強いてあげるならば以下が数少ないデメリットと言えます。

*▪「JavaScript」エンジニアも学習が必要*

JavaScriptが扱えるエンジニアでも、**TypeScriptでの書き方自体を覚えるのはもちろんのこと、データ型の定義の仕方などのJavaScriptにはない機能を新たに覚える必要**があります。その学習ハードルは決して高くはありませんが、TypeScriptの学習が必要な点はデメリットと言えるでしょう。

## 「JavaScript」ではなく「TypeScript」をすすめる理由

Webアプリケーションのフロントエンド開発では、HTMLとCSSに加えて、JavaScriptを習得しておけば、フロントエンジニアとして不足はないはずです。中には、折角JavaScriptを学んだのに、さらにTypeScriptを覚えるのは面倒だと考えるエンジニアがいるかもしれません。それでも皆さんにTypeScriptをおすすめするのは、**TypeScriptが大規模開発に適した言語であること、需要が急増し、将来性が高いため**です。

**TypeScriptとJavaScriptを求人数で比較**してみましょう。

*     言語               求人数*　　　　　
*「TypeScript」    373件*
*「JavaScript」    1,715件*　

上記の通りまだまだJavaScriptの求人数には劣るものの、JavaScriptは最低限のスキルとして求められている中、TypeScriptでの開発を指定したフロントエンドエンジニア求人は徐々に増えています。

*【参考】：[マイナビAGENT（TypeScriptエンジニア ）](https://mynavi-agent.jp/jobsearch/job1_01/kw_TypeScript/result.php)*
*【参考】：[マイナビAGENT（JavaScriptエンジニア）](https://mynavi-agent.jp/jobsearch/job1_01/kw_JavaScript/result.php)*

TypeScriptはMicrosoftが開発した言語ですが、次第に評価が高まり、Microsoft社以外にもGoogleやBMW、VMWare社のWebページはTypeScriptで構築されるなど、フロントエンドの標準言語になりつつあります。

実際に、TypeScriptを利用したエンジニアの92%が満足しているという調査結果もあり、エンジニアの間でも既に高い評価を得ています。今回のMicrosoft社による**「TypeScript 4.5」のリリースによって、その人気や需要はさらに高まるでしょう**。

お役立ち記事