Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8883

【Node.js ~環境構築~】勉強メモ

$
0
0

開発環境用意

  • Node.jsが既にインストールされているか確認

ターミナルで下記のコマンドを実行

~ % node -v

v12.13.1のようにバージョンが表示された場合は、既にNode.jsがインストール済み
command not found: nodeと表示された場合は、まだインストールされていない。

  • Node.jsのインストール

Node.jsのインストーラーは公式サイトからダウンロード。
Node.js公式サイト
今回は、推奨版をダウンロード。
後は、OSに合わせて、Windows及びmacを選択。
image
ちなみに、Node.jsに加えて、npmもインストールされる。
(ダウンロードの下に同梱npmと記載あり)
npm (Node Package Manager)とは、パッケージを用意する為のシステム、
Railsでいうとgemみたいなものでしょうか。

  • 最後に、Node.js及びnpmが正常にインストールができているか確認
~ % node -v

~ % npm -v

ここまでで、Node.jsのインストールは完了、
次からは、Node.jsを実際使用して、アプリケーションを作成する為の準備の流れ

アプリケーション作成準備

  • 新規アプリケーション用のフォルダを作成

どこでも良いのでファルダを作成する。
今回は、こんな感じで作ったとする。
/Users/ユーザ名/projects/practice

そして、ターミナルのcdコマンドを使用して、practiceフォルダ迄移動する。

sample@sampleMBP ~ % cd
sample@sampleMBP ~ % cd projects
sample@sampleMBP projects % cd practice
sample@sampleMBP practice %


  • パッケージをインストール

必要なパッケージをインストールします。

まず以下のコマンドを移動したフォルダ、今回ならpracticeフォルダで実行

practice % npm init --yes

これは、npmの設定ファイルであるpackage.jsonを生成するコマンド。
package.jsonには、npmパッケージの設定情報などが書き込まれていく。


次に、npmパッケージのインストールをする。
今回は、expressと ejs というパッケージをインストールする。

以下のコマンドを実行

practice % npm install express ejs

npm install expressnpm install ejsと1つずつinstallコマンドを実行していくことも可能

サーバーを起動してページ表示

これでひとまず必要なパッケージは揃い、
また必要なファイルは既に作成されています(◯◯◯.jsonというファイルが2つ程作成されています)

後は、viewファイルと、JavaScriptを記載するファイルの作成
viewファイルは、名前はなんでも良いが、拡張子は.ejs
例:sample.ejs

JavaScriptを記載するファイルの拡張子は.js
例:app.js

これでファイルの準備は完了。
最後に、サーバーを起動する下記のコマンドをターミナル上で打つ。

practice % node app.js



これでファイルの中見をちゃんと記載していれば
正常にブラウザ上でアプリケーションが起動する。


Viewing all articles
Browse latest Browse all 8883

Trending Articles