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

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

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

You are here: Home / Archives for Proglus

Proglus

MySQLをXAMPPを使ってWindows環境にインストールする方法

By

Windows環境にXAMPP（ザンプ）を使って、MySQL（正確には、基本的な部分で互換性があるMariaDB）をインストールする方法について説明します。
MySQL Workbenchのインストール方法と、設定についても説明します。

仕様変更が発生しやすい傾向があるため、あえてテキスト教材にしています。

注意事項

①： 公式のWindows版 MySQLサーバー インストーラーでは、原因不明のトラブルが多発することを確認しているため、本コースでは利用しません。

②：他の先生等の講義等でMySQLサーバーをインストールしている場合アンインストールを推奨

すでにインストール済みのMySQLサーバーは、削除することを推奨します。同居させた場合には、不具合の報告があるためです。

アンインストール方法については、どのような手順でインストールしているかによって異なるため、指導を受けた先生にご確認をいただくようにお願いいたします。

あくまで参考情報となりますが、一般的なMySQLサーバーのアンインストール手順について、サポート記事を用意しています。
MySQL 5.7 for Windowsのアンインストール方法

前置き

  • この記事は、この記事は、オンライン講座「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」と、Prolgus「SQL入門」コースのサポート記事です。
  • MySQLと互換性がある、MariaDB（マリアディービー）がインストールされます。
  • Windows10を利用しています。Windows8では、UIが一部ことなる場合があります。
  • 企業から貸与されたパソコンを使用する場合、セキュリティソフトや、ソフトウェアイントール制御ソフトがインストールされている場合があります。この場合、XAMPP等の開発系のツールがインストールできない場合があります。手順を工夫して回避することは現実的ではありません。お手数ですが勤務先のシステム管理者にご相談ください。
  • MySQLやMySQL Workbenchは 一般大衆向けのソフトウェアでは無いため、扱いが難しいと感じる部分もあるかもしれません。言い換えると、誰でも使いこなせるわけではないため、スキルとして市場価値が生まれます。

XAMPP（ザンプ）とは

  • MySQL(MariaDB)を含む、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたものです。
  • apachefriends.orgから提供されています。
  • Windows環境にウェブアプリケーションの開発ツールをインストールするのは、何かと手間が掛かるのですが、その労力を削減できます。
  • 学習用途に使われることが多いです。
  • 10年以上の長い歴史があります。

XAMPPのインストール

XAMPPトップページ

XAMPPのトップページを開きます。
XAMPP

ダウンロード > 「Windows向け XAMPP」ボタンをクリックします。

追記：32bit版Windowsをご利用の方へ。

最新版のXAMPPでは32bit版Windowsのサポートを行っていないようです。

本講座では、XAMPPをMySQLサーバーとして使用するのみで、XAMPPのバージョンの違いによって講座が続けられない、といった可能性は低いです。

また以下の7.2.12版のXAMPPに関しては32bit版のインストーラーで動作確認が取れているため、こちらをダウンロードしてお使いいただくようお願いいたします。

https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/7.2.12/

もし講座を続ける上で何かエラーなどが生じた際はUdemyやProglus内の会員向けQ＆Aコーナーにてご連絡ください。

インストールファイルがダウンロードされる


ブラウザの設定を変更していなければ、「ダウンロード」フォルダに、ダウンロードされます。
ネットワークの状況等などの要因により、ダウンロード完了までに1時間弱程度かかる場合もあります。
ダウンロードに失敗する場合は、時間を開けて、再度試します。

XAMPPのインストーラーの起動

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

ユーザーアカウント制御ダイアログ

Windowsの設定によっては、ユーザーアカウント制御ダイアログが出ます。
「はい」をクリックしてインストールを進めます。

ユーザーアカウント制御（UAC）に関する警告ダイアログ

