express.jsから始めましょう

Sep 11, 2025
操作方法
Get started with Express.JS

Node.jsを使用してブラウザに直面しているアプリケーションを作成することは面倒です。 express.js. はAです JavaScriptフレームワーク Node.js環境でホストされているシングルページとマルチページアプリケーション専用。

  • ワークフローをスピードアップするための29 Webデザインツール

それはあなたがすでに慣れ親しんでいるnode.jsの機能を不明瞭にしないという基本的なWebアプリケーションの薄型化された層を提供します。また、HTTPユーティリティメソッドとMiddleWareの使用準備完了のおかげで、堅牢なAPIを作成するのに最適です。

より少ない複雑なオプションが必要な場合は、コーディングなしでサイトを作成できます。 ウェブサイトビルダー 。いずれにせよ、あなたがあなたを得ることを確認してください ウェブホスティング サービス権。始めたいですか？これがExpress.jsについて知る必要があるものです。

01.作業可能な構造を生成します

Get started with Express.JS: Generate a workable structure

始めるための適切な作業オプションを紹介します

Express.jsは「非ピニー化」であることを誇りにしています。つまり、フレームワークはアーキテクチャ、テンプレートエンジン、マークアップエンジンに関して開発者がミックスして一致させることができます。悲しいことに、大きな力が大きな責任があります。

Express Developerチームは、プロジェクトジェネレータを導入して打撃を和らげようとしています（チームと一緒にデザインしている場合は、最善を展開する場合 クラウドストレージ 物事をまとめるために）。それはあなたのワークステーションに来て、NPMパッケージの形で来て、次のフレームワークで私たちの実験を助けます。 

 Tamhan @ Tamhan-ThinkPad：〜/デスクトップ/
もの/ 2018AUG / FutureExpressJS /
ワークスペース$ sudo NPMインストール
Express-Generator -G

ジェネレータには数十のプロジェクトオプションも含まれています - この手順に付属の図は完全ヘルプ出力を示しています。簡単にするために、デフォルト設定に基づいてプロジェクトに自分自身を制限します。の生成プロセスを開始します。 

 Tamhan @ Tamhan-ThinkPad：〜/デスクトップ/
もの/ 2018AUG / FutureExpressJS /
ワークスペース$ Express FutureTest

警告：デフォルトのViewエンジンは将来のリリースではJADEではありません。

完了したら、現在の作業ディレクトリに 'FutureTest'という新しいフォルダが含まれています。それは私たちのテストプロジェクトの本拠地であり、NPMのパッケージダウンロードコマンドを使用して構成する必要があります。書き込み時に、ジェネレータにはJade View Generatorが含まれています。プロジェクトは、近い将来これを変更する予定で、意図したビューエンジンを選択するパラメータを渡すことを義務付けています。あるいは、PUGの使用を要求する - それはJadeエンジンの公式の後継者です。 

 CD FUTURETEST /
NPMインストール

02.アプリケーション構造を理解する

プロジェクトジェネレータがそのことをしたことを、選択したエディタでapp.jsを開いましょう。そのような要約 - 構造は、次のようにそれ自体を提示します。 

 var indexRouter =要求（ './ ./
ルート/インデックス '）;
var userseRouter =要求（ './
ルート/ユーザー '）;
var app = express（）;
//エンジンの設定を表示します
app.set（ 'views'、path.join（__
DirName、 'Views'））。
app.set（ 'View Engine'、 'Jade'）;
app.use（ロガー（ 'dev'））;
app.use（express.json（））。
app.use（Express.URLENCODED（{
拡張：偽}））
app.use（cookieparser（））。
app.use（express.static（パス。
join（__ dirname、 'public'））））;

Express.jsは非常にモジュール式です。 App.jsはエントリポイントとして機能します。ここで、1つ以上の 'use（）'関数は、さまざまな要求を処理することを目的としたコンポーネントの追加を可能にします。 'set（）'の呼び出しをエンジン内のパラメータを調整できます - そのうちの1つが前の手順で説明したJade View Engineのインストールです。

Webコンテンツの実際の排出量は、ルータクラスで行われます。簡潔にするために、index.jsに自分自身を制限しましょう。 

 VAR Express =要求（ 'Express'）。
var router = express.router（）;
Router.get（ '/'、関数（Req、Res、
次） {
  res.render（ 'index'、{title：
'Express'}）;
}）;）
module.exports =ルーター

'get（）'には、対応するイベントが発生するたびに呼び出される抹消文字列とイベントハンドラがあります。私たちの場合、選択されたテンプレートエンジンのレンダリング方法は、ログインしたユーザーのブラウザにコンテンツを返すように言われます。

