タグ

ブックマーク / www.scsk.jp (3)

  • 第2回 簡単なReact.jsの使い方 (8/8)

    8)サーバサイドレンダリング インターネットに公開しているサイトではユーザビリティを考えてJavaScriptを多用しています。しかし、検索エンジンのクローラは一般的にはJavaScriptを解釈しません。そのため、ブラウザがあるURLにアクセスした場合にJavaScriptでレンダリングされるHTMLと、クローラが同じURLにアクセスした場合にサーバでレンダリングされるHTMLを同一にする必要があり、クライアントサイドとサーバサイドで同じロジックを別の言語で実装するなど涙ぐましい努力が行われてきました。 React.jsではブラウザのDOM を使わずに軽量なDOM を使用してるため、レンダリングにブラウザは不要です。JavaScriptエンジンを使用すれば、クライアントサイドのコードをほぼそのまま使用できるため、同一のロジックを異なる言語で実装する必要はありません。 今回実装したOSS

    cpw
    cpw 2015/08/10
    React.js + Nashornでサーバサイドレンダリング
  • 第2回 簡単なReact.jsの使い方 (1/8)

    1)快適なReact.js開発環境をgulpで作る React.jsはJSX という言語を利用して開発します。 JSX はトランスコンパイル言語と呼ばれるもので、JavaScriptに変換して利用します。 jsxというコマンドを利用すればJSX ファイルをJavaScriptに変換することが可能ですが、ソースコードを変更するたびにJSX をコンパイルするのは面倒です。まずはソースコードの変更を検知して自動的にコンパイルし、ブラウザのリロードまでを行ってくれる環境を構築しましょう。 JavaScriptには便利なツールがいくつかありますが、今回はgulp + webpackを利用して環境を構築します。これらの動作にはNode.js が必要となりますので、まずはNode.js のインストールから行いましょう。なお、この組み合わせの他にもGrunt + Browserifyなどがあります。 No

  • 第1回 はじめに (1/1)

    1)React.jsとは React.jsとはMVC のV(View)として利用されるライブラリです。 XMLをJavaScript中に直接書くことでコンポーネントを宣言的に定義することが可能です。また、値が更新された場合には全体を再描画せずに、変更箇所だけを再描画する仕組みが備わっているため、パフォーマンスも十分です。しかも、Facebookで利用されており、今注目のライブラリです。 今回作成したアプリ 今回作成したアプリケーションではOSS Radar Scope®をそのまま再実装したわけではありません。仕様を少々変えてあります。 もとのOSS Radar Scope®は下図の通りです。 それを、次のように作り変えています。 この記事ではReact.jsの使い方から紹介し、上記のOSS Radar Scope®の一部を説明します。 それでは、早速React.jsの世界に入っていきましょ

  • 1