はじめに
こんばんは。またたびです。
これまで書いてきた3つの記事全て100viewを超えており、ブログ等を書いたことのないしがない大学院生にとってはとても嬉しい限りです。
読んでくださりありがとうございます。
今回はゴールデンウィーク直前位から勉強を始めたVue.jsについて、簡単にまとめていきたいと思います。
まだVue.jsを触ったことがない方の参考になれば幸いです。
いつも通り参考にさせていただいた本と、プラスでおすすめの本を記述しておくのでよければ読んでみてください。
Vue.jsとは
Vue.jsとはJavaScriptのフレームワークです。
近年注目されているフレームワークで、書きやすい、拡張性が高い、学習コストが低いといったメリットがあります。
PHPのフレームワークであるLarabelのフロントエンドに用いられていることが多くあるそうで、実際に私のアルバイト先でも用いられています。
HTML、Javascriptについての理解がない方は、その2つについて学習してから手を付けることをおすすめします。また、それと同時にCSSについても学習しておくと、非常に便利です。
コードはHTMLと大差ないため、非常に書きやすいと思います。
また、インターネットがつながる状況であれば、特別なパッケージを導入することなくプログラムの記述が可能であることも利点の一つに感じています。
以下にコードの一例を示します。(動作確認済みです)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<!-- ここに処理を書く -->
<p> {{ text }} </p>
</div>
<script src ="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
text: 'Hello Vue'
}
})
HTMLを勉強した方ならご存知かもしれませんが、index.html内の
はページを表示した際のtabに表示される文字になっています。そして、index.htmlに{{ text }}と記述してある部分にmain.javaに記述されているtext: 'Hello Vue'が表示されるわけです。
同じディレクトリにいれてHTMLを表示すればわかりやすいと思うのでやってみてください。
このように、HTML中をごちゃごちゃさせることなくなるのも利点かなと思います。
アルバイト先でVue.jsを用いていない案件だと、HTMLの中に長文が書いてあることが多々ある…
今回は入門ということでHTML、Javascript、は理解しているが、Vue.jsはまだ理解出来ていないという方に記事を書いてみました。
もう少し理解したらまた記事を書いていきます。
本日はここまでにします。
おわりに
GW毎日連続して記事をあげると意気込んでいましたが、良いinputをしていないにも関わらずoutputをするのはよろしくないことに今更ながら気が付いたのでもう少し質を上げて投稿しようと思います。明日から3日間は私的な旅行のためおやすみさせていただきます。
また、Vue.jsのおすすめの本や勉強の仕方、間違いや表現の悪い部分があればご指摘いただけると幸いです。
参考文献
私が実際に参考にさせていただいた本(イラストや色があり読みやすいです)
基礎から学ぶ Vue.js
後輩に少し読ませてもらった本(文章とコードが非常に多くなりますが、非常にわかりやすく実務的な力を身に着けたいのであればこちらがいいかなと)
Vue.js入門 基礎から実践アプリケーション開発まで