03. Webページを実行します

この時点で、私たちは初めてスピンのためにウェブサイトを取る準備ができています。 Express.jsインストールを含む端末に戻り、Debug Flag Setを使用してNPMを起動します。 

 debug = myapp：* npm start

完了したら、Project Generatorによって作成された足場を見るために、選択したブラウザにhttp：// localhost：3000を入力します。完了したら、を押します Ctrl. + c ウィンドウを閉じてコマンドラインインタプリタへのコントロールを閉じるには - これがデバッグWebサーバも閉じることに注意してください。

04.ルーティングとエンドポイントに関するすべてです

Get started with Express.JS: Routing and endpoints

正しいエントリポイントを並べ替え、新しいルートを追加し、正規表現のサポートを導入します。

簡単にするために、Webアプリケーションが通常一連のエントリポイントで構成されていることに同意しましょう。 Express.jsはルータクラスを介してこれらを処理します - それを受信要求に応答して呼び出されるメソッドのリポジトリとして考えます。

アプリケーションに新しいエンドポイントを追加することは、キューに新しいワーカーを追加することによって実行されます。私たちの自動生成された例は2つのルータータイプを作成し、それぞれ 'require'メソッドを使用して上げられます。 

 var indexRouter =要求（ './ ./
ルート/
インデックス '）;
var userseRouter =要求（ './
ルート/
ユーザー '）;

次のステップで、 'app.use'はルータを登録し、それらを要求文字列に接続します。既存のURLがシステムに入力されている場合、このコードはさらに呼び出されるエラーハンドラを追加します。 

 App.Use（ '/'、IndexRouter）;