XAMPPは、UACの影響を受けるたため、C:¥Program Files (x86)にインストールしないでください。又は、UACを無効にしてくださいというような意味です。
UACをOFFにするのは、あまり好ましくないため、Cドライブ直下などにインストールします（後述）

OKボタンを押します。

セットアップダイアログが起動

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

インストールコンポーネントの選択

使わないコンポーネントのチェックは外しておくのがおすすめです。
ここでは、下記を選択します。

  • MySQL
  • phpMyAdmin

それ以外はチェックを解除します。

ただし、チェックを解除できない項目については、そのままでOKです。

尚、現在phpMyAdmin（MySQL の管理ツール）はカリキュラムでは使いませんが、トラブルシューティングに使う場合があるため、チェックを入れておきます。

選択ができたら、Nextボタンをクリックします。

インストールフォルダを選択します。


特別な事情がなければ、デフォルト設定のC:¥xampp にインストールします。
Nextボタンをクリックします。

言語設定

日本語の選択肢が無いため、”English”を選択して”Next”ボタンクリック

Bitnami for XAMPP

このMySQLの学習には直接関係しないため、チェックを外します（任意）。
Nextボタンをクリックします。

インストールを開始

Nextボタンをクリックすると、インストールが開始されます。

補足： XAMPPインストール時に、antivirus（ウィルス対策ソフト）関連の警告がでる。

「YES」を 押してインストールを行い、様子をみてください。
例えば、Windows10 ＋ マカフィー の環境で、ダイアログが表示される報告があります。
インストールがうまく行かない場合は、一時的にウィルス対策ソフトを停止させて、インストールを実施する必要がでてきます。

インストール中

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

インストール完了

ネットワークの設定（表示される場合のみ）

標準でインストールされる、Apache(Webサーバ)について、通信が行えるように、Windows Defender ファイアウォールの設定を行います。
プライベートネットワークを選択して、アクセスを許可する をクリックします。

インストール完了

このあと、XAMPPのコントロールパネルを起動するか聞かれているので、チェックを入れて、
Finishボタンを押します。

言語設定（表示される場合のみ）

使用言語を聞かれるので、英語（アメリカ国旗）を選択して、Nextボタンをクリックします。

コントロールパネルが表示される

コントロールパネルが表示されました。
MySQLの設定を行うために、Configボタンをクリックします。


設定ファイルである、my.iniを選択します。

my.ini設定

メモ帳が開くので、下の方へスクロールして UTF 8 Settingsの、collation_serverと、character_set_serverについて編集します。
補足：見つからない場合は、メモ帳の検索機能で”collation_server”で探します。

#collation_server=utf8_unicode_ci
#character_set_server=utf8

