Vue.jsでできること8選。凄さが分かる実用例スニペット集

Vue.js
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

最もよく使われているJavaScriptのフレームワークのひとつに、Vue.jsがあります。

Vue.jsを使えば複雑なユーザーインターフェイスも比較的簡単に構築でき、すでにHTML/CSSやJavaScriptの知識があるならばそれほど学習コストもかかりません。

Vue.jsは一枚板なフレームワークとは違い、部分ごとに少しずつ適用でき、また他のライブラリと組み合わせて使用できます。高い柔軟性をもち、インターフェイスを構築する上での可能性を広げてくれるのです。

ではこのオープンソースフレームワークを使うことで、どんなことができるのでしょうか。この記事ではCodePenのアーカイブから厳選した、パワフルで思わず目を引く8つの実用例をご紹介します。

1. カーソルで線を描く

以下のスニペットのように、Vue.jsを使えば通常のボタンクリックを超えたインタラクティブなUIが作成できます。

スクリーン上でカーソルを動かすと線が描け、次第に消えていきます。線の色は多くの選択肢から選べ、全色を使った「Psycho(サイコモード)」もあります。

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

2. グラフを描く

チャートやグラフは、JavaScriptフレームワークを使うのにもってこいのコンテンツです。

このスニペットではVue.jsを使ってデータを扱い、ユーザーの目を引くなめらかなアニメーションを作り出しています。

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

3. 懐かしの画面を再現

あらゆるタイプのUIを作成できるフレームワーク、Vue.js。これを使って、レトロなUIを作ってみてはどうでしょうか。

以下のスニペットでは、まるでWindows 98のようなスクリーンが再現されています。「Start」ボタンを押してメニューを表示し、「Setting」から背景や時計表示などの設定を変更してみましょう。かつて皆が恐れたBSoD(ブルースクリーン・オブ・デス)も再現されていたら完璧だったのですが……。

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

4. 本格的なチャットアプリ

ここまでの例は用途の限られたものでしたが、以下のスニペットは本格的なチャットアプリケーションです。

実際に「アカウント」を作成してみましょう(他で使っているパスワードを入力しないように注意!)。すると本当にチャットができ、他のユーザーのリストが表示されるページへと飛びます。このように、Vue.jsを使えばここまで手の込んだアプリも作成できるのです。

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

5. 便利な検索機能

Vue.jsのようなフレームワークを使う一番の理由は、UXを向上させるためでしょう。インターフェイスがユーザーにとって使いにくければ、美しいアニメーションやトランジションといった演出も台無しです。

以下のスニペットは、指定された単語のWikipediaページを探す検索機能です。見た目が洗練されているだけでなく、ユーザーにとって使いやすいデザインが施されています。

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

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

子どもの頃にトレーディングカードを集めていた人は多いのではないでしょうか。スポーツやゲーム、キャラクター、アイドルなど、誰もがトレーディングカードに一度は夢中になった経験があるはず。

以下はVue.jsで作成した、野球のトレーディングカードです。クリックするとカードがひっくり返り、選手のデータを閲覧できます。優れた検索機能も搭載。

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

7. メールアプリ

以下のスニペットでは、Vue.jsを他のフレームワークやライブラリと合わせて使う例を示しています。

見た目の美しいこのメールアプリは、GSAPを使って特殊な効果を演出しています。あちこちクリックしてメッセージを読んだり、新規メールを作成したりしてみましょう。歯車アイコンからテーマ変更もできます。

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

8. ソート機能

膨大な表形式のデータを取り扱う場面において、ユーザーが必要な情報だけを取り出すのが難しいことがあります。そのような場合、ソートやフィルターをかけてデータを整理できるようにすれば扱いやすいですよね。

以下のスニペットは「映画興行収入ランキング」のデータを、ソート&フィルタリングできるようにしたものです。項目ごとにデータをソートしたり、検索機能で特定の映画を検索したりできます。これはコーディングによる問題解決の良い実例でしょう。

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

Vue.jsは、より良いUI構築のためにある

Vue.jsやReact.jsといったフレームワークを使うことで、プロジェクトにパワフルな見た目と機能を取り入れられます。

そして目指すべきは、スピーディーでユーザーにとって使いやすいインターフェイスであり、言い換えればネイティブアプリのような使い心地を提供することです。

今回ご紹介したのは、こうしたフレームワークでできることのほんの一部です。無数の可能性を秘めたVue.jsは、Webの未来を担うものとなるでしょう。

(原文:Eric Karkovack 翻訳:Yui Tamura)

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
Workship ad 2