【必見】デザイナーがVueではなくReactでブログを作った理由

こんにちは、シンヤです!
先日、以下のツイートをしました。
デザイナーの僕がReactでブログを作った理由
— シンヤ@ITブログ執筆🌟 (@shinyasato_ss) November 24, 2020
・ユーザー体験が高いブログを作りたかった
・GatsbyJSが一番無難だった
・Reactの方がエラー文が親切だった
・Vueは中途半端感があった
・VueはHTMLとJSの区別が分かりづらい
・慣れたらJSXの方が書きやすかった
Reactの方がJS感があるから好き😀
デザイナーの僕がReactでブログを作った理由
・ユーザー体験が高いブログを作りたかった
・GatsbyJSが一番無難だった
・Reactの方がエラー文が親切だった
・Vueは中途半端感があった
・VueはHTMLとJSの区別が分かりづらい
・慣れたらJSXの方が書きやすかった
Reactの方がJS感があるから好き😀
Reactの方が学習コストは高いのでデザイナーは嫌煙するのですが、慣れたらVueより使いやすいです😊
VueとReactについて
まず両者を知らない人のために、少し解説します。
VueとReactは、どちらも「Webでアプリを作るためのライブラリ」です。
VueとReactの特徴
React.js | Vue |
---|---|
Facebook製。 「JSX」という特殊な記法でコードを書いていく。 コードの書き方が生のJavaScriptに近いので、他の技術に転用がしやすい。 |
個人開発。 HTMLに近い書き方でコードを書いていく。 学習コストが低いので、初学者の方でもすぐWebアプリ作りができる。 |
「ライブラリ」と「フレームワーク」について
先ほど「ライブラリ」という言葉を使いました。
ここから先の話は「ライブラリ」と「フレームワーク」の違いを理解する必要がありますので、両者の違いを解説いたします。
- ライブラリ
- Webの画面を作るための道具の一つ
- フレームワーク
- ライブラリを使い、すぐにWebアプリが作れるように整理された道具箱
VueとReactはライブラリなので、フレームワークも存在します。
React製の代表的なフレームワーク
NextJS | GatsbyJS |
---|---|
リリース当初からSSRをサポートしており、ページ毎のmetaタグを簡単に変えられたり、カスタマイズをすればブログを作ることも可能。 | SPAでブログが作れることが特徴で、WordPressのようにプラグインによるカスタマイズや、テーマ機能でデザインを変えることも可能。 |
Vue製の代表的なフレームワーク
NuxtJS | VuePress |
---|---|
Webアプリ作りに特化。 Vueの簡単さはそのままに、SSRやmetaタグの変更もサポートしている。 |
ブログ作りに特化。 複雑な設定をしなくても、Markdownを書くだけでブログ記事を作ることができる。 |
ブログに使われているライブラリとフレームワーク
ライブラリ | フレームワーク |
---|---|
このブログに使われているライブラリは「React」で、フレームワークは「GatsbyJS」になります。
VueではなくReactでブログを作った理由
前置きが長くなりましたが、僕がデザイナーの間で人気が高いVueではなく、Reactを選択した理由は以下の通りです。
- ユーザー体験が高いブログを作りたかった
- GatsbyJSが一番無難だった
- Reactの方がエラー文が親切だった
- Vueは中途半端感があった
- VueはHTMLとJSの区別が分かりづらい
- 慣れたらJSXの方が書きやすかった
1. ユーザー体験が高いブログを作りたかった
大前提として、僕はデザイナーなので「ユーザー体験(UX)」にも非常に拘っています。
WordPressの様な従来のブログは「SPA」ではないので、UXが非常に悪くなってしまいます。
SPAとは何か?
SPAとは「SinglePageApplication(シングルページアプリケーション)」の略称です。
JavaScriptを使ってWebでアプリを作るための技術の一つです。
SPAを使うと、読み込みさせずにページ遷移を行うことができます。
JavaScriptがページの「DOMの切り替え」を行っているのです。
DOMについて
DOMとは「Document Object Model」の略称で、かんたんにいってしまうと、Webページを表示する仕組みのことです。
WebページはHTMLの内容を解析してDOMを作り出し、ページを表示しています。
つまりHTMLとは「DOMを作るための設計図」のようなものです。
裏を返すと、DOMを作った後HTMLは不要ということです。
このDOMを、JavaScriptを使って動的に切り替えてWebページを表示する技術がSPAです。
DOMだけを切り替えるので、スムーズなページ遷移ができるのです😀
2. GatsbyJSが一番無難だった
僕が本格的にSPAを学び始めたのは、3年程前です。
当時はSPAでブログが作れるフレームワークが「GatsbyJS」しかなかったのです。
「VuePress」は当時からありましたが、テスト版だったので使いたくありませんでした。
最初は、仕方なくGatsbyJSを選んだのです。
3. Reactの方がエラー文が親切だった
フレームワークによって差がありますが、VueよりReactの方がエラー文が親切な気がします。
Vueはなんというか「表現が曖昧」な気がするんですよね。
GatsbyJSのエラーの例文
例としてJSXに絵文字を入れてみます。
<p className="u-list-asterisk">全ての記事が表示されない場合😊は、ページ更新をお試しください。</p>
これを保存すると、ターミナルで以下の警告文が出ます。
warn ESLintError:
/Users/shinyasato/Documents/shinya-it/src/pages/allblog.js
24:7 warning Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby
jsx-a11y/accessible-emoji
✖ 1 problem (0 errors, 1 warning)
絵文字は必ず
span
属性で囲み、role="img"
を付けて、かつaria-label
またはaria-labelledby
で説明文を入れてください。
と言われています。
以下のように、絵文字をspan
で囲みエラー文の通りに修正します。
<p className="u-list-asterisk">全ての記事が表示されない場合<span role="img" aria-label="face">😊</span>は、ページ更新をお試しください。</p>
これで警告文は表示されなくなります。
結構丁寧におかしい箇所を説明してくれます。
4. Vueは中途半端感があった
これは主観なのですが、VueはHTMLの書き方に寄せすぎて、HTMLともJavaScriptとも分からない「中途半端なライブラリ」という印象を持ちました。
なぜそう思ったのかは、自分でもよくわかりません。
昔書いたことがあるVueのコードを書いて思い出してみます。
<template>
<div>
<About />
<AboutSkill />
</div>
</template>
<script>
import Meta from '~/assets/mixins/meta';
import About from '~/components/about/About';
import AboutSkill from '~/components/about/AboutSkill';
export default {
components: {
About,
AboutSkill
},
mixins: [Meta],
data () {
return {
meta: {
title: '私について',
type: 'article'
}
}
}
}
</script>
多分ですが・・・
- importの前にHTMLを書き込むのが、JSっぽくなかった
- 「script」と「template」の関係性が分かりにくかった
- 条件を「script」で囲む必要性を感じなかった
書き方だけHTMLに寄せすぎたところが、僕には物足りなかったのかもしれません😅
5. VueはHTMLとJSの区別が分かりづらい
これを特に感じるのは「for」と「class」です。
HTMLとJS両方とも、上記2つの概念があります。
Reactで使われるJSXの方が、違いが分かりやすいと感じました。
以下に例文を書いてみます。
classの書き方
<p className="text--red">テキスト</p>
className
と書くことで、HTMLのclass
として扱われます。
<p class="text--red">テキスト</p>
HTMLと同じ書き方ですね。
forの書き方
<label htmlFor="namedInput">名前</label>
htmlFor
と書くことで、HTMLのfor
として扱われます。
<label v-for="namedInput">名前</label>
v-for
と書くことで、HTMLのfor
として扱われます。
vueはHTMLと混同する要素がある場合、先頭に
v-
をつける特徴があります。
感覚なのですが、明確にHTMLとJSの書き方を区別する「React」の方が、僕は書きやすかったです。
6. 慣れたらJSXの方が書きやすかった
JSXは最初は癖を感じるけど、慣れたらこちらの方が書きやすかったです。
流れに沿った書き方だからか、自分はVueより分かりやすかったです。
JSXの例文
試しに以下に、簡単なJSXの例文を書いてみます。
import React from 'react';
import Header from '../components/Header';
const notFoundPage = () => {
return (
<div>
<Header />
お探しのページは見つかりませんでした
</div>
);
};
export default notFoundPage;
このブログの404ページです。
- 最初に「React」を読み込んで
- 必要な「Header」というComponentを読み込み
- 「notFoundPage」という名前でページを作り
- 「export default」で吐き出す
という一連の流れが分かりやすく書けるので、僕は今後もReactを使い続けると思います😀
最後に
結構記事が長くなったので、僕がVueではなくReactでブログを作った理由を復唱します。
- ユーザー体験が高いブログを作りたかった
- GatsbyJSが一番無難だった
- Reactの方がエラー文が親切だった
- Vueは中途半端感があった
- VueはHTMLとJSの区別が分かりづらい
- 慣れたらJSXの方が書きやすかった
以上になります。
ではでは、またね〜🤗
- 【必見】デザイナーがVueではなくReactでブログを作った理由