• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング初心者のための情報メディア

You are here: Home / Archives for JavaScript

JavaScript

Node.jsをmacOSへインストールする方法

2019-07-26 By プログラミング入門ナビ編集部

node.js(ノードジェイエス)をmacOSにインストールする方法について学習します。

手順

  • node.js のインストール状況を確認
  • Homebrew のインストール
  • nodebrewのインストール
  • インストール出来るnode.jsのバージョンを指定
  • node.jsをインストール
  • 特定のnode.jsのバージョンを利用する

node.jsのインストール確認

まず、お使いのmacにnodejsがインストールされているか、どうかを確認します。
ターミナル上で、下記コマンドを入力して実行(Enterキー謳歌)します。

1
$ node -v

バージョンが表示される場合は、インストール済みですので、
インストール作業は必要ありません。

バージョンが表示されずに。

1
2
$node -v
-bash: node: command not found

と表示される場合は、node.jsのインストールが必要ですので、次の手順へ進んでください。

node.jsのインストール

node.jsをインストールするには、
HomebrewというmacOS用のパッケージマネージャを利用します。

Homebrewとは

Homebrewでは、macOSで利用できる開発ツールのインストールを管理できます。

Homebrewがインストールされているか確認

まず、Homebrewがインストールされているか、確認します。

1
2
$ brew -v
Homebrew 2.0.2

バージョンが表示される方は、インストール済みですので、インストール作業は必要ありません。

インストールがされていない方は、

Homebrew公式サイトを参照します。

公式サイト記述があるインストール用のスクリプトをコピーしてターミナルに、貼り付け。実行します。

補足: macに、Command Line Tools がインストールされていない場合は、インストールの途中で

1
2
3
==> The Xcode Command Line Tools will be installed.
 
Press RETURN to continue or any other key to abort

のように、表示されます。
returnキー(Enterキー)を押します。

インストールのために、macのログインパスワードを求められるますので、パスワードを入力してEnterキーを押します。

homebrewのインストールを確認

homebrewのインストールが完了したら、次のコマンドを実行してください。

1
$ brew -v

↓ インストールが成功していると、バージョンが表示されます。

1
2
Homebrew 2.1.8
Homebrew/homebrew-core (git revision 0cf5; last commit 2019-07-26)

バージョンは学習のタイミングにより異なります。
Homebrewについて、コースで説明していない詳細まで知りたい方は、公式ドキュメントを参照してください。

nodebrewのインストール

続いて、
nodebrewをインストールします。

nodebrewは、node.jsのバージョンを管理するためのツールです。
プロジェクト毎に、node.jsのバージョンを変える必要がある時に、対処しやすくなるメリットがあります。

インストール実行

Homebrewを使用してnodebrewをインストールします。

1
$ brew install nodebrew

バージョンを確認

インストールが終わったら下記コマンドを実行してバージョンを確認します。

1
$ nodebrew -v

↓ バージョンが表示される

1
2
nodebrew 1.0.0
・・・略・・・

nodebrewでインストールできるnode.jsバージョンの確認

1
$ nodebrew ls-remote

ここ記事では、10.x系の最新バージョンをインストールします。

補足: node.jsのバージョンについては、指定がある場合を除き、LTS(Long Term Support・長期サポートバージョン)の最新バージョンをインストールすることを推奨します。
参照: Node.js公式サイト

node.jsをバージョンを指定してインストール

下記コマンドで インストールを行います。
v〜 の部分には、インストールしたいバージョンを指定します。

1
$ nodebrew install-binary v10.16.0

補足: エラー発生時の対処

1
2
3
4
5
6
7
Fetching: https://nodejs.org/dist/v10.16.0/node-v10.16.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/naka/.nodebrew/src/v10.16.0/node-v10.16.0-darwin-x64.tar.gz:
Warning: No such file or directory
0.0%
curl: (23) Failed writing body (0 != 1058)
download failed: https://nodejs.org/dist/v10.16.0/node-v10.16.0-darwin-x64.tar.gz

