MENU
  • プロフィール
  • サービス
    • 初回の無料相談
    • 単発レッスン
    • HP作成5回レッスン
  • 実績・お客さまの声
  • ブログ
  • お問合せ

    カテゴリー

    • HP継続レッスン
    • 単発レッスン
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • ひとりビジネス
    • Web・SNS集客
    • 自分で作れるおしゃれデザイン
    • プログラミング
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2025年6月
    • 2025年3月
    • 2025年1月
    • 2024年12月
    • 2024年3月
    • 2023年7月
    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPressレッスン
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    自分で作れる優しいホームページレッスン
    • プロフィール
    • サービス
      • 初回の無料相談
      • 単発レッスン
      • HP作成5回レッスン
    • 実績・お客さまの声
    • ブログ
    • お問合せ
    1. ホーム
    2. プログラミング
    3. 【はじめてのNode.js】環境構築からプログラムを動かす手順をていねいに解説!

    【はじめてのNode.js】環境構築からプログラムを動かす手順をていねいに解説!

    2025 7/04
    プログラミング
    2020-04-182025-07-04

    Node.jsをはじめてさわってみました。

    動かすまでに色々疑問がでてきたので、Node.jsの基本と自分のPCでプログラムを書いて動かせるようになるまでに必要な知識をまとめました。

    この記事の内容
    • そもそもNode.jsとは?
    • Node.jsを始める前の基礎知識
    • Node.jsの環境構築
    目次

    Node.jsとは?

    Node.jsとは「JavaScriptをサーバーサイドで動かすための仕組み」。
    Node.jsを使うと、Web上で動くアプリケーションやソーシャルゲームなどが作れる(らしい)。

    クライアントサイドブラウザ上で見える画面のデザインや、ユーザーがブラウザ上で行う操作を扱うためのプログラム。
    使われるプログラミング言語:HTML/CSS、JavaScript(jQuery)
    サーバーサイドブラウザから受け取った情報を、データベースと接続したり、処理するためのプログラム。
     使われるプログラミング言語:Ruby, Java, PHP, Python

    Node.jsを使うための事前知識

    【HTML/CSS】
    文章や画像をレイアウトしてWebページに表示する。

    【JavaScript】
    ブラウザ上で動くプログラミング言語。
    UI(ユーザーが操作する部分)を作るときに使われる。

    JavaScriptを使うと、

    • スライド、ポップアップやアコーディオンなどのアニメーション
    • フォームの入力チェックをする

    などの動きのあるWebページを作ることができる。

    【UNIXコマンド】
    環境を構築したり、プログラムを動かすときに、ターミナルからコマンドを打ち込むので、基本操作を知っていると進めやすい。

    Node.jsはどうやって学ぶの?

    私はProgateのレッスンで学び始めました。

    Progateでは、スライドでレクチャーを読む→実際プログラムを書きながらNode.js使い方を学べます。

    Progateのレッスン内容
    • Node.jsとExpress (node.jsを使いやすくするためのパッケージ)でページを表示する方法
    • データベースの内容をページに表示する
    • リストアプリを作りつつ、データベースを操作する

    全部で3レッスンあるのですが、各レッスン2時間ずつ計6時間で学習できました。

    レッスンを学びつつ、Node.jsやExpressの使い方はなんとなく分かったのですが、自分のMacに導入する方法は紹介されておらず…。(他の言語のレッスンは説明があったのに?)

    そんなわけで調べながらやってみました。

    5分でできるNode.jsのインストール

    動作環境はMacで進めております。

    Node.js公式サイト から、ダウンロードしてインストールすることで、導入できます。

    $node -v

    と入力して、バージョンが表示されればOK

    あわせて、npm(Node Package Manager)も使えるようになっています。npmには、Nodeを効率的にプログラムを書くためのパッケージが入っています。

    $npm -v

    こちらもバージョンがでればOK。

    【参考記事】
    MacにNode.jsとnpmをインストールする方法【初心者向け】 | Public Constructor

    はじめてのNode.jsプログラム〜Hello Worldを表示させる

    環境構築がすんだら、次に知りたいのは、「実際にプログラムを作って動かすには、具体的には何をしたらいの?」ってことですよね。

    1. Node.jsプロジェクトの新規作成

    ここからは、ターミナルを開いて、コマンドを入力していきます。

    まずは、プロジェクト用のフォルダを作成します。(今回は名前をsample_appとしました)

    $mkdir sample_app

    プロジェクト用フォルダ(sample_app)に移動します。

    $cd sample_app

    プロジェクト用フォルダで以下のnpm int(初期化)を実行します。

    $npm init

    アプリケーションの名前やバージョン、説明などを、色々聞かれますが、基本的にはEnterだけを入力すればOK。

    entry point : (index.js)のところは、「app.js」にしました。
    初期ファイルがapp.jsになります。

    このコマンドを実行すると、package.jsonができています。package.jsonは、プロジェクト構成を管理するためのファイルです。

    2.Expressをインストールする

    Expressは、Node.jsを効率的に使うためのコードが入ったライブラリ。

    $npm install express --save

    –saveとオプション記載することで、package.jsonにExpressのインストールを記載できます。

    3. Hello Worldを表示させるプログラムを書く

    新規ファイルを作成し、app.jsを作成します。

    app.jsには以下のプログラムを書きます。

    【参考記事】
    Express の「Hello World」の例

    4. nodeでプログラムを実行

    ターミナルから以下コマンドを入力します。

    
    $node app.js

    これで、サーバーが開始されます。

    サーバーを終了するときはターミナルで [control + C]で終了します。

    5. ブラウザで Hello Worldの表示確認

    http://localhost:3000/にアクセスします。
    画面に「Hello World!」と表示されてればバッチリ☺️

    Hello World

    Node.jsの基本まとめ

    ひとまず、Hello Worldができたので、ここから好きにプログラムを改変していきましょう。

    • Node.jsはJavaScriptの進化系。ブラウザ上の操作だけでなく、アプリも作れたりする。
    • npm(Node Package Manager)にはNode.jsを効率に使うための小道具が入っている。その一つがExpress。
    • Node.jsは公式サイトからインストールできる

    Progateで学んでいる方はフォルダに、レッスンで使ったコードを配置すると、ローカルでも動かせるようになります^^

    プログラミング
    Node.js
    よかったらシェアしてね!
    中谷恵美
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    趣味は、文房具、ゲーム(RPGとモンハン)、手芸(刺繍、洋裁)。最近は作曲やアレンジも勉強中。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にピラティスを始めたが、果たして続くのか。
    詳しいプロフィールを見る
    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・美容サロン・弁護士・デザイナー・心理カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

    新着記事
    • これで解決!WordPressの読み込み速度を速くする方法
      2025-06-30
      はじめてのWordPress
    • ホームページに最適な画像サイズと形式の選び方
      2025-06-23
      自分で作れるおしゃれデザイン
    • 【無料相談へのご感想】親身になって解決してくれた事が本当に嬉しい
      2025-06-16
      単発レッスン
    • 8年使って思うWordPressの好きなところ、微妙なところ
      2025-06-09
      はじめてのWordPress
    • 公開中のページを安全に更新するには
      2025-06-06
      はじめてのWordPress
    人気記事
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      プログラミング
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    • 自分でできる。アメブロのおしゃれなカスタマイズまとめ
      2022-11-04
      アメブロカスタマイズ
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      プログラミング
    目次