プログラミング入門ナビ

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

You are here: Home / 2019 / Archives for 5月 2019

Archives for 5月 2019

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

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

今すぐ詳細を確認する

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

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

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

今すぐ詳細を確認する

オブジェクトの繰り返し描画 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のコードはこのような感じです。

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

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

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

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

    • {{ value }}

 

 

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

Taro
Yamada
28

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

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

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

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

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

  • {{ key}} : {{ value }}

 

とします。

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

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

ちなみに、この変数名は、任意につけられるので、

  • {{ k }} : {{ v }}

 

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

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開発のフロントエンド開発の課題を解決。¥2,400¥1,900 4.4 (2944 ratings)115 lectures, 5 hours

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

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

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

今すぐ詳細を確認する