JavaScript人気フレームワークVue.jsを使ったスニペット8選 チャットアプリからバーチャルトレーディングカードまで

JavaScriptフレームワークでは、Vue.jsが最も人気のある選択肢の1つです。 このパッケージにより、比較的短い順序で複雑なユーザーインターフェイスを作成できます。 そしてすでにHTML、CSSそしてJSを扱っている人たちにはかなり簡単な学習曲線を特徴としています。

 

Vueは段階的に実装することができ、他のライブラリと連携させて機能させることができます。高いレベルの柔軟性があり、可能性の世界を切り開いてくれるでしょう。

 

オープンソースフレームワークが何をすることができるかを見ていただくため、CodePenのアーカイブを広範囲に調べました。 今回、ここでは強力で興味深いいくつかの例をご紹介していきます。

 

 

ドラッグして描写

 

このスニペットは、通常のボタンクリックだけでなく、インタラクティブなユーザーインターフェイスを作りだすためVueの機能を使用しています。画面上でカーソルをドラッグするだけで、図面がかけるのです。しばらくすると何も表示されなくなります。色の選択は沢山あり、「サイコ」モードもあります。

See the Pen
Vue Water Drawing Pad by Daniel Ormeno (@dormenog)
on CodePen.

 

パスをグラフ化する

 

チャートとグラフは、JavaScriptフレームワークを素晴らしい方法で活用しています。ここではVueはデータに触れる機会を提供します。ユーザーの注意を引くための滑らかなアニメーションが見られるのは言うまでもないでしょう。

See the Pen
vue-highcharts demo – Access `chart` instance via refs by Zhenye Wei (@weizhenye)
on CodePen.

 

過去Vue

 

あらゆる種類のユーザーインターフェイスを構築するのに役立つツールがあるなら、レトロもあるでしょう。このWindows 98のような画面は、オリジナルにかなり忠実に再現されています。 [スタート]ボタンをクリックすると、小さなメニューが表示され、「設定」をクリックすると、背景や時計表示などの機能を変更できます。それでは、自慢のBSoDを再作成することができればいいですが。

See the Pen
Vindue 98 by Miles Manners (@milesmanners)
on CodePen.

 

クイックチャットの時間？

 

上記の例は範囲がかなり狭いものでしたが、これは本格的なチャットアプリケーションです。使い方は「アカウント」を作成し（他で使っているパスワードを使用しないでください）、実際にチャットしてオンラインユーザーのリストを表示できるページに移動します。好きなだけ詳細な構築ができます。

See the Pen
Vue + Firebase Message App V2 by Mike Weaver (@mjweaver01)
on CodePen.

 

より良い検索方法

 

おそらくVueのようなツールを使う最大の理由はユーザーインターフェイスを向上させることでしょう。インターフェースが使用するのが難しいものだと、空想的なアニメーションなどは意味がないものになるでしょう。このウィキペディアの検索UIをとても素晴らしいものにしてくれます。見た目が素晴らしいだけでなく、ナビゲートでも簡単な洗練された検索機能を提供します。

See the Pen
Wikipedia Morphing Search by Rian Pauzi (@tekon92)
on CodePen.

 

バーチャルトレーディングカード

 

おそらくあなたは子供の頃、トレーディングカードのパックを購入したでしょう。それがあなたの大好きなスポーツ（この中の架空の野球カードのような）またはゲームのためであったかどうかはわかりませんが、これらの小さな紙に夢中になったはずです。ここには、裏面の統計を見ることができるようにひっくり返すことができるVueによって動かされる仮想カードがそろっています。きちんとした検索機能までもそろっているのです。

See the Pen
Digital baseball cards for fictional players by Kyle (@kaisle)
on CodePen.

 

メール通話

 

これは、Vueが他のフレームワークやライブラリとどのように連携できるかの例です。この滑らかなメールアプリはいくつかの優れた特殊効果を提供するためにGSAPを利用します。周りをクリックしてメッセージを表示したり、自分のメッセージを書いたり、設定アイコンをクリックしてテーマを変更したりできます。

See the Pen
Mail app w/ Vue + GSAP ✉️😎 #CodePenChallenge by Jhey (@jh3y)
on CodePen.

 

整理整頓

 

大量の表形式データがある場合、ユーザーが必要な情報を選ぶのは困難です。そのプロセスを単純化する1つの方法は、データをさまざまな方法でソートおよびフィルタリングできるようにすることです。これがまさにこの最高売れ行きの良い映画の表がしてくれることです。列でリストを分類し、検索機能で即座に特定のアイテムを見つけることができます。問題解決に役立つでしょう。

See the Pen
Top grossing films Vue table by Andrea Goodson (@AKGD)
on CodePen.

 

優れたユーザーインターフェイスを構築

 

Vueやそれに対応するReactのようなフレームワークは、プロジェクトに強力なフォームと機能を実装することを可能にします。高速でユーザーフレンドリーなインターフェースと、ユーザーがそれを簡単に対話できる機能を組み合わせることが目的です。言い換えれば、それはよりアプリ的なエクスペリエンスを提供することです。

 

そして、それは始まったばかりです。多くの人がこれらのインターフェイスがウェブの将来と見なす理由は簡単にわかるでしょう。