という感じでエラーになる場合は、手動でディレクトリを作成します。
下記コマンドを実行して、ディレクトリを作成。

1
$ mkdir -p ~/.nodebrew/src

再度インストールを行います。

1
$ nodebrew install-binary v10.16.0

インストールされたバージョン一覧

下記コマンドを実行

1
$ nodebrew ls

↓バージョンが表示される

1
2
v10.16.0
current: none

v10.16.0がインストールされましたが、
current: none・・・まだ有効になっているバージョンはない状態です。

使用するnode.jsのバージョンを指定、

1
$ nodebrew use v10.16.0

パスを通す

nodeが使えるようにパスを通します(bash利用)。

下記コマンドを実行

1
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

※ >> の部分はシステムの都合上、全角文字で表記しています。学習する際は、半角文字に置き換えて実行してください。

パスを通した設定を反映します。

1
$ source ~/.bash_profile

node.jsのバージョンを確認

下記コマンドを実行

1
$ node -v

↓バージョンが表示される

1
v10.16.0

node.jsのインストールが完了しました。

オンライン動画を使って学習する

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する

Filed Under: JavaScript Tagged With: JavaScript, node.js

Nuxt.jsの新規プロジェクトを作成する

2019-05-31 By プログラミング入門ナビ編集部

この記事ではWindowsをお使いの方が、Nuxt.jsの新規の空のプロジェクトを作成して、実行するところまでを学習します。

準備

npmのインストール

npmをインストールしていない方は、インストールを行う必要があります。

Windows版

Node.jsとnpmをWindowsにインストールする方法

macOS版

制作中

作業用のディレクトリの作成と移動

ここでは、一例として、ユーザーのホームディレクトリに、nuxt-projectsというディレクトリを作成して学習を行うことにします。

macOSの方は、ターミナル
Windowsの方はコマンドプロンプト、
を起動します。

ディレクトリの作成

1
mkdir nuxt-projects

と入力してエンターキーを押下。

作成したディレクトリに移動

1
cd nuxt-projects

と入力してエンターキーを押下。

参考:画面キャプチャ(Windows)

Nuxt.jsの雛形となるプロジェクトの作成

Nuxt.jsの雛形となるプロジェクトをすばやく作成できるツール「create-nuxt-app」が、Nuxt.jsチームによって用意されているので利用します。

1
npx create-nuxt-app hello

と入力してエンターキー

補足としては。
npxは、npmパッケージのダウンロードと実行を一度に行うツールのことです。
helloの部分はプロジェクト名です。任意の名前を設定します。

対話形式で、設定を行います。

プロジェクト名

1
? Project name (hello)

Project name、プロジェクト名を設定します。
括弧書きが、デフォルトで使われる名前です。
変更もできるのですが、
今回は、デフォルトの名前を使いたいので、エンターキーを押します。

プロジェクトの説明

1
? Project description (My scrumtrulescent Nuxt.js project)

プロジェクトディスクリプション、プロジェクトの説明を設定します。
変更もできますが、ここではデフォルトのまま使います。
エンターキーを押します。

サーバーサイドのフレームワークを選択

1
2
3
4
5
6
7
8
? Use a custom server framework (Use arrow keys)
❯ none
express
koa
adonis
hapi
feathers
micro

Nuxtアプリケーション内部で利用される、サーバーサイドのフレームワークを選択します.

ここでは使いませんので、noneを選択して、Enterキーを押します。

インストールする機能の選択

1
2
3
4
5
6
? Choose features to install (Press to select, <a> to toggle all, <i> to
inverse selection)
❯◯ Progressive Web App (PWA) Support
◯ Linter / Formatter
◯ Prettier
◯ Axios</i></a>

ここでは使いませんので、選択しないで、Enterキーを押します。

UIフレームワークの選択

1
2
3
4
5
6
7
8
9
? Use a custom UI framework (Use arrow keys)
❯ none
bootstrap
vuetify
bulma
tailwind
element-ui
buefy
   (Move up and down to reveal more choices)

使用するUI フレームワークを選択します。
例えば、知名度が高いものだと、bootstrapです。
ここでは使用しないので、noneを選択してEnterキーを押します。

