Webディレクターが知っておきたいReact・Vue

Webサイトに関するあらゆる知識とスキルが求められるWebディレクター。最近ではフロントエンドに特化したディレクション業務が増えており、エンジニア同等の知識を求められる場合もあります。

その中でも、特に押さえておきたい流行りのReact・Vueについてご紹介します！

React・VueはJavascriptのライブラリ・フレームワーク

React・Vueは、Javascriptにおけるライブラリ・フレームワークになります。

Webデザイナーやコーダーが使用するスクリプトは、アニメーションや操作性といったページ内で完結する簡易的なものが一般的です。

しかし、サーバーとの連携が必要であったり、開発ボリュームが大きくなったりすると、フレームワークを導入する必要があります。

近年のフロントエンド開発ではReact・Vueがよく使われているため、Webディレクターであればせめてこの2つくらいは押さえておくべきでしょう。

勤め先によっては必須の知識

Webディレクターの仕事範囲は就職先によっても異なりますが、フロントエンドチームの指揮をとるような場合、React・Vueは必須の知識だといえます。

実際、Webディレクターの求人を見てみると、デザイナーやエンジニアと連携した業務というのがとても多い印象です。

中には「フロントエンド開発のディレクション業務」といったフロントエンドに特化した求人もあるため、これからのWebディレクターにはライブラリやフレームワークの知識が求められる可能性があります。

また、フリーでWebディレクターをしていると、困りごととしてJavaScriptやフロントエンドまわりについて相談されることも少なくありません。

「メインのエンジニアが抜けて引継ぎや技術継承ができていない」「パフォーマンスが悪い」といった問題は多々起こりますので、WebディレクターにReact・Vueの知識があればよりスムーズに仕事を進めることができるのです。

React・Vueの特徴

React・VueはJavascriptのライブラリ・フレームワークになりますが、そもそもライブラリとフレームワークでは何が違うのでしょうか。

ここでは、ライブラリとフレームワークの違いや、React・Vueそれぞれの特徴について見ていきましょう。

ライブラリとフレームワークの違いについて

ライブラリとは、汎用性の高い複数のプログラムを再利用できる状態でひとまとまりにしたものです。

たとえば、簡易的なライトをつくらなければならない場合、「ON/OFFのスイッチ」「電球」「ソケット」「電池ボックス」さえ購入すれば完成します。

これらの部品はホームセンターで売っているので、わざわざスイッチやソケットを自分でつくる必要はありませんよね。

ライブラリもこれと同じで、アプリ開発に便利な部品が既に用意されており、これらを組み合わせることによってプログラムが動作するイメージです。

一方、フレームワークは「枠組み」を意味する言葉で、基本的な仕組みや方針のことを指します。

「アプリケーションの設計方針」が雛形として示されているため、決まりに従って具体的な処理を実装するだけで一定品質のアプリケーションをつくることが可能です。

つまり、枠組みができているので、肉付けすれば簡単にプログラムが動作するということ。

これをライトに例えると、スイッチや電球などを購入して組み立てるのではなく、既にできているライトを購入するイメージです。

＜フレームワーク＞

使えるようにしてある枠組み。大枠として作ってあるもの。

Angular 2
Vue
Ember

＜ライブラリ＞

部品。単体では動かないもの。

jQuery
ReactJS　
D3

Reactの説明

最近はHTMLとjQueryがセットで使われるのが当たり前になりつつあります。

しかし、動きのあるページをつくりたい場合はjQueryのプログラムが複雑になってしまうのが現状です。

そこで、こういった問題を解消するために誕生したのがReact。

ReactはFacebookが開発したJavaScriptライブラリーで、主にユーザーインターフェースの構築を目的としています。

＜Reactの基本情報＞

◆種別：ライブラリー

◆最新バージョン：16.8.6

◆開発元：Facebookおよびコントリビューター

◆公開日：2013年3月

◆サイズ：21KB（圧縮版）

◆主な用途：シングルページアプリケーション

メリット

サイズが小さくて効率が良い
高速で柔軟性に優れている
ドキュメントやオンラインソースが充実している
サーバー側で描画することも可能
人気が高く、多くのアプリケーションで使用されている

デメリット

公式ドキュメントが英語
PHPとの併用ができない
新たな考え方と構文を習得する必要がある
ビルドツールが必要不可欠
ほかのライブラリーやフレームワークが必要になる場合がある

Vueの説明

Vueは、ユーザーインターフェースをつくるための先進的なフレームワークです。

Reactのような仮想DOMを使ったビュー層が核となっているため、ほかのライブラリーと統合することも可能。

開発者であるEvan You氏はもともとAngularJSの開発に携わっており、AngularJSから好きな部分を抽出してVueが誕生しました。

とにかくシンプルなのが特徴で、たった1つのファイルで1つのコンポーネントをつくることができます。

また、そのファイルはコンポーネントに必要な処理をJavaScriptで書けるほか、HTMLで描画部分を書いたり、css in jsやcss moduleなどの好きな方法でスタイルを書いたりすることも可能です。

そのため、ほかのフレームワークに比べて非常に見やすく、学習していない人でもなんとなく触れるレベルだといえるでしょう。

＜Vueの基本情報＞

◆種別：フレームワーク

◆最新バージョン：2.6.10

◆開発元：Evan You

◆公開日：2014年2月

◆サイズ：19KB（圧縮版）

◆主な用途：シングルページアプリケーション

メリット

人気が高く、多くのアプリケーションで使用されている
導入が簡単で、高度な開発者にとっても満足度が高め
依存するオブジェクトが少なく、性能が高い
モデル層でのデータ管理が可能になる
設計によってはmodel同士の結合度などを自由にアレンジできる

デメリット

1人の開発者が更新を行っている
ほかのフレームワークに比べてリソースが少ない
model同士の結合度をアレンジするには高い技術力が必要
使いこなすにはJavaScriptのスキルも要求される
Reactのようなコントロールドコンポーネントがつくれない

エンジニアと相談しながら導入をすすめよう

React・Vue導入の際は開発のプロであるエンジニアと相談したうえで進めるようにしましょう。それぞれの特徴をつかんだとしても、実際のプロダクトにどちらが最善であるかを判断するのは非常に難しいためです。

React・Vueはどちらも人気が高く、近年では多くのアプリケーションで使われています。そのため、これらの知識をWebディレクターが押さえておけば、よりスムーズに業務を進めることができるでしょう。

また、最近ではフロントエンドに特化したディレクション業務の求人も増えてきているので、React・VueはWebディレクターの転職にも有利だといえます。