JavaScriptでフルスタックを構築する：基本

JavaScriptの世界では、それぞれが特定の問題を解決する一連の小さなパッケージを使用して、テクノロジースタックを構築するのが非常に簡単です。 そして、これは良いことですが、一方で、あなたには本当に選択肢がありません-JavaScriptで幅広いタスクを実行するフレームワークは一般的ではありません。

この一連の記事では、JSスタックの構築における実際の経験を共有したいと思います。

• 記事1：基本
• 記事2：サーバー
• 記事3：クライアント

.NETからフルスタックJavaScriptに切り替えました。 Nodeの基本をマスターした後は、基本的な技術スタックとコードの編成方法を構築するために多くの時間を費やす必要がありました。 残念ながら、JSには、エラー処理、データベースへのアクセス、コード編成、承認など、ほとんどのプロジェクトの主要なタスクを解決する方法を確認できるエンドユーザーアプリケーションの例は多くありません。

基本技術の使用例を常に手元に用意するために、JSのフルスタックアプリケーションの例であるContoso Expressを作成しました。 私たちのチームでは、このプロジェクトを他のプロジェクトの開始テンプレートとして使用しているため、今後サポートおよび更新されます。

Github：contosoエクスプレス

Contoso Expressは、.NET Webプロジェクトの開発の基本を学ぶためのMicrosoftの有名なチュートリアルのリメイクです。

元のContoso大学

スタックの多くの部分について、1つの選択肢にとどまることは困難です。 そのため、一部のテクノロジーには代替の実装があります。 Contoso ExpressリポジトリのALTブランチをご覧ください。

これらの記事は、基本をすでに知っている人向けです。いずれかの分野で知識を補充する必要がある場合は、 追加リソースのリストで必要なものを探してください。

さあ始めましょう！

なぜjavascript

多くの理由がありますが、ここに私のトップリストがあります：

• シンプルさ ：基本的に、ノードライブラリには、理解しやすく直感的な方法で動作するシンプルなAPIがあります。 1つのライブラリで機能しなかった場合、原則として、適切な代替品を見つけるのは簡単です。

  
  
  
  
  
  
  

• 制御 ：プログラマー自身が、特定のタスク用の小さなモジュールを選択して組み合わせることにより、プロジェクトインフラストラクチャを構築します。 もっと時間がかかりますが、結果には価値があります。 一度理解すると、得られた経験は将来簡単に適用できます。

  
  
  
  
  
  
  

• 汎用性 ：JavaScriptは最初はクライアントでのみ機能しました。 最初に、Nodeと一緒にサーバーに移動し、最近ではデスクトップ（Eletctron）とモバイルアプリケーションを正常に作成できるようになりました。 さらに、モバイルアプリケーションには、ハイブリッドアプリケーション（ブラウザのラッパーを使用する（Cordova））またはネイティブインターフェイスを備えたアプリケーション（ReactNative、NativeScript）のオプションがあります。 Nodeには膨大な数のライブラリがあり、他のテクノロジー、データベース、クラウドテクノロジー、さまざまなフォーマットやプロトコルと簡単に統合できます。

  
  
  
  
  
  
  

• 簡単な展開 ：ノードは、LinuxとWindowsの両方のサーバーに簡単に展開できます。 .NETでの長年の作業の後、展開は毎回私にとって不快なテストでした。Nodeでは、このプロセスはさらに楽しいものです。 試してみるだけです。

  
  
  
  
  
  
  

• パフォーマンス ：ノードは非同期であり、ファイル校正やデータベースアクセスなどの長時間の操作中に実行プロセスをブロックしません。 これにより、シングルスレッド（シングルスレッド環境）を使用するときに、高レベルのパフォーマンスを実現できます。 一方、JavaScriptでの計算は、静的に型付けされた言語よりも遅くなります。 ほとんどのプロジェクトでは、これは問題ではありません。 データ変換だけでなく計算が必要な場合は、別のサービスに別のサービスを作成することをお勧めします。

  
  
  
  
  
  
  

• サーバーとクライアントの1つの言語 ：これは便利です。クライアントとサーバー間でコードを簡単に転送でき、開発と保守が容易になるためです。

  
  
  
  
  
  
  
• JavaScript言語 ：JavaScriptは非常に柔軟で使いやすく、ES6の最新バージョンでは多くの言語の欠陥が修正されており、TypeScriptを使用してオプションでタイピングを追加できます。