テストフレームワークの選択

1
2
3
4
? Use a custom test framework (Use arrow keys)
❯ none
jest
ava

テストフレームワークを選択します。
ここでは使用しないので、noneを選択して
Enterキーを押します。

レンダリングモードの選択

1
2
3
? Choose rendering mode (Use arrow keys)
❯ Universal
Single Page App

レンダリングモードの選択。
Universalは、サーバ側でレンダリング。
Single Page Appはクライアント側でレンダリング。
という違いがあります。

ここでは、Universalを選択して、Enterキーを押します。

作者の名前の設定

1
? Author name (naka)

Author name、作者の名前を設定します。
入力するか、デフォルトを設定するためのそのままにして、エンターキーを押します。

パッケージ管理ソフトを選択

1
2
3
? Choose a package manager (Use arrow keys)
❯ npm
yarn

パッケージ管理ソフトを選択します。
ここでは、npm (Node Package Manager) を選択してエンターキーを押します。

ここまでの操作で、Nuxtjsの雛形のプロジェクトが作成されました。

参考:すべての設定が終わったろころの画面キャプチャ

※ キャプチャはWindowsですが、macOSでも同様。

プロジェクトの実行

それでは、ひな形のプロジェクトを実行してみましょう。

作成されたhelloフォルダ(作成したプロジェクト名と同名)に移動します。

1
cd hello

開発モードで制作したプロジェクトを実行します。

1
npm run dev

下記のような画面が表示されます。Listening onに続くURLをコピーしてGoogle ChromeのURL欄にペーストして、表示します。

下記のような、ダミーのホームページが表示されれば動作確認としてはOKです。

プロジェクトの実行を終了したい場合は、
ターミナル(macOS), コマンドプロンプト(Windows)にフォーカスをあって(ターミナルやコマンドプロンプトの領域をクリックして)、controlキー + Cキーを押します。

Windows環境で終了して良いか聞かれる場合(Y/N)?は、 Yを入力してEnterキーを押します。

おわりに

この記事では、Nuxt.jsの新規プロジェクトを作成する方法について学習しました。

オンライン動画を使って学習する

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する

Filed Under: JavaScript Tagged With: JavaScript, Nuxt.js, Proglus, Udemy, Vue.js, プログラミング入門

Node.jsをWindowsにインストールする方法

2019-05-30 By プログラミング入門ナビ編集部

Node.jsとnpmをWindowsにインストールする方法について学習します。

Node.jsとは?

Node.js(ノードジェイエス)というのは、ざっくり言ってしまうと、サーバ側で動作するプログラムをJavaScriptで書くために使う技術です。

npmとは?

npm(ネヌピーエム)というのは、Node Package Managerの略で、node.jsのモジュールを管理するツールです。

Rubyでいうところのgemとか、LinuxのCentOSでいうところのyum に相当するようなイメージです。

補足として、モジュールというのは、ざっくり言うと、Node.jsで使える便利なソフトウェアの塊のことです。

node.jsとnpmのインストール

Node.jsをインストールすると、一緒にnpmもインストールされます。
Windowsで使える、Node.jsのインストーラーをダウンロードして、インストールを行います。

node.jsのダウンロード

Node.jsの公式サイト(日本語)のダウンロードページをWebブラウザで開きます。
ダウンロード | Node.js

LTSと表示されているバージョンをダウンロードします。
お使いのパソコンに合わせて、32bit版か64bit版を選択してください。
Windows10で32bit版か64bit版かを確認したい

補足として、LTSはLong Term Support、日本語でいうと長期サポート版のことです。
ざっくりいうと、長い期間メンテナンスされることが計画されているバージョンのことです。

基本的には、LTSの最新バージョンをインストールすることを推奨します。
しかしながら、バージョンによって動作が変わるケースが無いとは言えないので、
ここでは、node.js10.16.0、npm 6.9.0をインストールしていることを、共有しておきます。バージョンによる問題が発生した場合は、説明に使ったバージョンを使うことが学習を進める上で有効な場合があります。

