シンヤのITブログ

タグ一覧
検索結果「0件」

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

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

    こんにちは、シンヤです！
    先日、以下のツイートをしました。

    デザイナーの僕が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を選択した理由は以下の通りです。

    1. ユーザー体験が高いブログを作りたかった
    2. GatsbyJSが一番無難だった
    3. Reactの方がエラー文が親切だった
    4. Vueは中途半端感があった
    5. VueはHTMLとJSの区別が分かりづらい
    6. 慣れたら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ページです。

    1. 最初に「React」を読み込んで
    2. 必要な「Header」というComponentを読み込み
    3. 「notFoundPage」という名前でページを作り
    4. 「export default」で吐き出す

    という一連の流れが分かりやすく書けるので、僕は今後もReactを使い続けると思います😀

    最後に

    結構記事が長くなったので、僕がVueではなくReactでブログを作った理由を復唱します。

    1. ユーザー体験が高いブログを作りたかった
    2. GatsbyJSが一番無難だった
    3. Reactの方がエラー文が親切だった
    4. Vueは中途半端感があった
    5. VueはHTMLとJSの区別が分かりづらい
    6. 慣れたらJSXの方が書きやすかった

    以上になります。
    ではでは、またね〜🤗

    • 【必見】デザイナーがVueではなくReactでブログを作った理由
    Copyright - Shinya Sato, 2021 All Rights Reserved.