update React and creating env note

Author: shibukawa

docs/.buildinfo

@@ -1,4 +1,4 @@
 # Sphinx build info version 1
 # This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done.
-config: 9e46946b59cde5854109d2ecc2de20e9
+config: e4b9e2739ad74dd57986a9a1dec6ac09
 tags: 645f666f9bcd5a90fca523b33c5a78b7

docs/_sources/async.rst.txt

@@ -184,14 +184,14 @@ TypeScriptで提供されている ``if`` や ``for`` 、 ``while`` などは関
    }
 
    // 必ず実行される
-   async function finally() {
+   async function finallyFunc() {
    }
 
    async function main(){
      if (Date.now() % 2 === 1) {
        await randomRun();
      }
-     await finally();
+     await finallyFunc();
    }
 
    main();

docs/_sources/contributors.rst.txt

@@ -26,6 +26,7 @@ Pull Requestをくださった方々
 * `@yaegassy <https://github.com/yaegassy>`_
 * `@tmitz <https://github.com/tmitz>`_
 * `@ichikawa-hiroki <https://github.com/ichikawa-hiroki>`_
+* `@eduidl <https://github.com/eduidl>`_
 
 フィードバックをくださった方々
 ------------------------------------

docs/_sources/prodenv.rst.txt

@@ -56,13 +56,21 @@
   コンパイラが変換したファイルを最終的に結合したり、動的ロードを有効にするのがバンドラーです。次のようなものがあります。
   なお、ライブラリなど、バンドラーは行わず、コンパイラだけ実行した状態で配布することもできます。
 
-  * webpack
+  * Webpack
   * parcel
   * rollup
-  * Browserify
 
-さらに規模が大きくなり、ビルドしてリロードして起動、というステップに時間がかかるようになってくると、ビルドサーバーを前面にたてて開発にかかる待ち時間を減らすことも当たり前のように行われます。。
+さらに規模が大きくなり、ビルドしてリロードして起動、というステップに時間がかかるようになってくると、ビルドサーバーを前面にたてて開発にかかる待ち時間を減らすことも当たり前のように行われます。
 
-.. todo::
+ビルドサーバーはコンパイル済みのファイルを結果をメモリにキャッシュします。ローカルのファイルを監視し、変更があったらそのファイルだけを更新し、JavaScriptにコンパイルします。ビルドサーバーによっては、開発ビルドではサーバーに変更があったかを問い合わせるコードを埋め込んでおくものもあります。その機能を使うと、エディタでファイルを保存すると、コンパイルが自動で走り、ブラウザが開発サーバーから変更された情報を受け取り、ブラウザに変更されたコードをロードし直すまで自動で行われたりします。
 
-   あとで、開発サーバーとかもろもろについて語る
+環境構築できるメンバーがいないときはどうするか？
+-----------------------------------------------------------------
+
+一時的に構築できるメンバーにヘルプに入ってもらって環境整備をやってもらう、ということも方法としてはありますが、可能であれば常に質問できる人が望ましいです。もちろん、WebPackやBabelを自分で設定する覚悟があるのであれば問題はありませんが、一時的に誰かに高度な環境を作ってもらうと、やはりそこがタコツボ化してしまい、メンテナンスができなくなりがちです。あまり背伸びをしてしまうと、そこが負債になりがちです。
+
+環境構築をしても、一度きりでは終わりません。ライブラリが定期的にバージョンアップしていく作業も発生しますし、何かしらの新しいツールやライブラリを付け加えるという作業も発生します。環境周りの面倒を見れるメンバーが一人はプロジェクトにはいることが望ましいです。
+
+もしも誰もいないかつReactであればNext.jsを使い、てっとり速く作れる環境を利用すべきです。VueやAngularはデフォルトのプロジェクト作成である程度揃うので、それを活用しましょう。そして、環境設定はなるべくがんばらず、デフォルトのままで頑張れるだけ頑張るのが良いでしょう。バージョンアップ時は、新しくプロジェクトを作り、そこに既存のコードを持ってきて式年遷宮をする、というのがトラブルが少ないと思われます。
+
+Next.jsであれば、ある程度のベストプラクティスに従って設定はされているし、そこからの機能追加も情報が得やすいので、無難な落としどころとなります。

docs/_sources/reactenv.rst.txt

@@ -26,15 +26,27 @@ Next.js（React）の環境構築
       Happy hacking!
 
 なるべく、いろんなツールとの組み合わせの検証の手間を減らすために、Next.jsを使います。
-JavaScriptは組み合わせが多くて流行がすぐに移り変わっていつも環境構築させられる（ように見える）とよく言われますが、組み合わせが増えても検証されてないものを一緒に使うのはなかなか骨の折れる作業で、結局中のコードまで読まないといけなかったりとか、環境構築の難易度ばかりが上がってしまいます。
-特にRouterとかすべてにおいて標準が定まっていないReactはそれが顕著です。
+JavaScriptは組み合わせが多くて流行がすぐに移り変わっていつも環境構築させられる（ように見える）とよく言われますが、組み合わせが増えても検証されてないものを一緒に使うのはなかなか骨の折れる作業で、結局中のコードまで読まないといけなかったりとか、環境構築の難易度ばかりが上がってしまいます。特にRouterとかすべてにおいて標準が定まっていないReactはそれが顕著です。
 
 その中において、CSS in JS、RouterをオールインワンにしてくれているNext.jsは大変助かります。
 issueのところでもアクティブな中の人がガンガン回答してくれていますし、何よりも多種多様なライブラリとの組み合わせをexampleとして公開してくれているのが一番強いです。
 Server Side Renderingもありますが、お仕事でやっていて一番ありがたいのはこの設定周りです。
 
 .. [#] https://github.com/zeit/next.js/tree/canary/examples
 
+Next.jsとは
+------------------------
+
+まず、Next.jsとは何かについて説明します。Next.jsはZeit社が開発しているReactのオールインワンパッケージです。\ ``next``\ コマンドでプロジェクトを作成すると、多くの必要な開発環境整備が完了した環境が一発で作成できます。
+
+この開発環境はWebPackのビルド環境の整備も完了しています。ビルド環境は素早くコンパイルして確認が行えるビルドサーバーも設定されています。TypeScriptも設定済みです。何より、自分で設定すると相当難易度の高いサーバーサイドレンダリングが最初から得られます。
+
+Next.jsを使うからといって、オールインワンですべて付いてくる状態でしか動かせないわけではなく、デプロイする方式によって自由に使い分けることができます。
+
+デフォルトではサーバーサイドレンダリングを行うフロントエンド機能のみですが、カスタムサーバー機能を使えば、Express.jsなどのNode.jsのAPIサーバーにサーバーサイドレンダリング機能などを乗せることができます。Express.jsへの薄いラッパーになりますので、Express.jsの知識を利用して、APIサーバー機能も同一のサーバー上に追加できます。また、サーバーサイドレンダリングを使わずに静的なHTMLとJavaScriptコードを生成することも可能です。
+
+出発点としては十分なケースが多いと思われます。
+
 作業フォルダを作る
 ------------------------
 

docs/async.html

@@ -195,14 +195,14 @@ <h2>非同期と制御構文<a class="headerlink" href="#id6" title="このヘ
 <span class="p">}</span>
 
 <span class="c1">// 必ず実行される</span>
-<span class="nx">async</span> <span class="kd">function</span> <span class="k">finally</span><span class="p">()</span> <span class="p">{</span>
+<span class="nx">async</span> <span class="kd">function</span> <span class="nx">finallyFunc() {</span>
 <span class="p">}</span>
 
 <span class="nx">async</span> <span class="kd">function</span> <span class="nx">main</span><span class="p">(){</span>
   <span class="k">if</span> <span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nx">now</span><span class="p">()</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">await</span> <span class="nx">randomRun</span><span class="p">();</span>
   <span class="p">}</span>
-  <span class="nx">await</span> <span class="k">finally</span><span class="p">();</span>
+  <span class="nx">await</span> <span class="nx">finallyFunc</span><span class="p">();</span>
 <span class="p">}</span>
 
 <span class="nx">main</span><span class="p">();</span>
@@ -356,11 +356,11 @@ <h3>このページ</h3>
     <h4>Page Info</h4>
     <p>
     <ul>
-        <li>英数記号: 3087</li>
+        <li>英数記号: 3095</li>
         <li>非アスキー: 5456</li>
-        <li>合計文字数: 8543</li>
-        <li>半角換算: 13999</li>
-        <li>全角換算: 6999.5</li>
+        <li>合計文字数: 8551</li>
+        <li>半角換算: 14007</li>
+        <li>全角換算: 7003.5</li>
     </ul>
     </p>
 </div>

docs/complex.html

@@ -180,7 +180,7 @@ <h3>ループは<code class="docutils literal notranslate"><span class="pre">for
 <span class="p">});</span>
 
 <span class="c1">// 新: for ofループで配列のインデックスが欲しい</span>
