/js-stack-from-scratch

Step-by-step tutorial to build a modern JavaScript stack from scratch

Primary LanguageJavaScript

ゼロから始めるJavaScript生活

Build Status Join the chat at https://gitter.im/js-stack-from-scratch/Lobby

Yarn React Gulp Redux ESLint Webpack Mocha Chai Flow

モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。

⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語).

これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールについて可能な限りシンプルな例を提供します。このチュートリアルは、独自のボイラープレートをゼロから準備するための方法として見ることもできます。

もちろん、ちょっとしたJSによるインタラクションを含むだけのシンプルなウェブページを作るのであれば、ここで紹介するスタックを全て使う必要はありません(ES6コードを複数のファイルに書いてCLIでコンパイルしたいのであれば、Browserify/Webpack + Babel + jQueryの組み合わせで十分です)。しかし、スケールするウェブアプリを構築するにあたってセットアップの手助けが必要であれば、このチュートリアルが重宝するでしょう。

このチュートリアルの目標はさまざまなツールを組み立てることにあるため、これらのツールの仕組みについて、それぞれの詳細については触れません。それらのより深い知識を習得したい場合、それぞれのドキュメントを参照するか、他のチュートリアルを探してください。

このチュートリアルで説明しているスタックはその大部分にReactを使用しています。もし初心者の方がReactについてのみ学びたいのであれば、create-react-appで設定済みのReact環境をすぐに試すことができます。例えばすでにReactを使っているチームに加わり、学習用playgroundでキャッチアップするということであれば、このようなアプローチをお勧めします。このチュートリアルでは、内部で何が行っているかをすべて理解してもらえるよう、既存の設定を使わないようにしています。

コード例は章ごとに利用できます。それぞれyarn && yarn startまたはnpm install && npm startで実行できます。各章のステップバイステップの指示に従って全てゼロから入力することを推奨します。

すべての章には、それまでの章のコードが含まれています 。そのため、全てを含んだプロジェクトのボイラープレートを探しているのであれば、最終章をcloneすればそれで使えます。

注意: 章の順序は必ずしも最も教育的なものではありません。たとえば、テスティング/型検査はReactを導入する前に行うこともできます。しかしながら、章を移動させたり以前の章を修正するのは、以降の章を全て変更する必要があるため、かなり困難です。いったん状況が落ち着いてから、より良い方法のために配置を変更するかもしれません。

このチュートリアルのコードはLinux、macOS、Windows上で動作します。

目次

1 - NodeとNPM、Yarn、そしてpackage.json

2 - パッケージのインストールと使用

3 - BabelとGulpによるES6のセットアップ

4 - ES6のクラス構文を使う

5 - ES6モジュール構文

6 - ESLint

7 - Webpackによるクライアントアプリ

8 - React

9 - Redux

10 - Immutable JSとReduxの改良

11 - MochaとChai、Sinonによるテスティング

12 - Flowによる型検査

今後の予定

本番/開発環境, Express, React Router, サーバサイドレンダリング, Styling, Enzyme, Gitフック。

翻訳

翻訳を追加したい場合、translation recommendationsを読んでから始めてください!

日本語訳の方針 (by takahashim)

  • 英文の更新速度が早いので、英文に追従しやすくする
    • 文の数と順番は維持する
    • Markdownの記法は変更しない(一部改行を追加する)
  • 日本語として読みやすくする
    • 語順や節の順番は維持しない
    • youは(「あなた」と)訳さない
    • 代名詞は適宜展開する
    • 英単語と日本語の間の空白はトル
    • 英単語の区切りにも,は使わずを使う
    • :はそのままにする
  • テクニカルな用語については原文が透けて見える訳語にする
    • 困ったらカタカナを使う
    • もっと困ったらカッコ書きで原語も書く

Credits

Created by @verekiaverekia.com.

License: MIT