プログラミング入門ナビ

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

You are here: Home / Archives for プログラミング入門ナビ編集部

プログラミング入門ナビ編集部

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

By

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

手順

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

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

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

$ node -v

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

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

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

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

node.jsのインストール

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

Homebrewとは

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

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

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

$ brew -v
Homebrew 2.0.2

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

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

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

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

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

==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort

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

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

homebrewのインストールを確認

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

$ brew -v

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

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をインストールします。

$ brew install nodebrew

バージョンを確認

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

$ nodebrew -v

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

nodebrew 1.0.0
・・・略・・・

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

$ nodebrew ls-remote

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

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

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

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

$ nodebrew install-binary v10.16.0

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

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

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

$ mkdir -p ~/.nodebrew/src

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

$ nodebrew install-binary v10.16.0

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

下記コマンドを実行

$ nodebrew ls

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

v10.16.0
current: none

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

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

$ nodebrew use v10.16.0

パスを通す

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

下記コマンドを実行

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

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

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

$ source ~/.bash_profile

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

下記コマンドを実行

$ node -v

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

v10.16.0

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

動画で学ぶプログラミング入門

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Font Awesomeのユーザー登録を行いCDNの読み込みコードを取得する方法

By

Webフォントとしてアイコンが使えるFont Awesome （フォントオーサム）ですが、無料プランでもユーザー登録が必須となったため、その手順について説明します。

概要

ユーザー登録を行い、Font Awesome を読み込むためのコード（CDN読み込み）を入手します。

Font Awesome 公式サイトを開く


https://fontawesome.com/

「Start Free」ボタンをクリックします。

Emailをアドレスを登録

メールアドレスを登録して、ボタンをクリックします。

メールアドレスの確認

Check Yror Emailと表示されます。

登録したメールアドレス宛に確認メールが送信されています。

Font Awesomeからのメールを開き、「Confirm my email address + set things up」ボタンをクリックして、メールアドレスの確認を完了させます。

パスワード登録

パスワードの登録を行います。

アンケート画面

アアンケートに回答する画面です。

回答の仕方が分からない場合は、

「No thanks. Let’s skip this step for now」ボタンをクリックして、入力をスキップすることもできます。

フォントオーサムを読み込むコードを控える

ユーザー毎に異なるコード（CDNの読み込み）が表示されますので、後で使えるように、コードを控えておきます。

おわりに

この記事では、Webフォンとしてアイコンが使えるFont Awesomeでユーザー登録を行い、CDNの読み込みコードを取得する方法について説明しました。

動画で学ぶプログラミング入門

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

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

By

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

準備

npmのインストール

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

Windows版

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

macOS版

制作中

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

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

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

ディレクトリの作成

mkdir nuxt-projects

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

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

cd nuxt-projects

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

参考：画面キャプチャ（Windows）

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

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

npx create-nuxt-app hello

と入力してエンターキー

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

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

プロジェクト名

? Project name (hello)

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

プロジェクトの説明

? Project description (My scrumtrulescent Nuxt.js project)

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

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

? Use a custom server framework (Use arrow keys)
❯ none
express
koa
adonis
hapi
feathers
micro

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

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

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

? Choose features to install (Press to select,  to toggle all,  to
inverse selection)
❯◯ Progressive Web App (PWA) Support
◯ Linter / Formatter
◯ Prettier
◯ Axios

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

UIフレームワークの選択

? 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キーを押します。

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

? Use a custom test framework (Use arrow keys)
❯ none
jest
ava

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

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

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

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

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

作者の名前の設定

? Author name (naka)

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

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

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

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

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

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

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

プロジェクトの実行

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

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

cd hello

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

npm run dev

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

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

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

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

おわりに

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

動画で学ぶプログラミング入門

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

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する