-<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">i</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="nx">of</span> <span class="nx">iterable</span><span class="p">.</span><span class="nx">entries</span><span class="p">())</span> <span class="p">{</span>
+<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">i</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="k">of</span> <span class="nx">iterable</span><span class="p">.</span><span class="nx">entries</span><span class="p">())</span> <span class="p">{</span>
   <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
 <span class="p">}</span>
 <span class="c1">// 要素のみ欲しいときは for (const value of iterable)</span>
@@ -206,8 +206,8 @@ <h3>iterableとイテレータ<a class="headerlink" href="#iterable" title="こ
 <span class="kr">const</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">[[</span><span class="mi">0</span><span class="p">,</span> <span class="s2">&quot;a&quot;</span><span class="p">],</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="s2">&quot;b&quot;</span><span class="p">],</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span> <span class="s2">&quot;c&quot;</span><span class="p">]];</span>
 
 <span class="c1">// この2つの結果は同じ</span>
-<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">]</span> <span class="nx">of</span> <span class="nx">a</span><span class="p">.</span><span class="nx">entries</span><span class="p">())</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">);</span> <span class="p">}</span>
-<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">]</span> <span class="nx">of</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">);</span> <span class="p">}</span>
+<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">]</span> <span class="k">of</span> <span class="nx">a</span><span class="p">.</span><span class="nx">entries</span><span class="p">())</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">);</span> <span class="p">}</span>
+<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">]</span> <span class="k">of</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">v</span><span class="p">);</span> <span class="p">}</span>
 </pre></div>
 </div>
 <p>この <code class="docutils literal notranslate"><span class="pre">entries()</span></code> は何者なんでしょうか？正解は、 <code class="docutils literal notranslate"><span class="pre">next()</span></code> というメソッドを持つイテレータと呼ばれるオブジェクトを返すメソッドです。