インストーラーの起動

ダウンロードしたインストラーをダブリクリックして開きます。

Welcome to the Node.js Setup Wizard

Nextボタンをクリック。

ライセンスに同意

ライセンスに同意したうえで、チェックを入れて、Nextボタンをクリック。

インストールフォルダの指定

デフォルトの設定のままでOKです。

Nextボタンをクリックします。

カスタムセットアップ

インストール内容をカスタマイズできますが、ここでは、デフォルトの設定のまま進めます。

Nextボタンをクリックします。

インストールの開始

これまで設定した内容に従って、インストールを行います。

Installボタンをクリックします。

環境によっては、ユーザーアカウント制御のダイアログが表示されるので、確認して「はい」ボタンをクリックします。

インストール実行中

しばらく時間が掛かります。

インストール完了

インストールが完了しました。

「Finish」ボタンをクリックして、インストーラーを終了します。

インストールされたことを確認

node.jsとnpmが正常にインストールされたことを確認してみましょう。
インストールされた、node.jsとnpmのバージョンを表示してみます。

コマンドプロンプトの起動

Node.jsのバージョンを表示

node -v

と入力してEnterキーを押下。

バージョンが表示されたらOKです。

npmのバージョンを表示

npm -v

と入力してEnterキーを押下。

バージョンが表示されたらOKです。

おわりに

この記事では、Windows環境にnode.jsとnpmをインストールする方法について学習しました。

検証環境

Windows10

オンライン動画を使って学習する

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

ベータ版として提供期間中のため、期間限定・人数限定にて通常は有料のコンテンツを特別に無料でお試し頂けます。

今すぐ詳細を確認する

Filed Under: JavaScript Tagged With: JavaScript, node.js, npm, Nuxt.js, Proglus, Udemy, Vue.js, 環境構築

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 10
  • Go to Next Page »

Primary Sidebar

Twitter

Follow @programmingnavi Tweets by programmingnavi

Facebookページ

プログラミング入門ナビ

メルマガに今すぐ登録!

ブログの更新情報やお得なクーポン情報などをお知らせします。

登録はこちらから。

人気の記事

  • MySQL 5.7 for Windowsのアンインストール方法
  • 無料のSSL証明書Let's Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • WindowsからSSHでサーバに接続する方法(RLogin利用)
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • MySQL:データベースのデータ型とは何か、主なデータ型の種類について説明します
  • MySQL5.7とMySQL Workbench8.0をWindows10にインストールする方法まとめ
  • MySQL8.0をmacOSにインストールする方法
  • MySQL8.0とMySQL Workbench8.0をWindows10にインストールする方法まとめ
  • MySQL Workbenchの便利なショートカットを覚えて作業効率アップ
  • AWS Cloud9のテキストエディタの設定について

最近の投稿

  • オンライン学習Udemy(ユーデミー)が、ブラックフライデーセールを開催!
  • macOS Catalinaでzipファイル解凍できない時の対応方法
  • AWSで2段階認証を設定する方法
  • MySQL8.0とMySQL Workbench8.0をWindows10にインストールする方法まとめ
  • Zoomを使ってビデオ会議に参加する方法

カテゴリー

  • AWS
  • CSS
  • Git
  • HTML
  • JavaScript
  • Linux
  • Python
  • Ruby
  • SQL
  • Udemy
  • その他
  • ニュース
  • プログラミング入門

タグクラウド

AWS AWS Cloud9 Bootstrap Certbot Cloud9 CodeWing CSS DB Git GitHub Heroku HTML JavaScript Let's Encrypt Linux macOS MySQL MySQL Workbench node.js Nuxt.js Proglus Python RDBMS Ruby Ruby on Rails SQL SSL証明書 Udemy Vue.js Web開発 Windows インストール インターネット エラー オンライン学習 サーバ サーバー セキュリティ セール データベース プログラミング入門 プログラミング学習 ユーデミー 用語解説 開発環境構築

アーカイブ

  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2019 · programmingnavi.com ・About・プライバシーポリシー