JavaScript初心者がVue.jsに挑戦する話01-HelloVue.js!-

2021年9月3日2022年12月29日

「どこまでJavaScriptを理解すればフレームワークに手を出してもいいんだろう？」

という呪い+永遠に基礎やってるな私。もう踏み出してしまえ！ということで、Vue.jsを学んでいくシリーズです。
私自身のため、初学者のため、「わかればきっと未来は楽しい」精神で学習ログを残します。
（jQueryの基礎記事放置中ですが）

先日JavaScriptで初めてストップウォッチゲームを作ってみましたが、理解が浅い部分があり沼にハマっていました。
よって、まだブログにも残せそうにありません。タイムの比較が文字列になってしまっています‥。
これはもう少しレベルアップしたらリベンジです。
クソゲー仕様だけど遊んでください😛

初JavaScriptアウトプット😊
ちゃんとhttpsにしないと。これからの置き場決めないと。
コードの改善点とか、まだやりたいこととや実は失敗してるとこ←もあるから先輩たち頼らせてもらおっ🙂😚https://t.co/kkf3uE9Mcc
— ぺんこ🐧🐷🍜 (@penkokokoko) June 4, 2021

スポンサードサーチ

1. Vue.js　とは。なぜVue.jsなのか
2. 学習計画
3. Vueのインストール
4. データバインディングとVueインスタンス
- 4.1. データバインディングとは
- 4.2. 空のVueインスタンスを作成
5. ルートテンプレート
6. 今回のまとめ
- 6.1. シェア

Vue.js　とは。なぜVue.jsなのか

Vue.jsはJavaScriptのフレームワークです。

・リアクティブ＝反応的に表示を操れる
・HTMLベースで書ける
・シンプルな記述
・導入コストが低い

よく「脱jQuery」のような謳い文句を見るのですが、HTMLに条件文を加えたりできるということで、HTMLから離れると不安になる私にはまずぴったりだと思いました。

公式サイトにはこう書かれています。
・親しみやすい
・融通がきく
・高性能

私はフロント側から離れたくないので直感的にこれだと感じました。
それと、「Vue×lottieが楽しいよ」と、コミュニティ(にゅ～ぶる会)でも教えてもらったりしてワクワクしたからです。
なんせ初めてのフレームワークなので理由はそこまで必要ない！とりあえずやってみます。

学習計画

【学習テーマ】
・スモールスタート
・全体像を理解する
・かんたんな制作物を作る

【主な使用教材】
Udemy
「Vue.js入門決定版！jQuery を使わない Web 開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」
↓ここから飛べるよ。

※追記（9/3）※
上記のUdemy講座でめっちゃ簡単なTODOリスト作りました。

こちらから飛べます。
母の買い物メモ用に、文字を大きくして毎回リロードしても消えないような仕様に変えていこうと思います。

書籍

Webデザインの現場で使えるVue.jsの教科書

posted with ヨメレバ

廣末丈士/遠山恭平オーム社 2020年05月01日頃

楽天ブックス

Amazon

Kindle

スポンサードサーチ

Vueのインストール

方法は

ダウンロードして直接組み込む
CDNを利用して読み込む
npmを利用してインストール
その他（今回は触れない）

学習に一番お手軽な2，CDNを利用して読み込みました。（今回は最新ではなく教材に沿ってバージョン指定しました）
そして書き忘れましたが、最初のうちはjsfiddleまたはcodepenを利用してコードを書いていきます。
（なぜかjsfiddleのResult領域が狭い‥）

forkを使いながら構文をどんどん派生して覚えていけるので便利です。今回は省きます。

データバインディングとVueインスタンス

データバインディングとは

→データと描画を同期する仕組み

データバインディングの種類（一般的な用語）
・双方向バインディング
・単方向バインディング
・ワンタイムバインディング
これはおいおい理解していきましょう。

空のVueインスタンスを作成

まずはVueクラスをインスタンス（実態）化するための記述
※代入する必要がなければ省略可

スポンサードサーチ

ルートテンプレート

シンプルにHello Vue.jsを表示させてみる。
(データバインディング）

1.先程作った空のインスタンスにel:を記述し、ルート要素を指定（この場合id=”app”）。
※le　= elementのこと。
この範囲に呼び出すよ。

2.dataプションに「プロパティ名:　値」を定義

3.htmlにapp内に呼び出す。→マスタッシュ構文{{ }}にてテキスト展開。{{ }}内がmessageプロパティの値に置き換わる。
（dataオプションで用意して、htmlから参照する。）

See the Pen
by yuuka (@penko6930)
on CodePen.

はじめの一歩　完了。

今回のまとめ

Vueの入り口はインスタンス化したvueクラスにテンプレートを定義し、html側にリアクティブに反映させるというものでした。
今回はテキストのデータバインディングでHello.Vue.jsを表示させたので、次回はVueならではのディレクティブや配列、オブジェクトの呼び出し（反映）について理解していきます。

JavaScript, Vue.js, WEB, ブログJavaScript, udemy, Vue, Web制作, フレームワーク, プログラミング

Posted by penko