↓下記のように変更(行コメントを意味する”#”を削除して設定を有効にする）

collation_server=utf8_general_ci
character_set_server=utf8

日本語を使うための設定です。
変更したら、ファイルを保存して、メモ帳を終了します。

MySQLを起動

Startボタンを押して、MySQLを起動します。

MySQLの通信を許可（表示される場合）

MySQLの起動完了

画像のように、MySQLのタイトルがグリーンになっていれば、MySQLが起動して使える状態です。
PID(s)の値は、環境により異なります。
補足として、MySQLを停止したい場合は、Stopボタンをクリックします。

補足1： XAMPPの起動時にエラーが出る場合。

xampp-control.iniへのアクセスが拒否されましたと表示される場合がありますが、学習には問題ない場合がありますので、OKボタンを押して進めてください。

Ecxeption EacccessViolationが発生して、XAMPPが起動できない場合、または、挙動がおかしい状態で起動した場合は、

一旦、XAMPPを終了してから、
XAMPPを、「管理者権限で実行」 を試してください。
XAMPPを起動するときに、XAMPPを 右クリック > 管理者として実行

「管理者権限で実行」 すると、ServiceにXマークが表示される場合がありますが、これはエラーの表示ではないため、学習には関係がありません。無視してください。

MySQL　Workbench インストール

MySQL　Workbenchのインストールがまだの方は、インストールを行います。
MySQL　Workbenchは、GUI(グラフィカルインターフェイス)を使って、SQLの実行などが出来るソフトウェアです。

下準備

MySQL Workbenchを起動するには、下記をインストールする必要があります。

  • Microsoft .NET Framework 4.5
  • Microsoft Visual C++ Redistributable for Visual Studio 2022

Microsoft .NET Framework 4.5 のインストール

Microsoft .NET Framework 4.5 ページ から ファイルをダウンロード

インストーラーの指示に従ってインストールを行います

すでに、インストール済みの方は、このように表示されます。もしインストール済み表示がされない場合は、続行をしてインストールを行ってください。

Microsoft Visual C++ Redistributable for Visual Studio 2022 のダウンロード

補足: 日本語表示の場合は、翻訳にもよりますが「Visual Studio 2022 の Microsoft Visual C++ 再頒布可能パッケージ」のように表示されているはずです。

こちらのサイト「Microsoft Visual C++ Redistributable for Visual Studio 2022」へ遷移して、ファイルをダウンロード。


x64・・・ 64bit環境の方
x86・・・ 32bit環境の方

補足： 32bit, 64bitの調べ方

お使いの環境が、32bit, 64bitわからない場合は、マイクロソフトのサイトやPC販売元のサイトなどを参照してください。
Windows7, 8の方「自分のパソコンが 32 ビット版か 64 ビット版かを確認したい」

Windows10の方「インストールされているWindows 10が32ビットか64ビットか確認する方法」

開く

インストール

MySQL　Workbench ダウンロードページ

MySQL Workbenchをダウンロードします。

開く「MySQL Workbench」


重要：コースで動作確認済みのバージョン(MySQL Workbench 8.0.29)を利用します。
最新バージョンなど、コース指定以外のバージョンでは、トラブルが発生して学習が始められません。

補足： MySQL Workbenchの特定のバージョン(8.0.29)のダウンロードする方法

Archivesタブをクリック

8.0.29を選択してダウンロード

MySQL Workbenchのインストーラーを起動

ダウンロードしたMySQL Workbenchのインストーラーをダブルクリックで起動します。

ウィザードの流れにそってインストールを進める

MySQL Workbenchが起動

MySQL Workbenchが起動しました。

DBへの接続設定

プラスアイコンをクリック

接続設定 と テスト接続


図のように設定して、TestConnectionボタンをクリックします。


Conection Warningが出ます。
XAMPPでインストールされるMySQLは、MySQLと互換があるとされるMariaDBとう製品がインストールされます。
そのため、警告がでます。
基本的には、基礎的な部分の使用であれば、MySQLと同様に利用できますので、警告は無視します。
Continue Anywayボタンをクリックします。

テスト接続成功

このように表示されれば、MySQLへのテスト接続は成功です。
OKボタンを押します。

MySQLへ接続

OKボタンをクリックして、接続します。

警告は無視して、Continue Anywayボタンをクリックします。


このような画面が表示されればOKです。

再接続するには

設定したアイコンをクリックします。

トラブルシューティング

学習を進める中でエラーが発生した場合には、下記記事を参照してください。
10,000人超える指導経験から、トラブルシューティングは概ねパターン化されています。

MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法

おわりに

UdemyでSQL入門講座を公開中

世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）にて、SQL初心者向けのオンライン講座を公開中です。

ベストセラーコースにも選ばれたことがある人気のコースです。
ぜひ、ご利用ください。

「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」

エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ。データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。MySQL使用。

Bestseller はじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コースはじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース中村 祐太 Yuta Nakamura, Proglus （プログラス）MySQL 使用。エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ！データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。 4.4 (6986 ratings)144 lectures, 7 hours

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

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

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

今すぐ詳細を確認する

最低限そろえるべきプログラミング学習に必要な３つの要素

By

先日、ある方から「プログラミング学習には何が必要ですか？ 」という、ご質問をいただきましたので説明します。ぜひ皆さんの学習環境の整備にも活用してください！

動画で学習する

チャンネル登録もお願いします！

パソコンとインターネット環境

パソコンとインターネット環境があれば、どこでもプログラミング学習ができます。ファミレスやカフェ。ネットがつながれば動画で学習を進められます。

パソコンは、macOSでもWindowsでもOK。
ただし、ウェブサービスを作りたい方で、これからパソコンを買うのであれば、macOSがおすすめです。開発環境の構築がしやすく、開発者のmacOS利用者も多いからです。

たまにスマホやタブレットPCでプログラミング学習ができますか？という質問をされますが、一般的な学習環境とは言えないため、おすすめしていません。（スマホやタブレットPCでプログラミング学習することは、不可能ではありませんが、自分で問題解決できる方に限ります。）

 

十分な学習時間

プログラミング学習では、週に15時間以上確保することをおすすめしています（学習レベルにより個人差があります）。1日あたりにすると約2時間です。

しかし、プログラミング学習は手段であって、あなたの目標を達成することが最終目標です。生活する上でどうしても必要な時間以外は、プログラミング学習の時間にあてることでより早く目標が達成できます。

IT企業に就職すれば、給料を得ながら学習・スキルアップができます。学習だけのフェーズは、少しでも早く卒業したほうが良いでしょう。

 

プログラミング学習の明確な目的

プログラミングが流行っているからなんとなく学習している、学習すること自体が目的になっている。そんな方は、挫折します。

しっかりと目的を持ってプログラミングを学習しましょう。例えば、IT企業に就職して年収をアップしたい、手に職を付けたいなど。もっと便利なwebサービスを自分で作って公開したいというものもあります。

プログラミング学習はあくまで手段。プログラミングを学んだ先にある目的をしっかりと設定して学習しましょう。

 

まとめ

プログラミング学習に必要なものは、
１．パソコンとインターネット環境
２．十分な学習時間
３．プログラミング学習の明確な目的
です。

プログラミング学習の教材を探している方は、動画の説明欄に私の講座のURLを掲載していますので、ぜひご利用ください。

チャンネル登録もぜひよろしくお願いします。

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

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

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

今すぐ詳細を確認する

プログラミング学習が続かない理由

By

プログラミング学習が続かない理由について、プログラミングをこれから始める方、始めたばかりの方に向けて解説します。

動画で学習する

最大の問題点は、プログラミング学習は独学が当然という考え

SNSやネットの情報で、プログラミングは独学で学ぶもの、という考えを信じてしまい、独学で学び挫折してしまった方が多くいます。なかには独学で学習して転職するという目的を達成する方もいますが、たいへん努力家の方だと思います。

新しいスキルを学ぶ時は、先生やコーチなど適切な指導者に教わりませんでしたか？
算数や国語なら小学校の先生、入試なら塾の講師、スポーツならクラブのコーチ、ピアノなら音楽教室の先生、ダイエットならトレーナー、仕事のやり方なら職場の先輩など、誰かに教わって新しいことを学んできたと思います。

プログラミング学習になると、独学するものという固定概念がある人も多いです。その結果、モチベーションが続かずに途中で諦めてしまう方が多くいます。
プログラミング学習は独学で入門できると言う人もいます。それも正しい意見です。

私も、世界最大級のオンライン学習プラットフォームUdemy や、自社サービスのプログラミングのオンライン学習サイトProglus で、独学で学べる教材を提供しています。

しかし、適切な指導者が付いた場合にくらべて、独学でプログラミングを学ぶことは遠回りなのは間違いありません。これは、独学用のオンライン教材による指導と、個別指導の両方の経験を経て実感したことです。

私も、はじめてのプログラミング学習は、学校の先生から教わりました。
自分の経験も踏まえると、良い教材が提供されていても、独学だけでプログラミングを学び転職される方は、本当にすごいです。

プログラミングを独学で学んだ先輩のなかには、指導者に教わって短時間で成果を出し目的を達成する後輩を快く思わない方がいます。そういう先輩からアドバイスを受ける場合は、100% 真に受けないように注意してください。

人それぞれ考え方があります。プログラミング学習はあくまで「手段」です。
プログラミング学習の「目的」は、転職して収入をアップさせたり、収入を安定させたりすることです。指導者に教わったほうが、独学するよりも効率的なため早く成果が出ます。
また、入門のフェーズを適切な指導者と一緒に乗り越えられれば、その後あとは独学もしやすいです。

モチベーション維持のために相談、質問できる人が絶対に必要

プログラミング学習に限った話ではないのですが、困ったときに聞ける先生や仲間がいないと苦労します。

プログラミングを学習する環境として一番の理想は、IT企業に就職することです。給料を得ながら教わることができ、スキルアップできるからです。

私も、サラリーマン時代に先輩からたくさん教わりました。先輩も自分の後輩が成果を出せば効率的にプロジェクトが進むので、親身に教えてくれる人が多いです。また、後輩に教える方の仕事も沢山しました。

IT企業に就職するためには、採用試験に合格しなくてはなりません。新卒採用でIT企業に就職する場合は、やる気があります！だけで、入社できる可能性が高いです。しかし、中途採用では、ある程度実力を示さないと採用されません。

そのため、ポートフォリオを作ることをおすすめします。ダミーでも良いので、Webサービスを作って、採用担当者にアピールします。私は、エンジニアの採用経験があるので、ポートフォリオがある方と無い方を比較すると、ポートフォリオがある方の方に、合格出しやすいです。

就職のためにプログラミングを学習されている方は、アドバイザーを見つけましょう。結果が出るのが早いのでおすすめです。知人・友人・親族で探し、近くに居ない場合は、お金を払ってでも経験者にアドバイスを受けると結果が出るのが早いです。

体系化されていないプログラミング学習は続かない

プログラミングの教材はたくさんあるため、目についたものを端から取り組んでいると、いくら時間があってもたりません。

たくさんある中から必要な項目を体系的に選び、短期間に集中して学習することをおすすめします。何を学習したらよいかは、実務経験者に聞くのが適切です。
実務経験者が周りに居ない方は、自分が将来創りたいwebサービスをイメージして、それを作るためには、なにを学習したらよいか逆算して学習内容を決めるという方法が最適です。

失敗しないプログラミング学習には明確な目的がある

なんとなくプログラミングを学習してみようかな、では学習は続きません。
例えば、将来何に役立つのかわからないのに、高校や大学で微分積分、合戦が起こった西暦を学習することに苦労した経験はないでしょうか。

私は、IT企業に就職して経験を積み、将来は自社サービスを作って起業したい、という目的でプログラミングを勉強しました。

目的は人それぞれ違ってあたりまえです。例えば、

・給与を上げたい、安定したい。
・今の職業の労働条件が悪いので転職したい。
・今の職業の将来性が不安なので転職したい。
・自分で創りたいものがある。
・将来起業したい。

という方は、多いです。

自分の目的を明確にすることで、プログラミング学習を効率的に学びましょう。

まとめ

プログラミング学習が続かない理由として、目的が明確ではないもしくはあやふやなために、モチベーションの継続が難しいことがあげられます。様々な言語があるため、ただなんとなく学びたいという意識では挫折して当たり前です。

なんのために学習するのか、あなたの目的を忘れないようにしてください。

学習しながら壁にぶつかったときは、気軽に相談できる人がいれば、さらにプログラミング学習を効率的に進めることができます。現時点で回りにいない場合は、お金を払ってでも見つけてみましょう。目的を達成するためには、投資も必要です。

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

オンライン学習サービス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週間無料体験しよう

今すぐ詳細を確認する