app.use（ '/ Users'、UsersRouter）;
app.use（関数（Req、Res、Next）
{
  次（CreateError（404））;
;

05.新しいルートを作成します

users.jsを開き、以下のようにそのコードを変更します。 

 Router.get（ '/ user1'、関数（Req、
res、
次） {
  res.send（ '未来とこんにちは
1 '）;
}）;）
Router.get（ '/'、関数（Req、Res、
次） {
  res.send（ 'Aに応答する
資源'）;
;

Express.jsへの新しいルートを追加することは機械的プロセスです。選択したルータオブジェクトをつかみ、ハンドルに対応するメソッドを呼び出します。次に、 'app.use'に登録されている 'offset'に追加される文字列を渡します。その瞬間以降、http：// localhost：3000 / users / user1とhttp：// localhost：3000 /ユーザー/有効な応答を返す。

Express.jsは 'Get'リソースの処理に限定されないことに注意してください。 'POST（）'、 'put（）'と 'delete（）'は、従来の4つのHTTPリクエストを処理します。最後に、 'req'オブジェクトはリクエストヘッダーへのアクセスを提供します - パラメータやクライアント情報を解析するときにそれを良い使用にします。

06.高度なマッチング

手作業でルートを追加すると、プログラムの複雑さが成長するにつれて面倒になります。 express.jsは、ワイルドカードと正規表現の両方のサポートを導入することによってこの問題のために収まる。たとえば、文字シーケンス犬を含むさまざまな文字列と一致するように正規表現を使用する次の宣言を調べてください。 

 app.get（/* dog $ /、関数（Req、
res）{
  ...}）

07.異常なルーティング

4つのHTTPリクエストを処理している間は、誰かに十分であるべきである（HAT TIPからBill Gatesへ）、express.jsも追加のプロトコルを扱うことができます。 Express-WS このセクションのための特においしい候補です - WebSocket通信を含めるためにexpress.jsのreactを拡張します。

プラグインがMain Express.jsプロジェクトに追加されると、それを有効にすると、 'require'呼び出しによって達成されます。それはすべてのメソッドを含むヘルパーオブジェクトを返します - ルータとプラグインの間の接続を確立するためにそれを呼び出します。 

 var expressws =要求（ 'Express-
WS '）
アプリ）;
その後、「WS（）」という新しいメソッドを呼び出して、WebSocketテクノロジに基づいて新しいルートを追加できます。
app.ws（ '/'、function（ws、req）{
  WS.ON（ 'メッセージ'、機能（MSG）
{
    console.log（msg）;
  }）;）
  console.log（ 'socket'、req。
テスト）; ;

プロトタイプは、「WS」オブジェクトが存在するため、通常のルートとは異なります - 接続を担当するクライアントに接続されている基盤となるWebSocketインスタンスへのアクセスを提供します。

08.データベースとテンプレートエンジンを統合します

Get started with Express.JS: Integrate databases and templating engines

必ず豊富なプラグインの生態系の力を採用してください

Node.jsに基づくことは、Webベースのアプリケーションに取り組むときに、リッチプラグインの生態系がコマンドにあることを意味します。たとえば、SQLデータベースとNOSQLデータベースへのアクセス - 通常は非常に面倒なタスク - データベースベンダによって提供されるプラグインを使用して処理できます。実際の展開は、必要なNPMモジュールをインストールするのと同じくらい簡単です - コードがRedisデータベースにアクセスする場合は、次のものを追加してください。 

var redis =要求（ 'redis'）
var client = redis.createClient（）
client.set（ 'stringkey'、 'Aval'、
redis.print）
。 。 。

もちろん、メモリ内SQLiteもサポートされています。 

 var sqlite3 = require（ 'sqlite3'）。
冗長（）
VAR DB =新しいSQLite3。
データベース（ '：メモリ：'）
db.SERIALIZE（関数（）{
  db.run（ 'table loremの作成
（情報テキスト） '

node.js統合はデータベースプラグインに限定されないことに注意してください。冒険的な開発者は、Tesselのような製品を含むことだけで、それによって対話することができるWebアプリケーションを作成することができました。 モノのインターネット デバイス

09.スタイルのテンプレート

単純なプログラムと実際のプログラムが異なる1つの領域は、ビューの作成です。小さな例のプロジェクトは通常、手作りの文字列を使用しているが、HTMLの大きな帯を接続されたものに組み立てることは非常に厄介です。

テンプレートエンジンはきちんとした回避策を提供します。それらは事前定義されたスキーマファイルの作成を許可します。これはプログラム的に実行されます。

プログラム例の例では、ビューは.Jadeファイルにあります。開封指数は次のような構造を明らかにする。 

レイアウトを拡張します
コンテンツをブロックします
  h1 =タイトル
  Pへようこそ＃{title}

カーリブラケットに囲まれた式は、実行時に値を置き換えるテンプレートフィールドとして機能します。 index.jsはパラメータオブジェクトを使用してレンダリングを呼び出し、このステップに付属の図に示す開始ページのレンダリングにつながります。 

 Router.get（ '/'、関数（Req、Res、
次） {
  res.render（ 'index'、{title：
'Express'}）;
;

ほとんどのテンプレートエンジンは、アイテムテンプレートを備えたときにアレイを解析することもできます。この場合、ARRAYのすべてのラインがDOMモデルの1つのインスタンスで表示されます.Androidで見つかったリスト表示モデルとの類似点は純粋に一致しています。 Express.jsは事前定義されたテンプレートエンジンに限定されません。何らかの理由であなた自身を転がすのように感じるべきです、単に概説された手順に従う ここに - 原則として、1つの機能をすべて上書きする必要があります。

10.静的コンテンツを処理します

express.jsアプリケーションは、CSSファイルと写真を含む傾向があります。レンダリング関数を介してこれらを提供することは非効率的です - よりスマートな方法で彼らの従来のHTTP要求を使って彼らの陽気な方法でそれらを送ることが含まれます。これは、「Express.Static（）」関数を介して実現できます。これは、エクスポート用のフォルダ全体をマークできます。 

 App.Use（Express.Static（ 'public'））
app.use（express.static（ 'ファイル'））

11.イベントフローを変更します

最後に、私たちがミドルウェアという用語を間もなく言及させます。 Express.js Parlanceでは、ミドルウェアは、反対側のフローチャートに自分自身を統合する1つ以上のコンポーネントのセットです。そして、それらがルーティングシステムを通過するときに要求を変更するために使用されることができます - 正しく実装されたときに、無限の機能を達成することができます。

さらに、いくつかの準備ができているコンポーネントを見つけることができます ここに - 大規模な開発プロジェクトに着手する前にこのサイトをご覧ください。

12. express.jsアプリをホストする方法

Get started with Express.JS: How to host an Express.JS app

新しい作成をホストできるプラットフォームを検討してください。

Express.jsベースのアプリケーションのテストは簡単です。ページが第三者からアクセス可能になるようになると問題が発生します.Node.js環境によって生成されるため、WebホスティングサービスへのFTP展開に静的イメージが適合する方法はありません。

理論的には、ラズベリーPI、OrangePi、専用サーバー、またはクラウドサービスからレンタルされた仮想マシン、または仮想ホスティングを提供するWebホストプロバイダの使用には何もありません。ただし、フルバーチャルマシンを借りると、実行環境とオペレーティングシステムを最新の状態に保つ責任があります。

このタスクがあなたの好みではない場合、プラットフォームAS-Aサービスプロバイダは、より魅力的な（ほとんどの場合、かなり価格）の選択になることができます。

多くの開発者はHerokuを検討して、このボックスウトに付随する図には、Node.jsホスティングに関連するすべてのもののゴールドスタンダードになることを考えています。

しかし、これは真実の少し不公平です。これらすべてのシステムでは、主な問題は取り扱いです - Azureはその遅い展開では知られています。その他のプロバイダーは、非常に複雑な構成システムの使用困難なバックエンドサービスを備えた負担が困難です。

さらに、サポートされているversion of node.js環境はプロバイダとプロバイダとは異なります。もちろん、トピックを深さでカバーするのに十分なスペースがありません。訪問 Mozillaの展開チュートリアル とexpress.js ' 性能と信頼性 そして 安全 関与するいくつかの問題についてのベストプラクティスページ。より多くのベストプラクティスを手ばすためのプロバイダのドキュメンテーションを確認してください。

13.あなたのアプリケーションを将来証明します

Get started with Express.JS: Future-proof your applications

新たな追加のホストを注意する必要があります

Express.jsの開発サイクルはスムーズからはほど遠いです。開発者は、クライアントコードの書き換えを必要とする頻繁なAPI変更でよく知られています。 3.xから4.xへのスイッチは特に痛いものでした。そのため、5.xの差し迫ったリリースでは、不快感を感じているのはかなりの数の2つのリリースです。

Express.js 5.0がいくつかの破断の変化をもたらしながら、それらの影響はより限られています。まず最初に、Real-Ifコードで使用している場合は、既に廃止予定の関数のセットが削除されます。

View Enginesの設計者は「Res.Render（）をチェックする必要があります。フレームワークのバージョン5は、非同期レンダリングを強制することによってパフォーマンスを強化します。

それに加えて、一連の夏の改善と変化 ここに 以前のバージョンからのいくつかの絶滅の特長の戻りを見ています - さらに、いくつかの長年のバグは新しいリリースで修正されます。

最後に、新しいバージョンをすでに試すことができることに注意してください。ソースコードのコピーを作成し、ターミナルをつかみ、次のコマンドを入力して、アーカイブの価値のないブリードエッジJavaScriptをダウンロードします。安全になる。 

 $ NPM Install Express @＆gt; = 5.0.0-
Alpha.1  -  Save

この記事はもともとCreative Web Design Magazine Web Designerの第279号に発行されました。 ここに問題279を購入してください または ここでWeb Designerを購読してください 。

関連記事：

  • 新しいNode.js 8について知っておく必要があるすべて
  • あなたが知る必要がある20 Node.jsモジュール
  • 25ゲームの変化JavaScript Tools.

操作方法 - 最も人気のある記事

あなた自身のスタイラスをわずか4世帯で（真剣に）してください

操作方法 Sep 11, 2025

（イメージクレジット：オリーカーティス） あなたのiPadやタブレットのためにあなた�..

Photoshopでのストーリーボード

操作方法 Sep 11, 2025

（イメージクレジット：マークエヴァンリム） Photoshopでのストーリーボードは、あな�..

How to make a photo collage in Photoshop CC

操作方法 Sep 11, 2025

Photoshopでフォトコラージュを作る方法を学ぶと、さまざまな状況が多いです。個々の写真は間に合うようにシングルモーメントをキャプチャ�..

マウス制御視差の背景効果を生み出す

操作方法 Sep 11, 2025

（画像クレジット：Renaud Rohlinger） Parallax Scrollingを持つサイトは、その理由で普及し続�..

あなた自身のWebGL Physicsゲームを構築する

操作方法 Sep 11, 2025

このプロジェクトはさまざまな部分に分割されます。私たちはHerokuの概要を述べる、3.jsでPhysijs�..

現実的な3D照明のための12のヒント

操作方法 Sep 11, 2025

照明はどちらも基本的です 3Dアート あなたが働いているプロジェクト。最も基本的�..

映画館4Dで現実的な植物を作る

操作方法 Sep 11, 2025

あなたの最終的な使用に関係なく、人工の構造を中心としたほとんどのシーンは、植物や木の上..

How to make 3D lettering in Illustrator

操作方法 Sep 11, 2025

先週Adobeは、それを自分の役に立つように多くのビデオをリリースしました。 最新のアップロードの中には、イラストレーターで3D..

カテゴリ