わかった気になりたい。~Vue.js編①~

こんにちは。 この業界に携わって、インターン時代も含めると早4年くらい

こんにちは。

この業界に携わって、インターン時代も含めると早4年くらいが経とうとしている者です。

それなりの年月が経ち、プログラム、デザイン、営業など色んな経験をさせてもらったので、業界自体には慣れました。

ですが、いまだにどうにもしっくりこないポイントが1つあります。

それは、

「専門用語多すぎてわけわかんねぇ。」です。

こんなことを言うと、

「いやいや、これくらいわかるでしょ?ww 情弱乙www」

とおっしゃりたい気持ちになるでしょう。そうでしょう。

ですが、私のような文系出身のプログラマもどきにとって、この電脳世界の専門用語たちはただの脅威でしかないのです。

アーキテクチャ、デプロイ、リファクタリング、オブジェクト指向。。。(今はなんとなくならわかりますよ。なんとなくなら。。。)

しかも、便利とされる各言語のフレームワークを使用しようとするものなら、

そのフレームワーク独自の用語だったり関数が出てくる始末。

さらに、大体の公式のドキュメントは元が英語のものばかり。

なので、最近の公式ドキュメントは日本語化してくれているケースも多いですが、はっきりいって私のような情弱boyには優しくないです。ハイ。

そんな私がググりながら常日頃思うこと。

「私にもわかるレベルの優しいドキュメントをくれええええええ」

これです。

という訳で、色んな言語やフレームワーク、ツールをある程度触った上で、

その経験を

「専門用語をなるべく省いた、理解しやすく、読みやすいドキュメント」

として残していこうと思います。

というわけで、まずは今流行りのVue.jsを触っていきます。

Vue.jsとは?

最初に、比較的わかりやすいと好評の、公式のドキュメントから抜粋した文章を以下に記載します。

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

なるほど。なるほどね。

完全に把握しました。

つまり、

「Vue.jsちゅうのは、他のガチガチのフレームワークとは違って、一部分だけでも使えるんや!見た目側(View)に重きを置いたフレームワークやから、他のライブラリや既存のプロジェクトに混ぜるのも簡単やで!シングルアプリケーション(通称:SPA)も楽チンやさかい。」

ということですね。

何事も百聞は一見に如かずと思いますので、早速Vue.jsの導入と例のあれ(Hello World を表示させるだけの伝統芸)をやっていきます。

Vue.jsの導入

Vue.jsの導入は簡単です。

index.htmlに以下のコードをねじ込むだけで終わります。

  • <!– 開発バージョン、便利なコンソールの警告が含まれています –>
  • <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

もしくは、

  • <!– 本番バージョン、サイズと速度のために最適化されています –>
  • <script src=”https://cdn.jsdelivr.net/npm/vue”></script>

今回はVue.jsに触れて色々弄るのが目的ですので、開発バージョンを用います。

Hello World!!

Vue.jsで出力を行うときは、以下のように記述します。

まずは、HTMLです。

  • <div id=”app”>
  •  {{ message }}
  • </div>

そして、JS側です。

  • var app = new Vue({
  •  el: ‘#app’,
  •  data: {
  •   message: ‘Hello World!!’
  •  }
  • })

すると、HTML側に、、、?

  • Hello World!!

出ました。ありがとうございます。

このように、Vue.jsでは

View(html)

View Model(js)

この2つでデータの連携を行って、データの表示などの処理を実行します。

基本的な処理だけなら、ファイルの操作もhtmlとjsだけなので楽ですね!

今回はまずVue.jsの導入と簡単な表示を行いました。

次回から具体例を用いつつ詳しく見ていきます!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です