水面下の夢

競プロやイラストに興味があります.メインブログがここ.同人サークル「かのらぶ」のページはこっち( https://yumechi0525.amebaownd.com ).ブログアイコンはYaQ(@8_9_00)さんから.

Vue.js からはじめる JS フレームワーク(ハンズオン形式)に参加してきました

Vue.jsのハンズオンに参加してきました。(参加したの先週火曜日なんだけど)

講師

okashoi 様

資料

githubにあがっています。これを実際に書いて、動かしてみました。

github.com

概要

vue.js ってなに?

公式ページ
https://jp.vuejs.org/

公式ページの言葉:親しみやすい、融通が効く、高性能

・メリット

  • 環境によらず採用できる
  • 簡単に始められる(まず使う分にはビルド不要、urlでlink貼るだけ)
  • ドキュメントが充実してる(日本語もある!)

・特徴

  • MVVM(Model-View-ViewModel)
  • データと表示が結びついているので、データを変えたら表示も動的に変更される

あと既存システムに組み込みやすいのです。jQueryと一緒に使ったりできる。(これは後で)

ハンズオン

資料見ていただければわかるかとおもいますが、すごい使いやすいです。直感的と言いますか…。講師の説明も非常にわかり易く、JavaScriptフレームワークとか絶対難しいでしょ!とか思っていましたが、あっさり使えてびっくりしました。

あと演習としてやったテーブルの操作、アレもっと早く知りたかった…(過去に似たようなものをjQueryだけで作ろうとして、挫折した経験がある)。そんなに難しくない操作ですが、過去の自分から成長できたのかな?と少し感動しました。

動くのは楽しい。


特にfor文とかで繰り返し要素サクッと書いたり、クリック時の動作ぱぱっと書けるのはすごい楽だなあとか。

こんなのとか

```html
{{ user.name }}
````

for文で一気にクリック時のイベント張って、しかもindexもすぐ取れるので指定要素の取り出しも楽と。。。

VM?周りだけ少し特殊な感じがしたので、このあたりはドキュメントを読み進めてみようかなと思います。

その後

せっかくだから学んだことを活かして、なんか作ろうかなと思って、適当にcsvからSQLのinsert文作るだけのページを作ってみました。vueというかほぼjQueryとbootstrapのチカラのような気がしますが、それは…。

しかもVM2つ立てるようなやり方してるし、よくわからないしで、アレ。そのうちアップデートするかもしれません。

https://yumechi.github.io/javascript_practice/vue_practice/SQL_Creator.html


とりあえず学ぶだけじゃなくて、実際に作ってみることが大切だなあと再認識しました。
templateとかcomponentとかもっと活かして楽に実現したいゾ…(上記は右も左も分からないので、ダラダラとソースコードを書き続けることになっており、非常に良くないけどまあ…)


フロントエンドは技術的に難しいことが大量に組み合わさっており、とても理解が追いつきませんでしたが、まずはvueを少しづつ初めてマスターできたらいいなと思えました。(複数同時に追っても理解が追いつかないしね)