このサイトは、只今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

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

2019.07.07

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

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

CATEGORY LIST

LATEST NEWS

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

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

JavaScript

2019.07.07

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

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US