デザイナー向けのVue.js紹介

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、執筆経緯や想定読者、記事の方針などを説明します。

執筆経緯

私自身はプログラマーで、趣味で小さなwebアプリケーションを作っています。その中で Vue.js を使用し、とても便利なのでデザイナーさんにも触ってみてほしいなぁと思いました。

さっそくTwitterのフォロワーにお勧めしようとしたのですが、入門用の参考資料を検索したところ、 Vue.jsの公式ページ も技術ブログも情報サイトもほとんどが「JavaScriptの読み書きができる人向け」の記事でした。

確かに、Vue.jsを実務レベルで使えるようになるためには、JavaScriptプログラミングの知識が必要です。しかし、「そもそもVue.jsとはどんなものか」「何ができるのか、どう便利なのか」「自分のニーズに合っているか」といったことがわからなければ、「JavaScriptを学習してでもやってみるべきかどうか」も判断できないんじゃないかなぁと思いました。

そこで、JavaScriptをあまり知らなくても読める紹介記事を書いてみることにしました。

想定読者

冒頭にも書きましたが、このシリーズでは以下のような読者を対象にしています：

・HTML/CSSを使って、実用的なwebページをデザインおよび実装できる
・JavaScriptとは何か、なんとなく雰囲気はわかる

逆に、以下のような作業や経験は必要ないものとします：

・JavaScript実行環境のインストール（node.js、webpackなど……）
・JavaScriptプログラミングの経験

今後の予定と記事の方針

次回の記事では、Vue.jsの概要・機能・メリットを解説します。それ以降は読者に実際にサンプルを読み書きしてもらいながら、より詳しい機能を紹介していく予定です。サンプルを書くための準備も解説しますので、PCとインターネットブラウザー以外の準備はいりません。

想定読者の項目に書いたように、HTML/CSSについては基本的な知識があることを前提としているので、HTML/CSSの文法解説はしません。JavaScriptプログラムにはある程度の解説を入れますが、あくまで機能の理解に必要な範囲だけとし、詳細には踏み込みません。「ふ～んそういうもんか～」くらいに眺めてください。

注意点として、あくまで「紹介記事」なので、このシリーズだけ読んでもバリバリ実務ができるようにはならないと思います。記事を読んで気になったらもっと本格的な学習へ進んでくださいね、というスタンスで書いていきます。

また、このシリーズの記事はすべて無料公開する予定ですが、継続モチベーションのためにいわゆる「投げ銭」スタイルを採用するかもしれません。もしいくつか読んで気に入っていただけたら、ご支援いただけると嬉しいです～！

-----------------------------

ここまでお読みいただきありがとうございました。もしよければ、ぜひ次回も読んでみてください！以下の無料マガジンで更新していきます。

デザイナー向けのVue.js紹介｜noonworks｜note

-----------------------------

おまけ

以下のリンクは私が実際にVueを使って制作中のwebアプリ（ファイナルファンタジー14のゲーム補助用ツール）です。Vueを使うということで、トランジションやドラッグ＆ドロップでの並べ替えなど、UIにこだわって作ってみました。

BlueNote

このアプリはVue.jsとHTML、CSS、JavaScript（TypeScript）で構成されています。データは各自のブラウザに保存するようにしていて、サーバー側のアプリケーションは書いていません。ここまで製作するのにかかった期間は一か月半くらいでした。

この10年で様々なアプリ開発・運用関連サービスが登場しており、現在はこのくらいのアプリならHTML/CSS/JavaScriptだけで作り、ほぼ無料で運用できます。アイデア次第で誰でもアプリを開発できる時代です。あなたもデザインの腕を活かしたサービスを作ってみませんか？
（求人記事みたいな終わり方になりましたが、求人はしてません。すみません。）