React.js

今話題の Web Frontend開発用 Javascript libraryに React.jsというのがあります これは Facebookが Open sourceで開発しているもので、頻回に updateされています

Web開発の世界で話題になり始めてから未だ一年が経過していない、という非常に新しいものですが、劇的に Webの世界を変えていきそうな予感を皆感じているらしいのです

僕もそのおこぼれに預かろうとして勉強を開始しました しかし例によって非常に難しい 何しろ全くの別世界に来て、別の文化、別の言語で新しい世界で生活を始めるようなものなのです

勉強しようと思えば未だ満足な書籍も無く、またそもそも開発スピードが早くどんどんその言語構造も変化していますので、活字とするには無理があります そこで Webから勉強せねばなりませんが、その中心にあるのは Facebookが公開しているものです

これを読んで勉強すれば誰でも入っていける、のではありますが、何しろ英語ですし概念がなかなか難しくそんなに簡単ではありません とりあえず基本となる雛形の home pageとして挙げられているのは

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="scripts/example.js"></script>
    <script type="text/babel">
      // To get started with this tutorial running your own code, simply remove
      // the script tag loading scripts/example.js and start writing code here.
    </script>
  </body>
</html>

なのですが、ここで明らかなように、そのサンプルでは

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

として Internet上の CDNより肝心の react関連の js fileを読み込んでいます このようにすれば、無駄にファイルを読み込む必要が無く、運用する場合には良いのですが、自分のパソコンで開発する時にはインターネットに常時接続していなければ不可能です 僕はしばしば国際線飛行機の中でこの作業をしますので、ローカルに持っていなければ開発そのものができないのです この時にどうすれば良いか? そこで react.jsの名前空間定義を調べた結果 自分自身のプログを参考にしました

そして解決策は

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
    
<script>
if (!window.React) {
 document.write('<script src="../../build/react.js"><\/script>');
 document.write('<script src="../../build/react-dom.js"><\/script>');
 }
</script>

とこのようにすれば良いのです これは大発見です