そして、これは完全なリストではありません。

JS言語オプション

最新のJavaScriptは、いくつかの方法で作成できます。

• ES5
• ES6 / ES7次
• JSでコンパイルされた言語（TypeScriptなど）

JavaScript標準

• ES5はJavaScriptの2009バージョンで、すべての最新のブラウザーとノードで完全にサポートされています。

  
  
  
  
  
  
  

• ES6は最近承認された言語の更新です。 すべてのJSエンジンの標準サポートの開発はまだ開発中です。

  
  
  
  
  
  
  
• ES7 / Next -JSの新機能はまだ承認されていません。

ES6サポートの現在のステータスは、次のWebサイトでご覧いただけます。

カンガックスES6 。

したがって、近い将来、すべてのブラウザでサポートされていないため、ES6でクライアント部分をすぐに開発することはできません。

Nodeには、V8エンジンが使用されます。現在の安定したLTSバージョン（4.x）は、すべての新しいES6機能をサポートしていません。

LTS（長期サポート）は、実稼働での使用が推奨されるNodeJのバージョンです。 次のLTSノードは2016年10月に予定されており、すでにほとんどのES6機能をサポートしています。

トランスパイリング

ES6 / ES7機能を使用するために、ES6で記述されたコードをES5に変換するトランスパイラーがいくつかあります。

コンパイルとコンパイルの違いに注意してください： here 。

Babelは、ES6 / Next to ES5で最も人気のあるトランスポーターです。

TypeScript

TypeScriptは、静的型付けの可能性を追加するJavaScript拡張言語です。 TypeScriptの型は、コードの正確さ、追加のリファクタリングおよび自動ヒントを検証するために使用されます。 TypeScriptがJSに置き換えられると、すべての型定義が省略されます。

TypeScriptは多くのES6 / ESNext機能をサポートしており、（Babelの代わりに）トランスパイラーとして使用できます。

また、TypeScriptには、JSにはない追加の構成要素があります-クラスなどの列挙型、継承、多態性。 これらは、補助JSコードを使用してJSにトランスポーズされます。

すべてのTypeScript機能が同等に役立つわけではありません。主なカテゴリをリストします。

• ES6 / ESNext -TS トランスピレーションはこの点で優れた働きをしますが、いくつかの点でバベルより劣ります。たとえば、TypeScriptのasync / awaitは、ES6バージョンにトランスポーズする場合にのみ使用可能です。 これについては、次の記事で詳しく説明します。

  
  
  
  
  
  
  

• アプリケーションコードでの静的な型指定は TSを使用する主な理由です。TSの型はオプションです。型が指定されていない場合、型はanyです。つまり、この型から任意のフィールドを読み書きできるため、既存のJSコードをTSに変換します、はるかに簡単で、どこにでも型を追加する必要はありませんが、それが理にかなっている場合にのみ。 この場合、TSでタイプを記述しなくても、アプリケーションを起動する前であっても、些細なタイプミスを検出するのに役立つ追加のチェックがたくさんあります。 さらに、コード内のヒントは適切に機能するため、モジュールに含まれるメソッドとそれらに含まれるシグネチャを再度確認する必要はありません。

  
  
  
  
  
  
  

• サードパーティライブラリの入力 -TSを使用すると、サードパーティライブラリの構造（lodash go expressなど）を記述できます。これにより、正しいパラメーターでメソッドを呼び出すことを制御でき、ドキュメントを使用せずにメソッドとその署名を表示できます。 残念ながら、そのような記述の品質には多くの場合望まれないものが多く、記述に必要な署名がない場合は、手動で追加する必要があります。 サードパーティの説明を使用しないほうが簡単な場合があります（タイプ「any」のようにライブラリを操作します）。 問題は、TS内のライブラリーの説明とライブラリー自体が、多くの場合異なる人々によって書かれていることです。 おそらく、TSの人気が高まると状況は改善します。

  
  
  
  
  
  
  
• JSにないTS機能 -不必要に使用したり、TSに直接記述されたフレームワーク（Angular2など）を使用したりしない場合はお勧めしません。 これらの機能を使用すると、TS <-> JSの変換が非常に難しくなります。TSの異なるバージョン間で変更されることがよくあります。

何を選ぶか

