概要

いろいろあって webpack と React をやっていくための学習とか環境設定をしていた．

React チュートリアルをさわった
ローカルに React + webpack の開発環境をつくる方法をざっくり確認した
Emacs でうまくやっていくための設定を調べた

React チュートリアル

公式チュートリアルをなぞった． facebook.github.io CodePen なるサイト上で動く．すごい．でもエラー起こしたときにどこが悪くて怒られてるのかわからない．仕方ない．
ところではじめて本格的に ES2015 な記法に触れたんですけど JavaScript っぽくなさがやばいですね……．でも書いてたら慣れてきた．

ローカルに開発環境をつくる方法

webpack + React

検索して出てきた id:uraway さんの記事『Webpack + React + ES6の最小構成を考えてみる。』を大変参考にさせていただきました🙇🏻
（埋め込みで貼ろうとしたけど URL の途中でリンクとして認識されなくなってしまう……）

ESLint

% eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? Yes
? Do you use React? Yes

てな感じ（あとは好み）で設定した上で，eslint-plugin-react の README にあるように，.eslintrc.js に

{
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

みたいな感じで書き加えてあげると，

import React from 'react';
import { render } from 'react-dom';

import Hello from './components/hello.jsx';
import World from './components/world.jsx';

render(
  <div>
    <Hello />
    <World />
  </div>,
  document.getElementById('app')
);

みたいなコードで React とか JSX 内でのみ使われている Hello, World が未使用だ，という警告が出なくなる．

Emacs でうまくやっていくための設定

なぜ Emacs か

JetBrains IDE の学生ライセンスがあるのでそれを使う手もあったんだけど非商用利用しかできないし，現状ちゃんとライセンスを買う気はない*1ので Emacs でやってみることにした．

(use-package web-mode
  :ensure web-mode
  :config
  (progn
    (add-to-list 'auto-mode-alist '("\\.html?$" . web-mode))
    (add-to-list 'auto-mode-alist '("\\.js[x]?$" . web-mode))
    (add-hook 'web-mode-hook
          '(lambda ()
         (setq web-mode-attr-indent-offset nil)
         (setq web-mode-markup-indent-offset 2)
         (setq web-mode-css-indent-offset 2)
         (setq web-mode-code-indent-offset 2)
         (setq web-mode-sql-indent-offset 2)
         (setq indent-tabs-mode nil)
         (setq tab-width 2)
         (setq flycheck-disabled-checkers
               '(javascript-jshint javascript-jscs))
         (when (member web-mode-content-type
                   '("js" "jsx"))
           (flycheck-add-mode 'javascript-eslint 'web-mode))))))

既に use-package を使ってある程度設定してたのでそこにちょちょっと書き足した感じ．もしかしたら要らないものとかあるかもしれない．

まとめ

やっぱりブラウザとか GUI とか見た目に動きがすぐわかるものを書くのは楽しい

*1:本格的に仕事はじめれば必要な道具なので買うなりするとは思う

新・オノマトペ的備忘録

技術ブログだと思った？　残念、日記でした！

React はじめることになりました

概要