Node.jsとnpmついて

Node.jsについて

Node.jsはブラウザ以外でJavaScriptを実行したい場合の実行環境の一つです。

主な利用としては、サーバー内のシステムとしてJavaScriptを実行したい場合があります。

ほどんどのシステムにはNode.jsが最初から用意されていないため、自身でインストールして追加します。

では、まずはNode.jsをインストールしてみましょう。様々な方法がありますが、今回は下記の著書に書かれているやり方でインストールしていきます。

Node.jsのインストール

Windows環境の場合

下記のサイトから進めていきます。

https://nodejs.org/en/



上部のナビからDOWNLOADSを選びます。

msiファイルをクリックします。



下記のような画面になりますのでNextをクリックします。



進んでいくとカスタムセットアップ画面が表示されます。今回は特別な変更はないのでNextをクリックします。



付随するツールのインストール選択が求められていますが、今回は不要なのでチェックなしでNextをクリックしていきます。

インストール完了しましたら「Finish」をクリックします。これでNode.jsの環境構築ができました。



Mac環境の場合のインストール方法はここでは割愛させていただきます。

npmについて

次にnpm(Node package manager)とはJavaScriptの開発で使用する「誰かが作った便利な機能を有するコード」を管理、導入するためのツールとのことです。

Node.js上で動作するコードを様々な人がnpmパッケージとしてインターネット上のサーバーへ公開してくれており、それらの導入や管理をnpmで行うということです。

まずは簡単なパッケージを導入してみましょう。

下記の著書では「http-server」というコマンドをグローバルインストールしています。

この作業を行うとcdやdateコマンドのように、ターミナルからhttp-serverというコマンドが利用できるようになります。

用語解説

・ターミナル:ターミナルとは、文字列だけで構成され、専用のコマンドを使ってOSの機能を実行したり、ディレクトリ内のファイルを管理したり、実行することができるソフトのことです。例:Windowsのコマンドプロンプト。Ubuntu なら 端末(ターミナル)。UbuntuとはLinuxベースのOSでLinuxと同じです。

・cd:(コマンド:コンピュータに対する命令文(コマンド)のひとつ。WindowsとUNIX系で使える。自分の今いるディレクトリを移動するときに使うコマンド)

・dateコマンド:コンピュータの日時を表示・設定するときに使うコマンド(UNIX系、Windows系のOS)

・ディレクトリ:「パソコン上に保存されているデータを分類したり整理したりするための容れ物」という意味。ディレクトリと似た仕組みとして「フォルダ」があります。両者は、「ファイルを分類・整理するための容れ物」という意味で大きな違いはありません。

ターミナルに「npm install http-server -g」と入力しインストールします。

グローバルインストールを示す「-g」のオプションを指定しました。これを指定すると「システム全体で利用する」という形でインストールすることができます。

http-serverを起動する

まずは、ターミナルから次のコマンド(命令)で「app」フォルダを作成し、移動させます。

mkdir app // フォルダの作成
cd app // appフォルダへの移動
そしてappフォルダ内に以下のようなファイルを用意します。
index.html <!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<h1> http-server</h1>
</body>
</html>

そして再びターミナルから次のコマンドを実行してみます。
http-server

すると下記のような情報が表示されます。


そしてターミナルに出力されている「 http://192.168.100.102:8080」または「 http://127.0.0.1:8080」というURLをブラウザのアドレスバーに入力してみると、 ブラウザに「http-server」が反映されます。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT)
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。



レベルアップにプロからの学びを。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

就職・転職支援

ITエンジニア向けIT求人・転職サイト