React・React Native　typescript

 

React・・・UIを作るためのJavaScriptライブラリ

 

＜３つのコンセプト＞

 

・Declarative(宣伝的である)

条件と結果が明確にコードに記載されている状態であり、他の人がソースコードを読んでも理解がしやすい仕組み。

その結果、問題点を洗い出しやすくデバックやテストが容易になる。

 

・Component-Based(コンポーネント指向である)

アプリケーションの構成要素を小さい部品（コンポーネント）の集合として考えて設計されている。

機能の小さい部品に分割して持たせているので再利用も容易にできる。

 

・Learn Once, Write Anywhere(一度の学習で何度でもかける)

 Webアプリケーションだけではなく他の分野にも適応することができる。

例えば、モバイルアプリ開発ではReact NativeというReactの概念を基盤としたクロスプラットフォームが使用できる。

※クロスプラットフォーム（英: cross-platform）とは、異なるプラットフォーム（例えばPC/AT互換機とMacintosh、あるいはWindows・macOS・FreeBSD・Linuxなどのように、仕様が全く異なる機械（ハードウェア）またはオペレーティングシステム）上で、同じ仕様のものを動かすことが出来るプログラム（ソフトウェア）のことを言う。

 

＜特徴＞

①レンタリングが高速

ここでのレンタリングとはWebページを描画することを意味する。

Reactでは仮想DOM(Document Of Model)という技術が使われています。これはWebページ内の一部を更新したいときに全てページをまるっと更新するのではなく、更新された一部のみを変更するという効率的な仕組みです。

この仕組みのおかげでレンダリングする箇所は一部に留まり、高速で表示の切り替えが可能です。

②大規模なアプリケーションほど向いている

・管理しやすい設計

・複雑な条件も組み込むことも可能

・コードの複雑性をさけ、見やすい設計

・モジュールの分割による長期の運用も可能

。カスタム性が高い

③JavaScriptベースでもDOMの効率的な作成できる

ReactではJSXというXML風にDOMを出力するために開発した独自構文があります。JavaScriptやReactの標準APIでもDOMを作成することは可能ですが、どうしても冗長になってしまいます。

そこでJSXを使用することでHTMLを書いているかのようにReact内に組み込むことができます。

また、タグの記載ミスなどの構文エラーはコンパイル時にチェックされるため、安全性も保障されます。更にTypeScriptを使えば厳密に型チェックすること可能です。

④JavaScriptが書ければすぐに使える

⑤SPAのアプリケーションに向いている

シングルアプリケーションとは、Single Page Applicationと表記し「SPA」と略されます。

SPAとは、Webページにおいて1ページ内を各オブジェクトで構成することで、ページ全体を何度も読み込むことなく、対象のコンテンツのみを遷移させます。

ページ内で変化させる必要のない部分は据え置く（再読み込みをしない）ことで、表示の速度や全体のパフォーマンスを向上させることができるのです。

一般的なWebページでは、例えばユーザーが「次のページ」というリンクをクリックすると、アクションはサーバーへ要求され、サーバー側で「次のページ」のデータで1ページ分を作り、クライアントがページ全体を表示させます。

しかしSPAでは、ページ内にある一つのコンテンツをクリックすると、そのコンテンツ部分に必要な情報のみをサーバーへ要求し、必要なデータを使って差分のみを表示するのです。

これにより、ユーザーが認識する変化はページの一部であり、一瞬もページ遷移（ページ全体が白くなるなど）を意識することがなくなります。

⑥ドキュメントは英語が多い

 

React Native

iPhoneとAndroidどちらでも動かすことができる開発用フレームワーク

 

□React Nativeのメリット

React Nativeの主なメリットは下記の3つです。

  • ・開発が効率的になる

  • 開発が効率的であるという点はReact Nativeのメリットです。クロスプラットフォームアプリ開発JavaScriptライブラリなので、iOSとAndroidのアプリを1つの言語で同時に開発することができます。

    また、React Nativeで開発するときは、モバイル端末によって書き分けるコードは一部分で、コードの大部分を共通化することが可能です。そのため、開発の時間短縮や負担軽減を期待できます。

  • ・ホットリロードで修正が簡単にできる
  • Hot reload とはコードを変更したときマニュアルでリロードしなくとも、自動でリロードしてくれることを言います。 ただ単にブラウザで開いているページをリロードするのではなく、VueやReactであれば、そのコンポーネントの状態をリロードしてくれるという代物です。
  • ソースコードを保存するたびに自動でリロードが行われるので、微修正ごとにコンパイルする必要がありません。この機能により、UIの構築などが容易になります。
  • ・Reactを使ったことのある人には学習が簡単

 

□React Nativeのデメリット

React Nativeのデメリットは、以下の3点です。

  • ・アップデートへの対応が大変
  • ・エラーの解決に時間がかかる。エラー箇所がわかりにくい

  • エラー修正を行う際、ネイティブレイヤーで起きているエラーなのか、それともJavaScriptレイヤーでエラーが発生しているのか見極めるのに時間がかかります。

    また、iOSアプリではエラーが発生していないものの、Androidアプリではエラーが起きるという場合も存在するため、簡単に解決できないケースが起こりえます。

  • ・ネイティブエンジニアには学習コストが高い

 

 

TypeScript

JavaScriptのいい点を残しつつ、使いにくい点を修正したTypeScriptは、言わばJavaScriptの進化版です。

コンパイルとは、プログラミング言語で記述されたソフトウェアの設計図（ソースコード）を、コンピュータが実行可能な形式（オブジェクトコード）に変換する作業のことです。

プログラミング言語には、動的型付けと静的型付けの2種類があります。先ほどJavaScriptの進化版がTypeScriptだと説明しましたが、JavaScriptは動的型付け、TypeScriptは静的型付けの言語で、この点が両者の最も大きな違いと言っていいでしょう。

 

動的型付けは、変数や関数のデータ型の宣言がいらず、プログラムが勝手に型を決定します。JavaScriptのほか、RubyやPythonも動的型付け言語です。

 

静的型付けで代表的な言語はC#、C++などがあります。

 

動的型付けは、型を宣言する必要がないため記述量が少なく、小さなプログラムや型の変動が激しい環境なら容易に実装できます。その代わり、書いたプログラムを実行時にその都度判断するため、プログラムを実行してみないとエラーが起きるかどうかすらわかりません。

一方、静的型付け言語は、あらかじめデータの型を宣言してから開発を行います。そのため、コンパイル時にエラーがわかる、メモリ領域の最適化ができる、パフォーマンスの向上を狙えるといったメリットがあります。

まとめ

  • バグの早期発見
  • コーディングの効率アップ
  • コードの読みやすさの向上
  • 大人数での開発時の効率化
  • クラスが作れるようになった！