@@ -417,7 +417,7 @@ <h3>辞書用途はオブジェクトではなくて<code class="docutils litera
   <span class="p">[</span><span class="s2">&quot;戸越銀座&quot;</span><span class="p">,</span> <span class="s2">&quot;TGSGNZ&quot;</span><span class="p">]</span>
 <span class="p">]);</span>
 
-<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="nx">of</span> <span class="nx">map</span><span class="p">)</span> <span class="p">{</span>
+<span class="k">for</span> <span class="p">(</span><span class="kr">const</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="k">of</span> <span class="nx">map</span><span class="p">)</span> <span class="p">{</span>
     <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">key</span><span class="si">}</span><span class="sb"> : </span><span class="si">${</span><span class="nx">value</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
 <span class="p">}</span>
 </pre></div>

docs/contributors.html

@@ -58,6 +58,7 @@ <h2>Pull Requestをくださった方々<a class="headerlink" href="#pull-reques
 <li><p><a class="reference external" href="https://github.com/yaegassy">&#64;yaegassy</a></p></li>
 <li><p><a class="reference external" href="https://github.com/tmitz">&#64;tmitz</a></p></li>
 <li><p><a class="reference external" href="https://github.com/ichikawa-hiroki">&#64;ichikawa-hiroki</a></p></li>
+<li><p><a class="reference external" href="https://github.com/eduidl">&#64;eduidl</a></p></li>
 </ul>
 </div>
 <div class="section" id="id2">
@@ -102,11 +103,11 @@ <h3>このページ</h3>
     <h4>Page Info</h4>
     <p>
     <ul>
-        <li>英数記号: 207</li>
+        <li>英数記号: 214</li>
         <li>非アスキー: 26</li>
-        <li>合計文字数: 233</li>
-        <li>半角換算: 259</li>
-        <li>全角換算: 129.5</li>
+        <li>合計文字数: 240</li>
+        <li>半角換算: 266</li>
+        <li>全角換算: 133.0</li>
     </ul>
     </p>
 </div>