SQL Server Expressとは、**SQL Serverの無償版（無料エディション）**を指します。SQL Serverの機能や拡張性に制限を設けて無償提供しており、最新版はSQL Server 2019 Expressです。
参考：[SQL Server 2019](https://www.microsoft.com/ja-jp/sql-server/sql-server-2019)

SQL Serverは、*マイクロソフト社が開発したリレーショナルデータベース管理システム（RDBMS）*を指します。SQL Server Expressは、主にデスクトップ・ウェブ・小規模サーバを想定して公開しており、**Windowsとの親和性が高い**ので人気があります。

### SQL Server Expressのダウンロードは？

SQL Serverのダウンロードは、ライセンスに応じてメディアを用いるか、マイクロソフト社公式ダウンロードサイトからインストーラをダウンロードし、実行します。

SQL Server Expressは無償版ですので、**マイクロソフト社公式ダウンロードサイトよりインストーラをダウンロードし実行**します。ダウンロードサイトの「SQL Server 2019 Express」の記載が中段以降にありますので、「今すぐダウンロードする」をクリックします。
参考：[SQL Server Download](https://www.microsoft.com/ja-JP/sql-server/sql-server-downloads)

### SQL Serverのサポート期限は？

SQL Serverのサポート期限は、**マイクロソフト社ポリシー**によって決められています。
参考：[製品およびサービスのライフサイクル情報の検索 SQL Server](https://docs.microsoft.com/ja-jp/lifecycle/products/?products=sql-server)

現在サポートされているSQL Serverのバージョンは以下の通りです。
・*SQL Server 2019*
　開始日: 2019/11/04
　終了日: 2030/01/08
・*SQL Server 2017*
　開始日: 2017/09/29
　終了日: 2027/10/12
・*SQL Server 2016*
　開始日: 2016/06/01
　終了日: 2026/07/14
・*SQL Server 2014*
　開始日: 2014/06/05
　終了日: 2024/07/09
・*SQL Server 2012*
　開始日: 2012/05/20
　終了日: 2022/07/12

Windowsのサポート期限も、**マイクロソフト社ポリシー**によって決められています。
参考：[製品およびサービスのライフサイクル情報の検索 Windows](https://docs.microsoft.com/ja-jp/lifecycle/products/?products=windows)

現在サポートされているWindowsのバージョンは以下の通りです。
・*Windows Server 2019*
　開始日: 2018/11/13
　終了日: 2029/01/09
・*Windows Server 2016*
　開始日: 2016/10/15
　終了日: 2027/01/12
・*Windows Server 2012 R2*
　開始日: 2013/11/25
　終了日: 2023/10/10
・*Windows Server 2012*
　開始日: 2012/10/30
　終了日: 2023/10/10
・*Windows 10 Home and Pro*
　開始日: 2015/07/29
　終了日: 2025/10/14
・*Windows 8.1*
　開始日: 2013/11/13
　終了日: 2023/01/10

SQL Server Expressを利用する際には**Windowsのサポートバージョン**も合わせてご確認ください。

## SQL Server 2019 Expressのインストールは？

SQL Server 2019 Expressのインストールは、「**Microsoft® SQL Server® 2019 Express**」からモジュールをダウンロードし、作業を行います。

対応Windows・モジュールバージョン・ファイル名は、以下の通りです。

・*対応Windows*
　Windows 10、Windows Server 2016、Windows Server 2019
・*モジュールバージョン*
　15.0.2000.5
・*ファイル名*
　SQL2019-SSEI-Expr.exe
参考：[Microsoft® SQL Server® 2019 Express](https://www.microsoft.com/ja-jp/download/details.aspx?id=101064)

### SQL Server 2019 Expressの具体的なインストール手順

SQL Server 2019 Expressインストールの際には、ダウンロードしたインストーラを起動します。インストール手順は以下の通りです。

・**インストールの種類の選択**
　「基本(B)」「カスタム(C)」「メディアのダウンロード(D)」から選択します。
　通常は「基本(B)」で問題ありません。
・**ライセンス条項の確認**
　確認後、「同意する(A)」をクリックします。
・**SQL Serverのインストールの場所の指定**
　デフォルトインストール先で問題ありません。
　確認後、「インストール(I)」をクリックします。
・**インストール実行**
　作業完了を待ちます。
・**インストール完了後、カスタマイズ・SSMSのインストール**
　SSMSはSQLインフラストラクチャを管理するための統合環境です。
　ここで「SSMSのインストール」することで、追加インストールが可能です。
　参考：[SQL Server Management Studio (SSMS) のダウンロード](https://docs.microsoft.com/ja-jp/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15#download-ssms)
・**インストール完了**
　ここで使用可能になります。

インストール後の動作確認は、SSMSから行うと便利です。スタートメニューから「**Microsoft SQL Server Management Studio 18**」をクリックします。起動後、SQL Serverのデータベースの種類・サーバー名・認証を指定し、ユーザ名・パスワードを入力します。ここでSQL Serverに接続できたら正常動作です。

### SQL Server 2017 Expressのインストールは？

SQL Server 2017 Expressのインストールは、「**Microsoft® SQL Server® 2017 Express**」からモジュールをダウンロードし、インストール作業を行います。

<br/>
・*対応Windows*
　Windows 10、Windows 8、Windows 8.1、Windows Server 2012、Windows Server 2012 R2、Windows Server 2016
　※Windows 8はサポート終了
・*モジュールバージョン*
　14.0.1000.169
・*ファイル名*
　SQLServer2017-SSEI-Expr.exe
参考：[Microsoft® SQL Server® 2017 Express](https://www.microsoft.com/ja-jp/download/details.aspx?id=55994)

インストールの際にはダウンロードしたインストーラを起動します。

### SQL Server 2016 Expressのインストールは？

SQL Server 2016 Expressのインストールは、「**Microsoft® SQL Server® 2016 Service Pack 2 Express**」からモジュールをダウンロードし、インストール作業を行います。

<br/>
・*対応Windows*
　Windows Server 2016、Windows 10、Windows Server 2012 R2、Windows 8、Windows 8.1
　※Windows 8はサポート終了
・*モジュールバージョン*
　13.0.5026.0
・*ファイル名*
　SQLServer2016-SSEI-Expr.exe
参考：[Microsoft® SQL Server® 2016 Service Pack 2 Express](https://www.microsoft.com/ja-jp/download/details.aspx?id=56840)

インストールの際には、ダウンロードしたインストーラを起動します。

### SQL Server 2014 Expressのインストールは？

SQL Server 2014 Expressのインストールは、「**Microsoft® SQL Server® 2014 Service Pack 2 (SP2) Express**」からモジュールをダウンロードし、インストール作業を行います。

<br/>
・*対応Windows*
　Windows 10、Windows 7 Service Pack 1、Windows 8.1、Windows Server 2008 R2、Windows Server 2008 R2 SP1、Windows Server 2012、Windows Server 2012 R2
　※Windows 7 Service Pack 1、Windows Server 2008 R2、Windows Server 2008 R2 SP1はサポート終了
・*モジュールバージョン*
　12.0.5000.0
・*ファイル名*
　JPN\x64\SqlLocalDB.msi、JPN\x86\SqlLocalDB.msi
　SQLEXPR\_x64\_JPN.exe、SQLEXPR\_x86\_JPN.exe、SQLEXPR32\_x86\_JPN.exe
　SQLEXPRADV\_x64\_JPN.exe、SQLEXPRADV\_x86\_JPN.exe、SQLEXPRWT\_x64\_JPN.exe、SQLEXPRWT\_x86\_JPN.exe
　SQLManagementStudio\_x64\_JPN.exe、SQLManagementStudio\_x86\_JPN.exe
参考：[Microsoft® SQL Server® 2014 Service Pack 2 (SP2) Express](https://www.microsoft.com/ja-jp/download/details.aspx?id=53167)

インストールの際には、あらかじめ**Microsoft .Net Framework 3.5 SP1を有効にし、 Microsoft .Net Framework 4.0**をダウンロードしてインストールします。
参考：[Microsoft .NET Framework 3.5 Service Pack 1](https://www.microsoft.com/ja-jp/download/details.aspx?id=22)
参考：[Microsoft .NET Framework 4 (Web インストーラー)](https://www.microsoft.com/ja-jp/download/details.aspx?id=17851)

## SQL Server Expressインストール後はデータベースを業務活用しましょう

SQL Serverはマイクロソフト社のRDBMSのため、Windowsでよく利用されています。また、SQL Server Expressは無償版のため利用者が多いのが特徴です。SQL Server Expressがインストールできたら、実際に*データベース作成やテーブル作成*を進めていきます。

デスクトップ・ウェブ・小規模サーバの業務では十分対応できるため、**実際に業務活用すること**をおすすめします。

SQL Server Expressとは、SQL Serverの無償版で、主にデスクトップ・ウェブ・小規模サーバでの利用を想定したエディションです。ここでは、SQL Server Expressのインストールの準備から手順まで順を追って説明していきます。

SQL Serverはマイクロソフト社が開発したRDBMSであり、Windows環境で使われています

SQL Server ExpressとはSQL Serverの無償版を指し、主にデスクトップ・ウェブ・小規模サーバ向けのエディションです

インストールは簡単ですぐに利用可能となり、おすすめのRDBMSです

SQL Server Expressのインストール手順を徹底解説！

## Ruby on Railsのインストール方法

**Ruby on Railsとは、Rubyというプログラミング言語のフレームワークを指します。**Ruby on Railsを使用すれば開発効率の向上が期待できるため、Rubyとセットで学習する方も多いでしょう。しかし、「Ruby on Railsがインストールできない」と悩まれる方も少なくありません。その理由の1つは、Windows・Mac・LinuxなどOSによってRubyの環境構築が違うためです。ただし、*Ruby on Railsのインストール方法は、OSによってほとんど変わりません。*

ここでは、OSごとのRuby on Railsのインストール方法について詳しく紹介します。なお、Rubyのインストールは完了していることを前提に解説します。そのためRubyのインストールができていない方は、下記のサイトからインストーラをダウンロードして、Rubyをインストールしましょう。

【参考】：[RubyInstaller for Windows ](https://rubyinstaller.org/downloads/)

Ruby初心者向けに概要・特徴・作れるもの・勉強方法を解説！

*まずはコマンドプロンプトを起動し、「ruby -v」というコマンドを実行して、Windows環境でRubyがきちんとインストールされているかを確認しましょう。*Rubyのバージョンが表示されれば、無事インストールできています。

**次に「gem install rails」というコマンドを実行して、Ruby on Railsをインストールしましょう。**そして「rails -v」というコマンドを実行し、Ruby on Railsがきちんとインストールされているか確認しましょう。Ruby on Railsのバージョンが表示されれば、無事インストールできています。これでWindowsの場合のRuby on Railsのインストールは完了です。

*まずは端末を起動し「ruby -v」というコマンドを実行して、Linux環境でRubyがきちんとインストールされているか確認しましょう。*Rubyのバージョンが表示されれば、無事インストールできています。なお端末とは、Windowsで言うとコマンドプロンプトのようなものです。その後のRuby on Railsのインストール方法は、Windowsと同様なため省略します。

*まずはターミナルを起動し「rbenv version」というコマンドを実行して、Mac環境でRubyがきちんとインストールされているかを確認しましょう。*Rubyのバージョンが表示されれば、無事インストールできています。なおターミナルとは、Windowsで言うとコマンドプロンプトのようなものです。Ruby on Railsのインストール方法は、Windowsと同様なため省略します。

## Rubyのバージョン指定方法（MacOS）

Ruby on Railsのインストール方法は難しくないことは理解できたでしょうか。しかし*Rubyやデータベースのインストール方法、バージョン更新などはOSによって違いがあります。*例えばWindowsでRubyのバージョンを指定する場合には、「uru」というマルチプラットフォームに対応したコマンドラインツールを使用するのが一般的です。ここではMacOSを利用する場合に、Rubyのバージョン指定を行う方法について詳しく解説します。

**まずはRubyのバージョンを確認するために、「rbenv versions」というコマンドを実行しましょう。**「rbenv version」ではないため注意してください。このコマンドを実行すると、インストールされているRubyのバージョン一覧が確認できます。*一覧の中で「＊」が付いているバージョンが、現在のRubyのバージョンです。 *バージョンの確認ができたら、Rubyのバージョン指定方法について見ていきましょう。

**「rbenv versions」というコマンドで確認した一覧に、インストールしたいRubyのバージョンが存在しない場合、まずHomebrewを更新しましょう。**HomebrewとはMacOSオペレーティングシステム上のパッケージ管理システムの1つであり、ソフトウェアの導入を単純化できるという特徴があります。*「brew update」というコマンドを実行すれば、Homebrewを更新することが可能です。*

次にrbenvを更新しましょう。rbenvとは、Rubyの異なるバージョンをまとめて管理するためのツールです。使用している環境全体のバージョンだけでなく、ディレクトリごとに対してバージョン指定を行うこともできます。**「brew upgrade rbenv ruby-build」というコマンドを実行すれば、rbenvを更新することが可能です。**ruby-buildとは、rbenvのプラグインの1つであり、「rbenv install」というRubyをインストールするためのコマンドを提供しています。

再度「rbenv versions」というコマンドを実行すると、Rubyの最新バージョンはインストールされていないことが確認できます。rbenvを更新しただけであり、Rubyの最新版をインストールしなければならないのが理由です。

次に「rbenv install -l」というオプションを付けたコマンドを実行すれば、アップグレードしたrbenvからインストールできるRubyのバージョンを確認することができます。一覧で表示されるRubyのバージョンの中から、インストールしたいバージョンが選択できたら、**「rbenv install 〇.×.△」というコマンドを実行してインストールを行いましょう。**なお「〇.×.△」には、インストールしたいRubyのバージョンを記述してください。

そして*再度「rbenv versions」というコマンドを実行すると、新しいバージョン「〇.×.△」がインストールされていることが確認できます。*しかし、「＊」が付いているバージョンは更新されていないことも確認できます。新しいバージョンがインストールできたことを確認できたら、バージョンの切り替え方法を見ていきましょう。

ここまでで、新しいRubyのバージョンをインストールすることができました。しかし、このままでは新しいRubyのバージョンを使用することはできないため、バージョンの切り替えを行います。**「rbenv global 〇.×.△」というコマンドを実行すれば、バージョンを切り替えることが可能です。**なお「global」という記述は、「*local*」で代用することができます。

*globalの場合、PC全体に反映されるため、Rubyの新しいバージョンはPC全体で適用されることになります。*ただしプロジェクトによってバージョンが異なる場合には、ディレクトリごとにバージョンを切り替えることが大切です。*local*の場合、バージョンを切り替えるディレクトリで使用すれば、そのディレクトリのみバージョンを切り替えることができます。

## Ruby on Railsのバージョン指定してインストールする方法

MacOSの場合のRubyのバージョン指定方法については理解できたでしょうか。ここではRuby on Railsのバージョン指定を行い、インストールする方法について詳しく紹介します。

### 最新のバージョンをインストールする方法

これまでにも説明しましたが、**「gem install rails」というコマンドを実行すれば、Ruby on Railsをインストールすることが可能です。**ただしこの場合、最新バージョンのRailsがインストールされるため、*バージョン指定するためには「gem install rails -v 〇.×.△」というオプションを付けたコマンドを使用する必要があります。*なお「〇.×.△」には、指定したいバージョンを記述します。

### バージョン指定してインストールする方法

**「gem list -e rails」というコマンドを実行すれば、インストールされているRuby on Railsのバージョン一覧を確認すること可能です。**他にもRailsのバージョン一覧を確認できるコマンドはあるため、気になる方は調べてみましょう。

例えば、一覧に「4.0.1」というバージョンが表示されていなかったとします。「gem install rails -v 4.0.1」というコマンドを実行すれば、バージョン4.0.1のRailsをインストールすることが可能です。*再度「gem list -e rails」というコマンドを実行すれば、一覧に「4.0.1」の表示があることを確認できるでしょう。*

## OSによる違いの理解を深めてRuby on Railsをインストールしよう！

これまでにRuby on Railsのインストール方法や、Rubyのバージョン指定方法（MacOS）について解説しました。**Ruby on RailsとはRubyというプログラミング言語のフレームワークであり、使用すれば、開発効率の向上が期待できます。**

Ruby on Railsのインストール方法は、OSによってあまり違いはないため、Railsのインストール自体はそこまで難しくありません。しかし**Rubyやデータベースのインストール方法や、バージョン更新はOSによって違うため注意が必要です。**例えばWindows10のOSを使用している方と、macOSを使用している方では、Railsをインストールするまでの流れが異なります。まずは自分の使用しているOSを把握し、Rubyやデータベースの準備の仕方をきちんと押さえてから、Ruby on Railsをインストールしましょう。

Ruby on Railsとは、Rubyというプログラミング言語のフレームワークです。Railsを使用すれば、開発効率の向上が期待できます。当記事ではRuby on Railsのインストール方法・Rubyのバージョン指定方法（MacOS）について解説します。

Ruby on Railsのインストール方法はOSによってほとんど変わらない

MacOSでRubyのバージョン指定を行うには「rbenv」というツールを使用する

Ruby on Railsではバージョン指定を行い、インストールできる

Ruby on Railsのインストール・バージョン指定方法を解説

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とは？入門編！意味や将来性を初心者にもわかりやすく説明

## HTML5プロフェッショナル認定試験とは

HTML5プロフェッショナル認定試験とは、**HTML5・CSS3・JavaScriptなどのWebコンテンツ制作やWebアプリケーション、動的なWebコンテンツの開発・設計の技術や知識**を測る試験のことです。また、主催するエルピーアイジャパン（LPI-Japan）は、他にもLinuCやOSS-DBなど知名度の高い資格の運営・認定を行っており、*IT業界においての認識率も非常に高い*のが特徴です。

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

### HTML5プロフェッショナル認定試験レベル1

HTML5プロフェッショナル認定試験レベル1は、**Webの基礎知識・HTML・CSS・レスポンシブWebデザイン・APIの基礎知識が出題範囲となり、幅広い知識が問われます。**また、このHTML5プロフェッショナル認定試験レベル1では、JavaScriptに関する知識はほぼ問われません。

基礎的で広範な知識が求められているため、Webデザイナーを目指している初心者から現役のエンジニアまで、取得する価値のある資格です。具体的な出題のうち、重要性が高く頻出なものは下記が挙げられます。

・*HTML5マークアップ*
ブラウザにコンテンツを表示させるために、HTMLの仕様に沿った書式でHTMLコードを記述できることが問われます。文書型宣言・言語コード・文字コード・HTMLで使用可能な文字参照等の記述方法の理解が必要です。

・*HTML*
HTMLの要素や属性を理解し、適切なHTMLタグを使用してコーディングできていることが問われます。セクション・書式方法・ルビ・挿入・削除・グルーピング等の理解が必要です。

・*CSSデザイン*
デザインをCSSを利用して実現する際に、どのような実現方法が適切か判断できるか、正しいコードを記述することが問われます。主にコンテンツのレイアウト・色・背景・罫線・テキスト・リスト・テーブル・アニメーション等の記述方法の理解が必要です。

### HTML5プロフェッショナル認定試験レベル2

レベル2では、主にJavaScriptの知識・アニメーション・各種APIの深い仕様理解・通信・デバイスアクセス・パフォーマンスとオフライン・セキュリティモデル、と広範な知識を求められますが、それと同時により深い知識を問われます。レベル1とは異なり、JavaScriptの文法やES6（ECMAScript2015）以降の文法について問われ、**プログラミング寄りの問題が重点的に出題されます。**

具体的な出題のうち、重要性が高く頻出なものは下記が挙げられます。

*・JavaScript文法*
最も重要性が高く、最優先で対策すべき事項です。JavaScriptの構文や様々な概念の理解や効率的なコーディングが問われます。JavaScriptと他言語との違いや、演算子・配列・制御文・関数・型やオブジェクト・プロパティ・スコープ等の理解が必要です。

*・EC6（ECMAScript2015）以降の新機能*
追加された機能や表記法を用いてコーディングができるかが問われます。ローカル変数と定数・アロー関数・Promiseと非同期関数・可変長引数/残余引数・クラス・テンプレートリテラル等の理解が必要です。

*・JavaScriptのイベントについて*
JavaScriptのページ読み込みや、ユーザ操作で発生するイベントやイベント処理を行うコードを記述することができるかが問われます。フォームイベント・キーボードイベント・マウスイベント・タッチイベント等の各種イベントの理解が必要です。

## HTML5プロフェッショナル認定取得のメリット

HTML5プロフェッショナル認定の資格を取得するメリットは、*大きく3つに大別できます。*前述の通り資格名にHTML5と名前がついていますが、HTMLに限らずJavaScriptやレスポンシブWebデザイン、各種APIの理解、グラフィクス等幅広いWeb関連の知識を求められるため、**幅広いWeb知識を有することを証明できます。**

エンジニアとして勤めていると自分が携わる業務範囲での知識は蓄積されますが、その業務から離れると1から学び始めることが多くあります。HTML5プロフェッショナル認定を取得することによって、*現時点で自分は何を知っていて何を知らないのかを知ること*ができ、またWebに関する知識を網羅的に習得できます。

そのため、**業務が変わっても順応できるスピードを早められるメリット**があります。

### 就職、転職活動に活かせる（初心者にもおすすめ）

新卒、もしくは転職でWeb系のプログラマーを目指しているのであれば、*HTML5プロフェッショナル認定を取得しておくことは非常におすすめ*です。新卒や未経験からの転職の場合、フリーランスで仕事を受けた経験等がない限り実績を見せることは難しいでしょう。

HTML5プロフェショナル認定を取得しておくと、実務経験はなくとも**ある程度の知識は保有していると判断される可能性が高いため**です。経験が浅ければ浅いほど、資格取得が有利に働きます。

就職や転職活動等にも言えることですが、副業開始当初は個人としての実績が浅いため、ポートフォリオに加えて、HTML5プロフェッショナル認定を取得していると**採用側から見てかなりポイントが高い**でしょう。Web系コーダー・プログラマー等の副業を考えている方で、なかなか採用されず困っている場合はぜひ挑戦してください。

## HTML5プロフェッショナル認定試験の勉強方法

HTML5プロフェッショナル認定試験を勉強する方法はプログラミングスクール等もありますが、*参考書で学習する*のが一般的です。レベル1・レベル2共に難易度は**ベンダー資格と比較してもそこまで高くなく、自己学習で十分に合格可能**です。おすすめの参考書を下記にご紹介しますので、ぜひ参考にしてください。

HTML5プロフェッショナル認定試験の参考書は、以下におすすめする2つの参考書を学習するだけで十分に合格することが可能です。（レベル2用の参考書も販売されているため読み替えてください）

*・[HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.0対応](https://honto.jp/netstore/pd-book_28916635.html)*
時間のない方は**この参考書1冊でも十分合格できるほどの問題・情報量**で、本番の試験に近い問題を解いていくことができるため大変おすすめの本です。時間に余裕があれば、これを2〜3周すれば*大体合格できるレベルに達することができる*ので、ぜひ繰り返し問題を解いてみてください。

*・[HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版](https://honto.jp/ebook/pd-series_B-MBJ-23800-121461779-001-001.html)*
先述した問題集に加え、問題集で分からない箇所や周辺知識も学んで実務に活かしたい方は、テキストを使用することをおすすめします。図解や表形式で分かりやすくまとまっているため、理解が深まりやすいです。ただ、必須ではないため時間に余裕がある方は、ぜひこちらのテキストも活用してみてください。

## HTML5プロフェッショナル認定試験の受験方法

HTML5プロフェッショナル認定試験の受験方法には2パターンあり、自分の好きな試験会場を選択して受験するパターンと、**オンラインでの受験も可能です。**申し込みはどちらもHTML5プロフェッショナル認定試験の公式サイトより、Webもしくは電話で申し込むことができます。また申し込みの際には、*EDUCO-IDというアカウントを作成する必要があります*。

ちなみに、受験料は16,500円（税込）です。

申し込みの際に、全国にある試験センターの中から*希望の試験センターを選ぶ*ことができ、試験センターが決まるとその試験センターの空き日程を選択する、といった流れで申し込みが可能です。

試験センターによって会場の雰囲気や使用するPC等の違いはありますが、一般的に試験会場では教室のようなスペースに複数人間隔を開けて座れるようになっており、**各々自分のテストをPCで受験する**流れです。

近年では*一定の基準を満たせば、自宅や好きな場所でオンライン受験することが可能*になりました。一定の条件とは、静かで1人になれる場所・要件を満たすPC・Webカメラ・インターネット接続・本人確認書類をWebカメラで提示できること等があります。

いつもの自分が学習している環境で受験することができれば、**集中できて合格により近づけるかもしれません**。気になる方はオンライン受験も検討してみてください。

## Webの将来性を見据えてHTML5プロフェッショナル認定試験に挑戦しよう

Webは一層進化が進み、*昨今Web3.0も台頭してきました。*今後の将来性を見据えてWebの基礎知識の習得やWeb系の転職に備える場合にも、**HTML5プロフェッショナル認定を取得することは大変おすすめ**です。知識・技術力の向上やアピールのために、ぜひ資格取得に挑戦してみませんか？

言語・開発の記事（89ページ目）