無題2

ざまのエンジニア勉強日記#17

ざま。

エンジニア採用をしている私が、
エンジニアと話ができるようになるために色々勉強する話。



これは仕事納めのタイミングで投稿したかったんだけど、別の業務に追われて書ききれなかったよ。笑
年末年始の休みに入って、全然時間が取れなくてもやもやするよ。ふん！


私、仕事納めの1週間前くらいに会社のPCを別のものに変えたんだよね。で、Cドライブのユーザーフォルダのユーザー名が前使ってた人のままだったから、変えたいなーって思ってアカウント名を変えてみたら、あら不思議。何もなかったかのように、そのまま居座っているじゃないか。

色々と調べた結果、どうやらアカウント名の変更だけじゃダメらしい。ということでAdministratorというアカウントから潜り込んで退席をしてもらいました。

画像1

無事私のフォルダになった。ありがとうQiita。ありがとうQiitaにやり方を書いてくれた人。さて、今日は何をしようかな。



画像2

Progate(ブラウザ版)はこんな感じ。前回Lv.42だったから、まあいい感じに進んでいる…と思いたい。しかし、ちょっと行き詰まりを感じているから、気分転換にドットインストールで何かつくってみようかな。




あ、そうだ。
この前、私の日記をみた社内のエンジニアの人に「Nuxtに戻ってきたら？」と言われたのを思い出した。とはいえ、やっぱりNuxtは早い気がするから、ひとまずVue.jsでも覗いてみる…？





ということで、
日本語版公式ガイド( https://jp.vuejs.org/v2/guide/ )を覗く。

公式ガイドは、HTML、CSS そして JavaScript の中レベルのフロントエンドの知識を前提にしています。​

うーん、そりゃそうよね。とりあえず、読み進めてみようか。


index.html を作成し 、以下のコードで Vue を導入することができます
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

なんかDLすれば使えるようになりそうだから、とりあえず開発バージョンをDLしてみよう。



画像3

え、なんかエラーになった。なになにー。なんでエラーなのか分からないけど、DL自体は出来てからやってみる。公式ガイドにDL開いてなんかしろとか言われてないし、なんかこのエラーは無視してもいい気がする(根拠はない)



画像4

DOMはこの前私がJavascriptでHelloWorldを出力した時にこれがどうって話をされたけど、まだよく理解できない。笑
…けど、この文章から推測するにVue.jsは宣言的にデータをDOMに描画することを可能にすることを基礎としたフレームワークってことなのかな？
つまり、documentなんちゃら系をブラウザに表示させるためのフレームワーク？(全然違う？笑)

このコードの最終的な出力がHello Vue!ってことはこれがVue.jsにおけるHelloWorldってことでいいのかなあ。





書いてみる。

画像5

あれ。Hello Vue!って出るはずなのに、HTMLに書いてある{{ message }}が出てきちゃった。ってことはscriptがどっかでうまく処理されてないな。。それともやっぱりさっきのエラーが原因か…？




画像6

いやまって、ここだ。笑　>が1つ多い。削除削除！






リトライ結果。

画像7

きたーーーー！！！
はじめましてVue！こんにちはVue！！

いや、まあ、今回は書いてあったやつそのままコピペってきただけだけど。
(途中で中途半端に手打ちもしたせいで変な場所でミスったのは内緒)
そして、DLした後開いた時のエラーが何だったのかもわからん。笑




まあ、出力できたしちょっとコードを見てみようか。
まずはHTMLに書いてあるのはこれ。

<div id="app">
    {{ message }}
</div>

こっちは、appっていうidがついたdivがあって、中身が{{ }}で囲んだmessageという文字だけ。これ普通にブラウザでみたら、私が最初失敗した{{message}}が出力されるね。



で、こっちが外部スクリプト。

var app = new Vue({ 
   el: '#app',
   data: {
       message: 'Hello Vue!'
   }
});

var…ってことは変数か。new Vue…次のVueにappという変数名を付けるよ～命令はそれ以降の内容だよ〜って感じ？(付けて{も付けるのか。Javascript始めてから常々感じるけど、プログラミング言語は括弧が多いな。

ちなみに、varを使う縛りがあるのかと思って、letとconstも試したけど、問題なく動いてた(…と思う。スクリプトのエラーは出てなかった)から、変数or定数とかは特に関係ないらしい。

一般的にはvarを使うのかな。それともJavascriptみたいにconstが使えるならconstにした方がいいのかな。


el…はなんだろう。elementって感じだけど、#appでHTMLのidと紐づけてる？ちょっといじってみたけど、とりあえずHTML内のidと変数名とelが一致してないとダメみたい。

date {message; 'Hello Vue!'}　これはなんか、{{message}}ってところは 'Hello Vue!'って出力してね。って感じ。Javascriptでやった感じだと、document.writeの動作と似てる。





と、いうわけで
Vue.jsでHello Worid(じゃなくてHello Vue!)の出力をしてみました。とりあえず何とかなった、っていう点だけで言うとNuxtよりはやさしい。笑
けど、Javascriptもまだまだよくわからない状態でVueやりだすと理解に苦しみそうだからもう少しJavascriptやろうかな。どうしようかな。




あ、そうだ。

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

HTML内に書いたこのURLはなんだったのか。見てみよう。



画像8

うお。なんだこれ。Vue.jsの中身？？ものすごい行数なんだけど…。
ちょっとこれを細かく見ていく気力は今ないからまた今度。

ちょうど31日に出せてよかった。また来年よろしくお願いします！！



良いお年を！！！



今日のポイント
・Vue.jsはNuxtよりやさしい
・HTML内の要素のidと変数名とelの#名の3点セットが一致していないと処理がされない
・この日記をなんとか続けて年を越せた

この記事が気に入ったらサポートをしてみませんか？