#1日目の取り組み記録
###【Story】
・3日休みだ。なんか楽しいことがしたい。楽しいことってなんだ？→データ分析とか機械学習とは違う領域の知識に触ってみたい
・早速調べる。SPA(Single Page Application)が流行ってるらしい。画面作るのもなんか楽しそう
・AngularとReactがフレームワークとして有名らしい。使ってみよう。→環境構築で爆死
・友達にきく。→まずはVue.jsが簡単らしい
・本屋いく
.....ということで早速以下の書籍を購入して進めました。
Amazonのレビューみたら分かりやすいけど、誤植が多いと。確かに心当たりあった。。。
###【環境構築】
＊大きく分けてやったことは以下の通り
①node.jsのインストール
以下からインストーラを入手
https://nodejs.org/en/download/
環境PATHが設定されていないので別途設定する
cmdからデスクトップにいてもnpmコマンドが動くことを確認する
②ディベロッパツールのインストール
以下のコマンドでインストール
npm install -g @vue/devtools
Googleのプラグインでもインストールできるがブラウザ依存になるため、スタンドアロン版がオススメ
③cli-service-globalのインストール
以下のコマンドでインストール
npm install -g @vue/cli-service-global
vue-cliを動かすために必要
④VueCLIのインストール
以下のコマンドでインストール
npm install -g @vue/cli
Vue.js開発のためのコマンドツール
アプリケーションのbuildとかプロジェクト作成とかが簡単にできるよ
⑤VueCLIを利用してコマンドラインからプロトタイプを動かす
1.app.vueのファイルを用意する
app.vue
<br>app.vue<br>
<template>
<div id="app">
<h1>Hello!</h1>
<p>This is message...</p>
</div>
</template>
2.ファイルのある場所へ移動する
3.以下のコマンドを実施
vue serve
4.コマンドラインに表示されたURLに遷移
http://localhost:8080/
あくまでも動作確認
⑥コマンドラインからプロジェクトを作成する
1.プロジェクト作成場所に移動する
2.以下のコマンドを実施する
vue create ロジェクト名
3.プリセットの指定
コマンドラインに色々でてくるけど基本はデフォルトのまんまでOK
4.プロジェクトの実行
npm run serve
5.コマンドラインに表示されたURLに遷移
http://localhost:8080/
成功したらこんな感じ↓↓
⑦プロジェクトをビルドする
1.以下のコマンドを実施する
npm run build
2.distフォルダ配下に必要なファイルが作成されたことを確認する
サーバに上げるときに必要
dist配下のindex.htmlファイルは絶対パスで記載されているため、直接クリックしてもページは空白表示される。
⑧GUIツールを使ってみる
1.以下のコマンドを実施
vue ui
2.ブラウザでVueプロジェクトマネージャが起動
==Vueプロジェクトマネージャでできること=============================
・プロジェクトの作成
・プロジェクトのインポート
・プロジェクトのビルド
・プリセットの設定
・依存するパッケージリストのインストール
UIが結構きれいだしイケテル
＊おまけ：勉強になった単語集
SPA(Single Page Application)・・・単一のWebページでコンテンツ切り替えを行うことで、ブラウザの挙動に縛られないWeb表現を可能にする
フルスクラッチ ・・・自前で全部jsのコードを書く方法
DOM操作 ・・・htmlのタグの操作がjavascriptからできるよ
レンダリング ・・・文字のデータを読み取って、実際の画面に映る画像や映像などに変換すること。なんかjsのコードからHTML用のタグとか生成してくれてた。
＊エディタについて
Visual Studio Codeを利用。Gitにそのままコミット&プッシュできるし便利。
Vue.jsの基本
＊テンプレート
script内はjavascriptだからコメントアウトの仕方が違うのがなんか面白い
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<style>
ここでコンテンツのレイアウトとか文字色とか設定
</style>
<h1>
</h1>
<div id = "">
id値でjavascriptの処理対象になるタグを引っ張ってくるよ
</div>
<script>
javascriptのコードを記載
</script>
</body>
</html>
＊HTMLタグとjavascriptを紐づける
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Vue.js</h1>
<div id="app">
{{ message }}
</div>
<hr>
<input type="text" onInput="doAction(event);">
<script>
var data = {
message:"please type"
}
var app = new Vue({
el: '#app',
data: data
})
function doAction(event){
data.message = event.target.value
}
</script>
</body>
</html>
＊ レンダリングしてみる
<script>
var data = {
message:'Hello'
};
var app = new Vue({
el: '#app',
data: data,
render: (element) =>{
return element("p",
{'style':'font-size:20pt; color:red'},
data.message);
}
})
function doAction(){
data.message = "Hey";
}
</script>
＊配列とか使って複数のタグをレンダリングしてみる
<script>
var data = {
message:'Hello',
items:['one','two','three','four','five']
};
var app = new Vue({
el: '#app',
data: data,
render: (h) =>{
return h("div",
[
h("p",{'style':'font-size:20pt; color:red'},data.message),
h("ol",data.items.map(i=> h('li',i)))
]
);
}
});
function doAction(){
var newdata = ['いち','に','さん','よん','ご']
data.message = "clicked";
data.items[0] = '零';
for (n in data.items){
data.items[n] = newdata[n];
}
}
</script>
＊ ユーザーの入力によって表示されるデータを変更する★オススメ
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Vue.js</h1>
<div id="app">
<p v-html="messages"></p>
</div>
<hr>
<input type="text" onInput="doInput(event);"> <!--入力フィールド-->
<button onclick="doAction();">
click
</button>
<script>
var data = {
messages: '<li>Hello</li>'
};
var app = new Vue({
el: '#app',
data: data
});
function doInput(event){
data.message = event.target.value;
}
function doAction(){
data.messages += '<li>' + data.message + '</li>'
}
</script>
</body>
</html>
＊v-bindでstyleの情報をjs側に埋め込む
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Vue.js</h1>
<div id="app">
<p v-bind:style="style_value">{{message}}</p>
</div>
<hr>
<input type="number" onChange="doChange(event);" value="20">
<script>
var data = {
message:'Hello',
style_value:'font-size:20pt; color:red'
};
var app = new Vue({
el: '#app',
data: data
});
function doChange(){
data.style_value = 'font-size:' + event.target.value + 'pt; color:red;';
}
</script>
</body>
</html>
＊v-bindでクラスの情報をjs側に埋め込む
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<style>
.red {
font-size:20pt;
font-weight:bold;
font-style:normal;
color:red;
}
.blue {
font-size:24pt;
font-weight:plain;
font-style: italic;
color:blue;
}
</style>
<h1>Vue.js</h1>
<div id="app">
<p v-bind:class="classes">
{{message}}
</p>
</div>
<hr>
<button onclick="doAction();">
click
</button>
<script>
var classObj = {
red: true,
blue: false
};
var data = {
message: 'Hello Vue!',
classes: classObj
};
var app = new Vue({
el: '#app',
data: data
});
function doAction() {
classObj.red = !classObj.red;
classObj.blue = !classObj.blue;
}
</script>
</body>
</html>
＊v-ifでクリックすると表示レイアウトが切り替わるようにする★オススメ
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<style>
.ok {
font-size:24pt;
color:blue;
padding: 5px 10px;
border: 2px solid red;
}
.ng {
font-size:20pt;
color:gray;
}
</style>
<h1>Vue.js</h1>
<div id="app">
<p v-if="flag" class="ok">
正常な表示
</p>
<p v-else class="ng">
※問題発生中
</p>
</div>
<button onclick="doAction()">
Click
</button>
<script>
var data = {
flag:true
}
var app = new Vue({
el: '#app',
data:data
});
function doAction(){
data.flag = !data.flag;
}
</script>
</body>
</html>
＊v-ifとtemplateを使って表示画面を切り替える★オススメ
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<style>
table tr th {
font-size:16pt;
color:white;
background-color:blue;
padding: 5px 15px;
}
table tr td {
font-size:16pt;
color:gray;
border:1px solid gray;
}
li {
font-size:16pt;
color:gray;
}
</style>
<h1>Vue.js</h1>
<div id="app">
<template v-if="flag" class="ok">
<p>テーブルの表示</p>
<table>
<tr><th>Name</th><th>mail</th></tr>
<tr><td>Taro</td><td>taro@yamada</td></tr>
<tr><td>Hanako</td><td>hanako@flower</td></tr>
<tr><td>Sachiko</td><td>sachiko@happy</td></tr>
</table>
</template>
<template v-else class="ng">
<p>リスト</p>
<ul>
<li>Taroのアドレスは、taro@yamadaです。</li>
<li>hanakoのアドレスは、hanako@flowerです。</li>
<li>Sachikoのアドレスは、sachiko@happyです。</li>
</ul>
</template>
</div>
<button onclick="doAction()">
Click
</button>
<script>
var data = {
flag:true
}
var app = new Vue({
el: '#app',
data:data
});
function doAction(){
data.flag = !data.flag;
}
</script>
</body>
</html>
＊v-forでリスト処理
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<style>
table tr th {
font-size:16pt;
color:white;
background-color:blue;
padding: 5px 15px;
}
table tr td {
font-size:16pt;
color:gray;
border:1px solid gray;
}
</style>
<h1>Vue.js</h1>
<div id = "app">
<p>※データをテーブル表示する</p>
<table>
<tr>
<th>ID</th>
<th>name</th>
<th>mail</th>
<th>tel</th>
</tr>
<tr v-for="(item, id) in items">
<td>{{id}}</td>td>
<td>{{item.name}}</td>
<td>{{item.mail}}</td>
<td>{{item.tel}}</td>
</tr>
</table>
</div>
<script>
var data = {
items:[
{name:'Taro', mail:'taro@yamada', tel:'999-999'},
{name:'Hanako', mail:'hanako@flower', tel:'888-888'},
{name:'Sachiko', mail:'sachiko@happy', tel:'777-777'},
{name:'Jiro', mail:'jiro@change', tel:'666-666'},
{name:'mami', mail:'mami@mumemo', tel:'555-555'}
]
}
var app = new Vue({
el : '#app',
data : data
})
</script>
</body>
</html>
＊配列処理
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<style>
table tr th {
font-size:16pt;
color:white;
background-color:blue;
padding: 5px 15px;
}
table tr td {
font-size:16pt;
color:gray;
border:1px solid gray;
}
</style>
<h1>Vue.js</h1>
<div id = "app">
<table>
<tr>
<th>name</th>
<th>mail</th>
<th>tel</th>
</tr>
<tr v-for="(item, key) in items">
<td>{{key}}</td>
<td>{{item.mail}}</td>
<td>{{item.tel}}</td>
</tr>
</table>
</div>
<script>
var data = {
items:{
Taro:{mail:'taro@yamada', tel:'999-999'},
Hanako: {mail:'hanako@flower', tel:'888-888'},
Sachiko: {mail:'hanako@flower', tel:'888-888'}
}
}
var app = new Vue({
el: "#app",
data: data
});
</script>
</body>
</html>
＊v-forとv-ifの合わせ技★オススメ
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="http://localhost:8098"></script>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<style>
table tr th {
font-size:16pt;
color:white;
background-color:blue;
padding: 5px 15px;
}
table tr td {
font-size:16pt;
color:gray;
border:1px solid gray;
}
</style>
<h1>Vue.js</h1>
<div id = "app">
<p>※データをテーブル表示する</p>
<table>
<tr>
<th>ID</th>
<th>name</th>
<th>mail</th>
<th>tel</th>
</tr>
<tr v-for="(item, index) in items" v-if="index % 2 == 0">
<td>{{index}}</td>td>
<td>{{item.name}}</td>
<td>{{item.mail}}</td>
<td>{{item.tel}}</td>
</tr>
<tr v-else>
<td>***</td>
<td>*****</td>
<td>*****</td>
<td>*****</td>
</tr>
</table>
</div>
<script>
var data = {
items:[
{name:'Taro', mail:'taro@yamada', tel:'999-999'},
{name:'Hanako', mail:'hanako@flower', tel:'888-888'},
{name:'Sachiko', mail:'sachiko@happy', tel:'777-777'},
{name:'Jiro', mail:'jiro@change', tel:'666-666'},
{name:'mami', mail:'mami@mumemo', tel:'555-555'},
]
}
var app = new Vue({
el: '#app',
data: data
})
</script>
</body>
</html>