はじめに

キャスレーコンサルティング株式会社 SI(システム・インテグレーション)部の松本(卓)と申します。
今回は、フロントエンド開発で使用されている「React.js」の入門編としてご紹介したいと思います。

React.jsについて

React.jsとは、Facebookが開発したWebサイト上のUIパーツを構築するためのJavascriptライブラリです。
Facebookで使用されているのはもちろんのこと、Yahoo!のページなどでも使用されています。

Reactの3つの特徴

  1. Declarative : 宣言的な
  2. Component Based : コンポーネントベースである
  3. Learn Once,Write AnyWhere : 一度覚えてしまえばどこにだって書ける

以上の3つが、大きな特徴となっています。 (続きを読む…)


Reactで画像タイムラインを作ってみる

こんにちは、システムデザイン部のウザワです。
今回はfacebook製のUI生成用JavaScriptライブラリ「React」の紹介と、Reactを使って簡単なアプリケーションを作って見ようと思います。

Reactとは

UIを作るためのfacebook製のJavaScriptライブラリです。
Viewの状態管理を容易にしてくれる様々な特徴を持っています。
以下の様な特徴を持っています。

一方向のデータフロー

Reactのコンポーネントは、状態とプロパティという値を持っており、コンポーネントをこれらの関数として画面に表示します。
状態は親コンポーネントのみに指定するのが好ましく、親以下の子コンポーネントでは親から渡された値をプロパティとして呼び出します。
これにより親コンポーネントの状態のみでコンポーネント全体を生成でき、画面状態の管理を容易にしてくれます。

VirtualDOM

コンポーネントを毎回再描画していてはパフォーマンスが悪いのでは、と思うかもしれません。
Reactで生成したコンポーネントに何らかの変更があった際に、コンポーネント全体を再描画せず、変更があった部分だけを検知し更新してくれる仕組みがあり、それがVirtualDOMです。

また、ReactがカバーするのはViewのみであるため、既存のWebアプリケーションにReactを導入することも用意です。

以上がReactの簡単な紹介になります。
それではReactを使って簡単なアプリケーションを作っていきましょう。 (続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