プログラムのお話

ロボットの為のVue.js Vue.jsの環境構築

まずはVue.jsの環境構築

今回は、Vue.jsの環境を構築していきます。自分もプログラミングの勉強を初めたての頃は環境構築で凄い手こずってました。環境構築は自分がした作業は細かくメモすることがオススメです!!。

メモすることで後で見直せますし、頭の整理にもなります。

現在のPCの環境を壊したくないので、VirtualBoxに仮想マシンを作って作業をしていきます。

一応、自分の環境を書いておきます。

名称バージョン
windows 10 Home1803
VirtualBox6.0
lubntulubuntu-16.04.3-desktop-amd64
Vue CLI

lubuntuをダウンロードする

lubuntuをインストールしていきます。

最新版で長期サポート(LTS)があるバージョン18.**の方がいいのですが、使い慣れている16.04の長期サポート(LTS)があるバージョンをダウンロードします。

ダウンロードの流れは下のようになります。(2019年3月現在)

仮想マシンの作成と設定

注)あらかじめVirtualBoxがインストールされているとします。

まず、仮想マシンを作成する。

  • VirtualBoxを起動する
  • VirtualBoxのToolsを選択すると右上に新規(N)があるので、そこをクリックする
  • 「名前とオペレーティングシステム」を設定する
  • 「メモリーサイズ」を設定する
  • 「ハードディスク」を設定する
  • 「ハードディスクのファイルタイプ」を設定する
  • 「物理ハードディスクにあるストレージ」を設定する
  • 「ファイルの場所とサイズ」を設定する
名前とオペレーティングシステムName: 任意の名前
Machine Folder: 任意のファルダ
タイプ: Linux
バージョン: Debian(64-bit)
メモリーサイズ任意のサイズ
ハードディスク仮想をハードディスクを作成する
ハードディスクのファイルタイプVDI(VirtualBox Disk Image)
物理ハードディスクにあるストレージ可変サイズ
ファイルの場所とサイズ任意のサイズ

次に仮想マシンの設定をする。ダウンロードをしたlubuntuのイメージをストレージに設定する。

  • VirtualBoxの仮想マシン(先程作成した)を選択すると右上に設定(S)があるので、そこをクリックする
  • 「一般」「システム」「ディスプレイ」「ネットワーク」などの設定を自由に設定する
  • 「ストレージ」を選択して、コントローラー:IDEに先ほどダウンロードしたlubuntuのイメージを選択する

lubuntuのインストール

作成した仮想マシンを起動してlubuntuをインストールしていきます。

  • VirtualBoxの仮想マシン(先程作成した)を選択すると右上に起動(T)があるので、そこをクリックして仮想マシンを起動する
  • 言語選択画面が出るので、日本語を選択する。(秒数制限があるので早めに)
  • lubuntuをインストールを選択する
  • インストトールの設定をしていく(詳細は下の表)
  • 完了
ようこそ日本語
Lubuntuのインストール準備
Lubuntuのインストール中にアップデートをダウンロードする
インストールの種類ディスクを削除してLubuntuをインストール
ディスクに変更を書き込みますか?続ける
どこに住んでいますか?Tokyo
キーボードレイアウト日本語
あなたの情報を入力してくださいあなたの名前: 任意の名前
パスワード: 任意のパスワード

lubuntuの初期設定

lubuntuの初期設定を行っていきます。大体の設定はインストール前に設定しているので、今回はrootのパスワードと全画面表示が出来るように設定します。rootパスワードの設定は後で色々インストールする必要があるからです。

  • rootパスワードの設定
//任意のパスワードを設定する
$ sudo passwd root

  • 全画面表示の設定

上部メニューのデバイスの「guest Additions CDイメージの挿入…」を選択

システムツールのLxTerminalを起動して以下のコードを入力する。

//aptをアップグレードする
$ sudo apt upgrade apt

//ライブラリのインストール
$ sudo apt install gcc make perl -y
$ sudo apt install linux-headers-$(uname -r) build-essential dkms

//VBox_GAs_***がインストールされたファルダーに移動する
$ cd /media/{username}/VBox_GAs_***

//VBoxLinuxAdditions.runを実行する
//上記ライブラリはこの為に必要です。ない場合はエラーメッセージが表示されます
$ sudo ./VBoxLinuxAdditions.run

//再起動する
$ reboot

Vue.jsのインストール

やっとVue.jsをインストールしていきます。結構、このVue.jsのインストールが厄介です。大体の説明はソースコードの中に書いていきます。コードの意味はそこまで深く考えないでいいと思います。大体は公式のページを見本にしています。

//apt-getをアップグレードする
$ sudo apt-get upgrade

//gitからファイルをダウンロードしたいのでcurlをインストールします
$ apt install curl

//Node.jsとNPMのインストール
$ sudo au -
# curl -sL https://deb.nodesource.com/setup_11.x | bash -
# exit
$ sudo apt-get install -y nodejs
$ nodejs --version
$ npm --version

//Vue CLIのインストール
$ sudo npm install -g @vue/cli
$ vue --version

Visual Studio Codeのインストール

Vue.jsでも何でもプログラミングするにはテキストエディタが必要です。(正確にはあったほうがいい)

今回のVue.jsの開発環境はVisual Studio Codeを使用します。何より、デザインがオシャレだからです。Vue.jsの開発を便利にする拡張機能があるのもポイント高いです。以下のページでインストールします。

  • https://code.visualstudio.com/download
  • .dev 64bit版をダウンロードする。
  • プログラムで開くではなく、ファイルを保存するを選択しましょう
  • ダウンロードしたフォルダまでパッケージインストーラーでVisualStudioCodeをインストールします
  • 完了

環境構築を終えて

今回は、環境構築なのであまり面白みがないです。環境構築は正直、コードを書くより難しいと思います。こういうNode.jsやVueなどは英語圏の人が作ってるので、英語が出来るとかなりいいです。(筆者はできない…)

私の考えなのですが、環境構築はある程度動けばいいと思っています。

「このコマンドは何の意味があるんだ?」 

「でも動く……..」

こんな感じでいいんです。環境構築は目的ではなく過程なのである程度の寛容さが必要だと思います。(実務では色々検証を行ったほうがいいです)

次回は実際にVue.jsでプログラミングしていきます。