こんにちは。 この業界に携わって、インターン時代も含めると早4年くらい
こんにちは。
この業界に携わって、インターン時代も含めると早4年くらいが経とうとしている者です。
それなりの年月が経ち、プログラム、デザイン、営業など色んな経験をさせてもらったので、業界自体には慣れました。
ですが、いまだにどうにもしっくりこないポイントが1つあります。
それは、
「専門用語多すぎてわけわかんねぇ。」です。
こんなことを言うと、
「いやいや、これくらいわかるでしょ？ｗｗ 情弱乙ｗｗｗ」
とおっしゃりたい気持ちになるでしょう。そうでしょう。
ですが、私のような文系出身のプログラマもどきにとって、この電脳世界の専門用語たちはただの脅威でしかないのです。
アーキテクチャ、デプロイ、リファクタリング、オブジェクト指向。。。（今はなんとなくならわかりますよ。なんとなくなら。。。）
しかも、便利とされる各言語のフレームワークを使用しようとするものなら、
そのフレームワーク独自の用語だったり関数が出てくる始末。
さらに、大体の公式のドキュメントは元が英語のものばかり。
なので、最近の公式ドキュメントは日本語化してくれているケースも多いですが、はっきりいって私のような情弱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の導入と簡単な表示を行いました。
次回から具体例を用いつつ詳しく見ていきます！！