ES6とTypeScriptを選択することをお勧めします。 ES6には、開発をより簡単で楽しくする多くの便利なアドオンがあり、初期セットアップにより多くの時間を費やす価値があります。 私のプロジェクトでは、設定と統合にさらに多くの労力が必要ですが、開発プロセスを非常に真剣に改善するため、TypeScriptに切り替えました。 どちらを選んでも、両方で作業して情報に基づいた選択をするとよいでしょう。

開発環境

WebStormは、多くの組み込み機能を備えたスマートな開発環境です。 TypeScriptの良好なサポート。 有料。 プロジェクトwikiページでcontoso Expressの構成の詳細。 WebStormは私たちのチームのメインIDEです。

Visual Studio Codeは、Microsoftの無料の環境です。 TypeScriptの最高のサポートが最近登場しましたが、なじみのある機能はありません。 ペースが速く、完全に作成され、JavaScriptプラグインをサポートします。

その他-Atom、Sublime、Bracketsなど、他のJavaScript IDEを使用できます。 TypeScriptはどこでも多かれ少なかれサポートされています。

npmパッケージを選択します

npmの操作は非常に簡単です。 インストールが簡単で、パッケージを公開するだけです。 この結果、npm（現在330.000+）には多くのパッケージがあります。

適切なパッケージを選択することは非常に困難です。 どのようなリクエストでも、npmjs.comには多くのパッケージがありますが、問題を解決するための基本的なパッケージが提供されるという事実はありません。

パッケージを選択するときは、ダウンロード数（人気）とパッケージの更新頻度（githubリポジトリにコミット）に注意する必要があります。 必要なパッケージが見つかったら、インターネットで情報を検索できるため、同様のタスクを実行する他のパッケージを見つけることができます。

npm npms.ioで代替検索を行うサイトがあり、人気やサポートの規則性などの特性をすぐに計算しました。

今後の記事では、基本的な開発タスクの基本的なパッケージオプションについて説明します。 パッケージ名が引用符で囲まれている場合（「bluebird」など）、これはパッケージがnpmに登録されている名前を意味し、 https：//www.npmjs.com/package/ { package_name }で表示できます（つまり、ケースhttps://www.npmjs.com/package/bluebird ）。

データベース

SQLまたはNoSQL？

特定の状況に応じて、この質問に明確に答えることはできません。 SQL / NoSqlの最も一般的なオプションは、PostgreSQL / MongoDbです。 JSONフィールドが最近PostgreSQLに追加されたことにより、SQL / NoSqlの世界のベストを組み合わせた非常に魅力的なオプションになりました。 しかし、これにもかかわらず、MongoDbは依然としてNodeで最も人気のあるデータベースであり、特にSQLデータベースの経験がない人にとっては作業が簡単になります。

データベースへのアクセス

データベースを操作する場合、データベースドライバーまたは何らかの高レベルのORM抽象化を使用して、アクセスを直接使用できます。 データベースとの対話があまりない場合は、直接アクセスまたはKnex（SQLデータベース用）などの低レベルの抽象化を使用するのが最善です。

ORM

Sequelizeは、SQLデータベースで最も人気のあるORMです。 データベーススキーマに対する高度な抽象化を提供し、基本的なSQLダイアレクト（PostgreSQL、MySQL、SQLiteおよびMSSQL）をサポートします。 Contoso Expressによって使用されます。

Knexは低レベルの抽象化です。 本格的なORMよりもクエリデザイナに似ています。 より多くの方言をサポートし、生​​成されたSQLをより詳細に制御できます。 データベーススキーマとその移行を構築するための関数があります。

Bookshelfは、Knexベースのもう1つの人気のあるORMであり、抽象化のレベルはSequelizeよりも低く、多くのものを手動で定義する必要があります。

Mongoose -JSで最も人気のあるMongoDBデータベースで最も人気のあるORM

直接接続

すべての主要なデータベースには、直接接続のための良質のドライバーがあります。 Postgresの場合、「pg」または「pg-promise」パッケージを使用します。

次は何ですか

次の記事では、サーバー上でJSを操作することについて説明します。 より実用的で、Webフレームワークの選択、プロジェクト構造の編成、構成の操作、承認、ロギング、エラー処理などをカバーします。

特に、プロジェクトContoso Expressのコードに直接コメントをお寄せください。

最後まで読んでくれたみんなに感謝します！ お楽しみに！