理系高校生ぬけむた

理系高校生が理系なネタをあげてく

【Vue.js】【IT】理系高校生がyoutubeで練習しながらVue.jsでtodoリストを作ったから記すー前半ー

こんにちは

 

理系高校生の

 

ぬけむたです

 

昨日と今日で

 

Vue.jsを勉強を実践をもとに

 

チャレンジしてきました

 

難易度や感想を軽く示していければなと思います

 

 

YOUTUBE

 

今回

 

まりんとすふぃあ

 

さんの

 

Vue.jsでウェブアプリを作ろう

 

を丸写ししながら勉強してみました

 

途中で1度あきらめかけましたが

 

ちょっとだけ振り絞って頑張ると

 

なんなく進めたので

 

こんな自分でもわかりやすく進められるので

 

解説が素晴らしいと思います

 


 

www.youtube.com

 


 

www.youtube.com

 

結果

実際に作成したウェブ

こんな感じで

 

タスクを管理できるようになっています

 

編集では

 

やること、状態、期限をいじることができます

 

IDと期限で並び替えもできるのでとても便利です

 

Vue.jsで開発することのメリット

 

今回はyoutubeを丸写ししたのですが

 

わざわざVue.jsで開発することのいいところを少し語って前半を終わろうと思います

 
1 Vueファイルが読みやすい

 

vue.jsを使わない場合、HTML、CSS、JSそれぞれのファイルが必要ですが

 

Vueは3つのファイルが1つになっています

 

画像を載せます

Vueファイルの1つ

 

画像のように

 

scriptタグ、templateタグ、styleタグの3つに大きく分かれています

 

Vueの特徴の1つとして

 

コンポーネント(部品)を複数つくり

 

アプリの構成を考えています

 

今回は

 

入力の部分、表の部分に分けているので

 

Vueファイルも2つになります

 

そうするとどのファイルが何を表しているのかを

 

比較的、純正javascriptよりわかりやすくなります

 
2 ディレクションがすごい

 

Vueにはディレクションという

 

関数的な、決まった呼び出しがあります

 

例えばv-ifやv-forなどです

 

これらを多用することで

 

複雑な構成も

 

簡単なコードで

 

書くことができます

 

自分はここがすごい好きです

 

まとめ

 

後半はディレクションについて

 

もう少しだけ深く語りたいと思います

 

ありがとうございました