vue.jsについて 初心者が調べてみた

ご無沙汰してます、emiです！

初めての東京の夏ですが、もう溶けそうです🌴笑
家から駅までの歩く20分間がめちゃめちゃキツい・・・・
この前１時間ほど外歩いただけでダウンしてしまいました。😭

道民ならわかってもらえると思うのですが、息ができないんです笑😤
北海道の雪も辛いですが、東京の暑さもなかなかです（TT）

話は変わって、先月、パートナーの会社さんと飲み会があったのですが、
その時、『こんな案件やってみたいとかありますか？？』
と、聞いたとき、『vue.jsやりたいです！』との返答がありました🗣

🙂🙂🙂

（・・・vue.jsってなんぞや？？？？？）

と思った私は、次の日早速ググってみました。
ですがさっぱりわからず・・👩‍💻

パートナーの方に『vue.jsがさっぱりわかりません教えてください～😭』と
聞いてみました。（本当はもっと真面目に聞いてます笑）

とってもわかりやすく、なるほどな～と思ったのですが、
もっと詳しく勉強しよう！🤓ということで調べてみたので
それについてまとめていきます_✍

～JavaScriptフレームワーク

フレームワークとは？？？？
→簡単に言うと何かの枠組みのこと。システム開発を楽に行えるように
   用意された、プログラムとかのひな形のこと。

◎そもそも・・・
『公式のフレームワークというものが存在しない』

◎フレームワークを利用する目的は？
『開発を速く行い、生産性をあげる』

◎フレームワークの選択基準
『技術の習得にどれくらいの学習時間がかかるか』

JavaScriptフレームワークは、個人や企業が独自に自由に開発を行ってきた為、世界中に数多くのフレームワークが存在するらしいです🌎

例えばこんなの☟☟

・Spring Framework
現在最も使われているフレームワーク。
┗かなり多くの機能が搭載されている
┗拡張性が高い
┗保守性が高い

・Apache Struts
中規模〜大規模開発で使われていた実績があるフレームワーク。
┗初心者が今から勉強するフレームワークとして良い
┗チーム内の作業分担がスムーズ
┗プログラム完成後の受け渡しや修正が簡単

・jQuery
JavaScriptをより扱いやすくしたファイル。
┗クリックしたら画像が入れ替わる
┗マウスオーバーした要素がアニメーションのように動く
┗スクロール量によって見た目や数値を変更する
※JavaScript・・動きをつけるときに使われるプログラミング言語。

・react
Facebookが開発、OSSとして公開しているライブラリ。
┗パフォーマンスが良い
┗規模が大きくなっても管理しやすい
※OSS・・中身が公開されていて改造したり配ったりしてOKなソフト

（（　どのフレームワークをえらべばいいの、、？　））

そこでご紹介させていただくのがvue.js💁‍♀️

簡単に言うと、UI(ユーザーがPCとやり取りをする際の入力や表示方法などの仕組み)で複雑な実装が出来る、今流行りのJavaScriptのことだそうです。

、、、詳しく！！！👹

～vue.jsの何が良いかについて

------

１）構造がシンプル！だから自由！！！

ということで、要するに自分の好みのやり方でWEBアプリを
構築していくことができます。

☟☟☟たとえば

大規模なフレームワークだと、独自のルールに則って
WEBアプリを構築していく必要が。。

しかし！！

Vue.jsでは自分の好みのやり方でWEBアプリを
構築していくことができるらしいのです！！！！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
◎本格的なWEBアプリから、簡単な一部の機能実装まで幅広い規模に対応。
◎他のライブラリとの組み合わせを自由に選ぶことが可能。
◎足りない部分は他のライブラリを導入して、
　組み合わせて使うことが可能。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

２）MVVMによって各プログラムを役割を分けて開発ができる！！！！

※MVVM・・・「Model（データ）」「View（画面）」「ViewModel（メイン処理）」といった具合でそれぞれの階層の役割が明確になる為、分けて開発を行うことができる設計手法。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
◎プログラムが見やすく追加や修正が行いやすくなる。
◎保守、運用なども行いやすいので、大規模なアプリにも対応可。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

３）コンポーネントによって1つのHTMLファイルを使いわましたり、同じ処理をまとめて外部から利用できる！！！！

※コンポーネント・・・各プログラムを部品化して再利用ができる強力な
　　　　　　　　　　    仕組みのこと。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
◎書くプログラムの量が減るため、開発の生産性が上がる。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

４）学習効率がかなり高い！！！！🧠

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
◎HTMLとCSSとJavaScriptの基礎を学習すれば使い始めることができる。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※HTML・・・マークアップ言語（タグで囲むことで構造を表現する言語）　　 　　　
　　　　　　  のひとつ。
※CSS・・・webサイトの見た目を整えるための技術。

▼どのようなアプリに適している・・？🤔

**

「SPA（シングルページアプリケーション）」
→画面遷移がほとんどなく、サクサク動く使い勝手の良いWEBアプリ。
　反応がよく使いやすいのでWEBアプリの設計手法としてユーザーから
    がある。
　◎通常のWeb ページでは実現できないユーザー体験を実現できる。
　◎高速なページ遷移を実現できる。
　◎ネイティブアプリ（デバイス上で直接動作するアプリ）の代わりとして
　提供することができる。

SPAの実現にはJavaScriptを駆使して、大量のコードを書く必要が・・・
しかしご安心を！👏 Vue.jsは簡単に実現が可能！！ 

あとは、画面遷移してもデータを保持出来るため、実装で凝ったことなどが実現できるらしいのです！

例えば
gmailのように画面遷移せずに受信トレイをみたり、送信したりすることが可能。

逆に
LPのようなスクリプトがアニメーションのみで完結するような案件では逆に使いづらいかも・・

ちなみに
SPAのように全体に影響するのではなく部分的にvue.jsを使うことも可能✨

▼ほかにも！🙄

vue.jsはスクリプト側から値の設定とブラウザからの入力のどちらから行っても双方向で値を更新できる仕組みを取り。

・ユーザーの入力でスクリプト側の値を変更できる
・スクリプト側から値を変更しても反映される
・ページ遷移せずに検索結果を閲覧できる
・とても複雑な検索にも対応可能
　（前述したjQueryやreactに比べ速度が速い・工数がかからない！）

※スクリプト・・ソースコードを書いてすぐに動かすことがができる
　　　　　　　　プログラム。

こんなかんじですかね🤓
調べてみたら思ったより難しく、、自分レベルで理解できるように書いてみました。_✍わからない単語ばかりで、、笑

フレームワークについても詳しく知れたので良かったです😎

何か興味あることなどあれば、また更新しようと思います^^

でわ～😇