# 02 - ChromebookでVue

# Vue.jsのインストール

「Chromebookでエディタづくりに取りかかる前に、まずLinuxの機能を有効にしておこう」

「インストールが終わったらランチャーで『ターミナル』というのがあるので起動すると、禍々しい『あの黒い画面』が出る」
『忌まわしい『あの黒い画面』ですね…』
「『あの黒い画面』を避けては通れないので慣れましょう。インストールしたときはいくつかのソフトウェアが古いので更新しておく」

$ sudo apt update

「 $ をのぞいた文字を入力してEnterキーを押す。するとコマンドが実行される。この場合は sudo apt update を入力してEnter」
『わざわざ $ を入れる意味はあるんですか？』
「『あの黒い画面』で入力するコマンドだよ、という印」
『なるほど。闇の印なんですね』
「そう。忌むべき印」

『あれ？アルファベットが入力できないんですけど』
「入力が日本語になってない？」
『なってます。でも英語に切り替えができない』
「Chromebookだと『あの黒い画面』のなかで言語の切り替えはできないから、事前に英字入力にしておこう」
『そうなんですか、わかりました。うーん、いろいろ難しそうですね…。ええと、sudo...apt...update、で、Enter。…何かいろいろ文字が出てきました』
「おっけー。それじゃあ画面が落ち着いたら次のコマンドを入力しよう」

$ sudo apt upgrade

「 Do you want to continue? [Y/n] みたいな表示が出るので y を押す」
『けっこう更新に時間かかりますね…あ、終わりましたよ』

「それじゃあ次に nodejs をインストールしよう。一行ずつ順番に実行します」

$ sudo apt install curl software-properties-common
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -
$ sudo apt install -y nodejs

『うーん、こんなに文字入力するの大変じゃないですか？』
「タッチパッドで1行ずつコピペしてEnterを押してもいいよ」
『へえ。キーボードじゃなくてもいいんですね』
「そうそう。映画のハッカーみたいなタイピング能力がなくても大丈夫」

Programming in movies vs. programming in real life (via YouTube)

『終わりました！』
「おっけー。最後にVue.jsをインストールしよう」

$ sudo npm install -g @vue/cli

『なんかさっきと最初のコマンドが違いますね』
「よく気づいたね。実はここから新たな世界に突入するのです」
『新たな世界…』

# Vueを動かしてみる

「さっそくアプリを動かしてみよう」
『はい！』

$ vue create editor

『何か出ましたよ』

「そのままEnterでいいかな」
『はい…おお！』

『なんか動いてますよ。かわいい』
「君もね」
『はい？』
「なんでもない。時間がかかるからしばらく待とう」
『はい！』

数分後…。

『はー、はー、よ、ようやく、終わりましたっ』
「ふふ。おつかれさま。頭フル回転だったもんね」
『はい。さすがに…ところで、どうなりましたか…？』

「画面に $ マークがあるのがわかる？」
『はい。さっき見たやつですね。コマンドのしるし…ですか』
「そうそう。指示どおりにやってみよう」

$ cd editor
$ npm run serve

『画面が動かなくなりました』
「 "Compiled successfully" って書かれてるでしょ。だから成功したってこと。Chromeで http://localhost:8080 ってページを開いてみよう」
『はい。…ホームページが表示されました』

「これがさっきのコマンドで作られたページ」
『え？そうなんですか？』
「うん。試しに、『あの黒い画面』で終了させてみよう。 Ctrl + c を押してみて。Ctrl キーを押しながら c ね」
『押しました』
「それじゃあさっきのページをリロードしてみよう」

『消えちゃいました』
「ね。さっきのコマンドで作られたページだってわかったでしょ？」
『はい』
「これからこのファイルをいじってエディタにします」
『こ、ここから、ですか…？』
「そう。mavonEditorを動かすだけなら難しくない」
『そうなんですね』
「その先は私も知らない魔境」
『…そうなんですね』
「くじけそうになったら応援してね」
『もちろんですよ！』