このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

サーバーサイドJavascript node.js expressやらnpmやら

JavaScript

2013.01.14

この記事は最終更新日から1年以上が経過しています。

前回の、サーバーサイドJavascript 『node.js』 macにインストール・使用方法の続きとなります。

node.jsをインストール完了したかと思いますので、

更に便利に使う為、「npm(Node Package Manager)」を利用し、

「express」をインストールしましょう。

npm

https://npmjs.org

express

http://expressjs.com

 

node.jsのwebサイトからパッケージをダウンロードし、インストールした場合、

npm(Node Package Manager)も利用出来る状態かと思います。

npm -v

でバージョンが表示すればインストールできている状態となります。

インストールできていない場合は、

curl http://npmjs.org/install.sh | sh

でインストールできるようです。

パーミッションエラー当でインストールできない場合は、

sudo curl http://npmjs.org/install.sh | sh

こちらでよいのかな。。

再び、

npm -v

でバージョンが表示すればインストールできている状態となります。

express インストール

expressをnpmコマンドでインストールします。

npm install -g express

でインストールできるようです。(expressはパッケージ名。expressの場合なのでexpress)

オプション-gがないと、実行しているディレクトリ下に

“node_modules”ディレクトリを作り、そこにパッケージが入ってしまいます。

オプション-gを付けることによって、一度のインストールで全部のnode.jsアプリケーションで

使えるようにグローバルな領域にモジュールをインストールします。

この際、パーミッションエラーでインストールできないことがあるようなので、

エラーが出てしまう場合は、

sudo npm install -g express

sudoコマンドを利用してインストールします。

passwordを求められますので、PCのパスワードを入力。リターン。

express 検証

インストール完了しましたら、早速使ってみましょう。

npmでexpressをインストールした場合、expressコマンドが使えるようになっているので、

任意のディレクトリで次のコマンドを発行すると、新たにsampleディレクトリが作られます。

express example

実行すると、以下のディレクトリが作成されます。

create : example
create : example/package.json
create : example/app.js
create : example/public
create : example/routes
create : example/routes/index.js
create : example/views
create : example/views/layout.jade
create : example/views/index.jade
create : example/public/javascripts
create : example/public/stylesheets
create : example/public/stylesheets/style.css
create : example/public/images

dont forget to install dependencies:
$ cd example && npm install

expressコマンドでアプリケーションの骨組みを作ってのですが、このままだと使えませんので、

コマンドラインにも表示しているように、

cd example

でディレクトリを移動し、

npm install

npmコマンドを使うと、このpackage.jsonが読み込まれて必要なモジュールがインストールされます。

nodeコマンドでapp.jsを実行します。

node app.js

すると、

Express server listening on port 3000 in development mode

と表示されますので、http://127.0.0.1:3000/にアクセスすると、

次のような画面が表示されると成功となります。

routes/index.js

/*
* GET home page.
*/
exports.index = function(req, res){
 res.render('index', { title: 'Express' });
};

views/index.jade

extends layout
block content
h1= title
p Welcome to #{title}

こちらでテンプレートを出力しているようでしたので、こちらを変えてみると、

出力も変更できました。

以上になります。

インストール先

node.jsをパッケージでインストール

/usr/local/bin

npm install でインストールしたパッケージ

/usr/local/lib/node_modules

に格納される。

Comment

Related Article

JavaScriptで、DOMを放り投げる処理

2024.07.27

2022 VIVA JS World Cup 開幕!! 〜 Vue3で作るサッカーゲーム 〜

2022.12.24

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

CATEGORY LIST

LATEST NEWS

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US