1ヶ月Java研修→vue.jsとTypescript

5月過ぎたのに最近寒いなぁと思っていたら、家の日当たりが悪すぎるだけだと気づいたこの頃。

5月2週目から本格的に動き出し、Javaの研修を1ヶ月受けた後配属された現場では、Vue.jsとTypescriptをフロントに、バックにはPythonを使う開発を行なっているようで、出鼻が挫かれる思いではあります…。

しかし念願のフロントを学べる機会なので前向きに勉強したいと思います！

JavaからVue.jsに変わって驚いたこと

とりあえず駆け出しなので、気づきの程度も初歩の初歩ではあるのですが、私が最初にJavaからVue.jsに変わって驚いたことを3つ紹介したいと思います。

1.HTMLやCSSのファイルが見当たらない

まず第一にJavaを使っていた時にはあったHTML(jsp)ファイルとCSSファイルをVue.jsの開発でも同じように探してみたら、全然見つからなかったことに困りました…。
なんでだ！と思って実際に公開しているサイトをchromeの開発者ツールを使ってコードを参照してみました。が、

そしたらそこには、HTMLが細かく書かれているんです…。
ここで???でいっぱいになり、「vue.js htmlファイル」などと検索してみたら、

自分の中の常識ではindex.htmlがサイトの核となる静的ページでしたが、
vue.js開発では、index.vueが通常のviewページとして存在している。

という事実に辿り着き、vue.jsってjavascriptみたいなことじゃないのー！？HTMLもなのー！？と困り果てました笑

実際にindex.vueの基本的な構成は

<script>
javascriptのような動的にするコードを書く
</script>

<template>
HTMLなどの静的なコードを書く
</template>

<style>
cssのような見た目の装飾するコードを書く
</style>

となっており、1つのindex.vueに全てが詰まっているようなファイルと考えるのが正しい認識だったみたいです！(この理解にまず1日かかりました…笑)

2.Vueの中にもフレームワークがある

フレームワークの全体的な知識はつけていたと思っていたのですが、まさかvue.jsというフレームワークの中にvuetifyというUIを意識したフレームワークが存在するという事実に驚きました。

フレームワークとは(一部抜粋)、
Javaだったらsprint framework
PHPだったらLaravel
JavascriptならReactやVue.js
RubyならRuby on Rails

というように、言語によって人気のフレームワークがあり、開発内容に合わせてどのフレームワークを採用するかを決めている、というところまで理解していました。

しかしJavascriptのフレームワークであるvue.jsの中に、UIをより簡単に統一するためのvuetifyというフレームワークが存在するということを知り、細かっ！と思いました笑
(まだvuetifyを使うことでvueとどう異なるのかまでは全然わかっておりません汗)

3.index.vueのコードが少なすぎる

私は今まで、1ページの内容をそのままHTMLファイルに突っ込むものだと思っていたので、index.vueの<template>タグにもたくさん文字が書いてあると予想していました。

しかし、index.vueには全然文字が書いておらず…。(HTMLに文字が書いていないみたいな現象です…汗)
1週間ほどコードを読んでいれば、確かにHTMLもCSSもJavascriptも書いてあるファイルにそんなに書いたらファイル重くなるなぁと気づきますが、
当初はどこを見ていいかわからないvueファイルに呆然としていました。笑

じゃあその文字やコードはどこから来ているかというと…
単一コンポーネントというオブジェクトのようなものをたくさん作って呼び出すといった感じの理解です(今は…)
例えば、
index.vueファイルの中にprofile.vueやsideMenu.vue、〜.vueがたくさん呼び出されていて、そのprofile.vueファイルの中に飛ぶと"ユーザー名"や"生年月日"といった実際にindex.htmlに見られるような文字が書かれているといった感じです。

この奇妙さは文字だとあまり伝わらないと思いますが、1週間でようやく、そういうことか！と理解し始めております…笑

現場配属から1週間を経て、3つの気づきを今回書いてみましたが、理解が間違っている部分や読みづらいところも多いと思います。

こんな自分視点の発見記録や自己満記事になると思いますが、気が向いたら読んでみてください！