Giter VIP home page Giter VIP logo

js-stack-from-scratch's Introduction

ゼロから始める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生活へようこそ。

これは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

js-stack-from-scratch's People

Contributors

arthur-zhuk avatar ceritium avatar eswat avatar fbertone avatar felixsanz avatar gitter-badger avatar grabes avatar jakeniemiec avatar kevin-xi avatar kulte avatar nicksarafa avatar pd4d10 avatar peterchon avatar piperchester avatar radarhere avatar rouzazari avatar saniko avatar senk avatar takahashim avatar usulpro avatar verekia avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.