RyoGIFT | Web developer blog

Web開発者のブログです。

ES6とReactとVue.jsの基礎を学ぶ

JavaScriptの勉強

最近、JavaScriptを中心に勉強しています。業務ではVue.jsを使っていますが、Reactにも興味があり少しずつコードを書き始めました。ReactはSimple、Vue.jsはEasyと言われておりますが、その意味も理解できるようになってきました。私は下記のサイトを参考に勉強をしました。

順番的にはJavaScript PrimerでES6を学んでからReactのチュートリアルをやってみるとパターンが似ており、分かりやすいと思います。

コードの比較

ES6では以下のような書き方がベースになります。(処理の中身は省略しています。)

export class App {
  constructor() {
  }

  handleAdd(title) {
  }

  handleUpdate({ id, completed }) {
  }

  handleDelete({ id }) {
  }

  handleSubmit(event) {
  }

  handleChange() {
  }

  mount() {
  }

  unmount () {
  }
}

Reactは、このような書き方です。ES6での書き方と似ています。(処理の中身は省略しています。)

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleClick(i) {
  }

  render() {
    const history = this.state.history;
    return (
      <div className="game">
      </div>
    );
  }
}

また、DOMを返すだけの場合はAllow Functionベースで書くこともできます。

const Square = (props) => (
  <button className="square" onClick={props.onClick}>
    {props.value}
  </button>
);

そして、Vue.jsでは単一ファイルコンポーネントで書きます。(処理の中身は省略しています。)

<template>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
  }
};
</script>

<style scoped>
</style>

ES6やReactはオブジェクト指向のクラスという仕組みに近いですが、Vue.jsはメソッドを多く定義していくようなイメージです。どの書き方が良いかは好みの問題かと思いますが、個人的にはReactの書き方が好きです。実際に業務で使うとなるとRestAPIを呼び出すために、axiosライブラリを利用したり、GraphQLAPIを呼び出すためにApolloが提供しているライブラリを利用しますが、 複雑さが増していくとVue.jsの単一ファイルコンポーネントの書き方では行数が増えてしまい、少し見づらくなってきます。SPAを本格的に実装するときは、やっぱりReactの方が優れているかなと最近、感じています。

余談

しかし、フロントエンドの領域も様々な仕組みやベストプラクティスが蓄積されてきており、難しくなってきたなと感じています。 数年前までは控えめなJavaScriptが主流でしたし、少しjQueryとかが書けるだけで一般的なシステムの開発が出来ていました。技術の進歩は嬉しいですが、追いつくのもひと苦労ですね。