プログラミング入門ナビ by Proglus（プログラス）

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

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for 2019

Archives for 2019

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

基本的には、LTSの最新バージョンをインストールすることを推奨します。

しかしながら、バージョンによって動作が変わるケースが無いとは言えないので、
ここでは、node.js10.16.0、npm 6.9.0をインストールしていることを、共有しておきます。

バージョンによる問題が発生した場合は、説明に使ったバージョンを使うことが学習を進める上で有効な場合があります。

参照: 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（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

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, <a> to toggle all, <i> to
inverse selection)
❯◯ Progressive Web App (PWA) Support
◯ Linter / Formatter
◯ Prettier
◯ Axios</i></a>

ここでは使いませんので、選択しないで、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（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

インストーラー版のNode.jsとyarnをWindowsにインストールする方法

By

Node.jsとnpm、パッケージ管理ソフトyarnを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.jsのバージョンを指定してダウンロードする方法

学習を進める上でNode.jsのバージョンに依存する問題が発生する事も予想されます。
その場合には、本コースで動作確認済みバージョンを指定してダウンロードをお試し下さい。

(例) v18.15.0をダウンロードする場合
(1)過去のリリースバージョンページを開く。これまでにリリースしたバージョンが一覧表示されています。

(2)ブラウザ検索(cntl + F キーで検索できます。)で「v18.15.0」と入力し、検索でヒットしたリンクをクリックする。

(3)お使いのパソコンに合わせて、ダウンロードします。
32bit版・・・node-v18.15.0-x86.msi
64bit版・・・node-v18.15.0-x64.msi

インストーラーの起動

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

Welcome to the Node.js Setup Wizard

Nextボタンをクリック。

ライセンスに同意

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

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

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

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

カスタムセットアップ

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

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

Tools for Native Modules

オプショナルな開発ツールをインストールするか聞かれているので、チェックはOFFのままで、Nextボタンをクリック。

インストールの開始

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

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

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

インストール実行中

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

インストール完了

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

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

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

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

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

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

node -v

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

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

npmのバージョンを表示

npm -v

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

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

yarnのインストール

nodeを公式インストーラーでインストールした時のyarnのインストール方法です。

インストーラーをダウンロード

yarnの公式サイトからインストーラーをダウンロードします。
公式サイト
「Windows」タブを選択して、「インストーラーをダウンロードする」をクリックして、ダウンロードしてください。

インストーラーを起動

ダウンロードしたファイルを開いて、インストーラーを起動します。
「Next」をクリック。

インストール実行

インストールを実行します。
「Install」をクリック。

インストール完了

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

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

yarnがインストールされているか確認します。
コマンドプロンプトを起動して、コマンドを実行します。
yarn -v

と入力してEnterキーを押下。
バージョン情報が表示されていればOKです。

おわりに

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

検証環境

Windows10

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

オブジェクトの繰り返し描画 v-for – Vue.js入門

By

この記事では、Vue.jsで、オブジェクトの繰り返しを v-forディレクティブで行う方法について学習します。

この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

実現したいこと。

オブジェクトから、値を取り出して、てリスト表示。

Taro
Yamada
28

オブジェクトのkeyとvalueを、リスト表示。

Taro : firstName
Yamada : lastName
28 : age

v-for 構文

＜要素名 v-for=”バリュー in オブジェクト”＞
{{ 表示したいバリュー }}
＜/要素名＞

または、

＜要素名 v-for=”(バリュー, キー) in オブジェクト”＞
{{ 表示したいキー or バリュー }}
＜/要素名＞

構文は、このようになっていますが、実際にプログラムを書いて習得していきましょう。

実装

空のテンプレートをマウントしてある、状態からはじめます。

まず、表示に使うユーザーオブジェクトを用意します。

オブジェクト何か、初心者向けにざっくり説明すると、
オブジェクトとは、様々な特性（言い換えると、プロパティ）をもったもの
です。

例えばの事例として、ユーザーオブジェクトを作成するJavaScriptのコードはこのような感じです。

<script>
  var user  = {
    firstName: 'Taro',
    lastName: 'Yamada',
    age: 28
  }
</script>

次に、dataオプションに、userという名前のobjectを用意します。
ファーストネーム、ラストネーム、年齢を定義します。

var app = new Vue({
  el: '#app',
  data: {
    user: {
      firstName: 'Taro',
      lastName: 'Yamada',
      age: 28
    }
  }
})

次に、template側でこのobjectを表示します。
まず、valueだけ表示してみます。

オブジェクトに格納されている値をリスト表示するために、v-for ディレクティブ使用しています。

<div id="app>
  <ol>
    <li v-for="user in users">{{ color }}</li>
  </ol>
</div>

このように、objecetのvalueが表示されました。

  1. Taro
  2. Yamada
  3. 28

v-for ディレクティブは value in objectといった形式で、形式で繰り返しを実行できます。
繰り返しのたびに、オブジェクトのvalueをとりだして、出力しています。

このvalue には、user objectの、valueが繰り返しのたびに、1個づつ入ります。
繰り返しが進むごとに、valueに入る値が代わります。

このオブジェクトの名前は、dataオプションの、user プロパティで定義したものとそろえます。

次に、valueだけではなくて、objectの、keyも一緒に表示してみましょう。

つぎの様に記述してください。

<div id="app>
  <ol>
    <li v-for="(user, key) in users">{{ key }}:{{ color }}</li>
  </ol>
</div>

とします。

オブジェクトから、価を一つづつとりだして、　keyと、valueを1つずつ、表示していきます。
注意ですが、第一引数が、valueで、第二引数がkeyなので、間違えないようにしてしてください。

これで、keyとvalueを画面に表示することができました。

ちなみに、この変数名は、任意につけられるので、
つぎの様に記述してください。

<div id="app>
  <ol>
    <li v-for="(user, key) in users">{{ k }}:{{ v }}</li>
  </ol>
</div>

としても、同じ結果が得られます。

userの部分は、データプロパティで、指定した名前と揃えてください。

Vue.jsのv-forについて動画で学習する

おわりに

このレクチャーでは、オブジェクトの繰り返しの描画 v-forディレクティブ、について学習しました。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.2 (3686 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する