kurodakazumichi commented 5 years ago

React + Mobxでのフロントエンド開発環境構築

カリキュラム

nodebrew or nodist (node.js自体をバージョン管理するツール macならnodebrew、winならnodist)
node.js (node.js本体)
webpack (node.jsで書かれたコードをブラウザで動く状態にするツール)
- babel-loader (webpackでbabelを使えるようにするプラグイン)
- awesome-typescript-loader (webpackでtypescriptを使えるようにするプラグイン)
- css-loader (webpackでcssもjsとして扱えるようにするプラグイン)
- style-loader (jsモジュールになったcssをブラウザで使えるようにするプラグイン)
- file-loader (ファイルを読み込めるようにするプラグイン)
- sass-loader (sassをcssに変えちゃう)
babel (babelのコア)
- babel/preset-env (モダンなjs構文を使えるようにするプリセット)
- babel/preset-react (JSXなどreactの記法を使えるようにするプリセット)
- babel/plugin-proposal-class-properties
- babel/plugin-proposal-decorators
react (React本体)
- react-dom (Reactでdom操作するやつ)
- prop-types (Reactのpropsの型チェックをするやつ)
- react-router-dom(SPAページ遷移するためのパッケージ)
node-sass (nodeで使えるsass)
mobx (mobx storeが使えるようになるやつ) -mobx-react (mobxとreactをつなぎ合わせるやつ)
@fortawesome/fontawesome-free (freeで使えるiconがたくさん詰まったwebfont)
typescript
- @types/react
- @types/react-dom
- @types/react-router-dom
classnames(動的にcss class名をつけるのが楽になるパッケージ)

思ったこと

node.jsで作ったjavascirptをブラウザで動かすためには一手間必要になるんだけどなんとなくjavascirpt＝ブラウザで動かせると思って取りかかるとハマる。

確かに言語はjavascriptだけど、PC上で動作するものをブラウザ上で動かそうってなれば動作環境違うんだからそれなりに手間はかかるんだよって事。

それをサクッと解決してくれるのがwebpackなので、webpackは結構重要だなーと思う。

kurodakazumichi commented 5 years ago

TODO

[x] css-loaderに対応する
[x] sassにも対応する
[x] reset-cssはどうするかとりあえずreboot.cssを入れてみた。
[x] mobxを使えるようにする
[x] font awesomeでiconを表示

kurodakazumichi commented 5 years ago

reset-cssの対応

2018年11月 reboot.cssなるものが良いらしいのでreboot.cssを採用。

root/src/assets/styles/reboot.cssに普通のcssを配置
webpackのcss-loaderとstyle-loaderを使って.js内でimportして利用。

webpack.config.js:

rules: [
  /**
   * .cssのローダーを設定
   * 1. css-loaderでcssをjs moduleに変換
   * 2. style-loaderでブラウザでstyleとして使えるようにロード
   */
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
]

reboot.cssもnpmで管理されてるなら、npmで使いたいところ

kurodakazumichi commented 5 years ago

font-awesomeの対応

yarn add -D @fortawesome/fontawesome-free

使いたい.jsファイルでimportして使う

import '@fortawesome/fontawesome-free/css/all.css';

all.cssのなかで各種フォントファイル(ttf,wof,svgなどなど)のでwebpackのfile-loaderを設定する

webpack.config.js

  /**
   * フォントファイルのローダーを設定
   */
  {
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
    loader: 'file-loader'
  }

fontのファイルタイプの違い

IE9を以下を捨てるならwoffだけ使っておけばいいと思う。マルチブラウザ、かつ古いブラウザにも対応するなら各種ブラウザが認識できるフォントファイルを全部ぶち込む必要があるが、その分ページサイズは増える。 woffなら主要でモダンなブラウザは基本対応してるので、古いものは切り捨てていこう。

参考になったサイト

WOFF (Web Open Font Format) は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しい Web フォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの sfnt 構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。

WOFF の使用には 3 つの利点があります:

フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。自社の TrueType や OpenType 形式のフォントが Web 上で使用されること許可したくない多くのフォントベンダーは、WOFF 形式のフォントなら使用を許可できるでしょう。これは、サイトのデザイナーに対してフォントの可用性を高めることになります。プロプライエタリなブラウザベンダーもフリーソフトウェアのブラウザベンダーも、WOFF 形式を好んでいます。つまり、他の既存のフォント形式と異なり、WOFF 形式のフォントが、Web のための真にユニバーサルで相互運用が可能なフォント形式になる可能性があります。 WOFF と WOFF2 という、2 つのバージョンの WOFF があります。これらの主な違いは、使用する圧縮アルゴリズムです。@font-face では format 記述子で、それぞれ 'woff' と 'woff2' で識別されます。

kurodakazumichi commented 5 years ago

SASSの対応

yarn add -D node-sass sass-loader
node-sassはnode.js上で動作するsass
sass-loaderはwebpackのloaderでsassをcssモジュールに変換する

webpack.config.js

  /**
   * SASSのローダーを設定
   */
  {
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
  },

kurodakazumichi commented 5 years ago

Mobxの導入

yarn add mobx mobx-react
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

.babelrc:

"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}],
["@babel/plugin-proposal-class-properties", {"loose": true}]
]

mobxのdecorator構文を使うためにbabelのpluginを追加している。

decoratorsをlegacy"モードで使用する場合、class-properies`が必要になる。(公式情報)
pluginsを書く順番も先にdecoratorsを書かないといけない。(公式情報)
{legacy:true}に関してはdecoratorは現在Stage2(Draft)の段階にあるが Stage1(Idea)のモードで動作させるという指定になるようだ。

@babel/plugin-proposal-class-properties

https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

これは以下のような普通のクラスプロパティの書き方を使えるようにするプラグイン

class Bork {
  a = "hoge";
  b = () => {}
  static c = "bar";
  static f = function() {}
}

@babel/plugin-proposal-decorators

https://babeljs.io/docs/en/babel-plugin-proposal-decorators これは@anotation構文を使えるようにするプラグイン

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

kurodakazumichi commented 5 years ago

TODO

[ ] -webkitみたいなやつの対応
[ ] polyfill? babel/preset-envのoptionあたり
[ ] webpack-cliではなくnode.jsでタスク書くとか
[ ] PostCSS (https://ics.media/entry/17376#postcss-autoprefixer)
[ ] APBCSS (http://apbcss.com/)
[ ] TypeScriptの導入(https://mae.chab.in/archives/59782)

kurodakazumichi commented 5 years ago

TypeScriptを導入

yarn add -D typescript awesome-typescript-loader
yarn add -D @type/react @type/react-dom

create tsconfig.json

{
"compilerOptions": {
"baseUrl": "./",
"paths": {
  "~/*": ["src/*"],
},
"rootDirs": ["src"],
"outDir": "dist",
"sourceMap": true,
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es6", "es7", "es2018", "dom"],
"jsx": "react",
"allowJs": true,
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"experimentalDecorators": true
},
"include": ["./src/**/*"],
"exclude": [
"dist",
"node_modules"
]
}

update webpack.config.js


resolve: {
alias: {
  '~': path.resolve(__dirname, 'src')
},

extensions:['.ts', '.tsx', '.js', '.json'] }, module: { rules: [
/**
- タイプスクリプトのローダーを設定
*/
{
test: /.tsx?$/,
loader: 'awesome-typescript-loader'
},
{ enforce: "pre", test: /.js$/, loader: "source-map-loader"} ] }

kurodakazumichi commented 5 years ago

Reactでページ遷移するための準備

yarn add react-router-dom
yarn add -D @types/react-router-dom

react-router-domはURLでコンポーネントを切り替えるための仕組みを提供するパッケージ typescriptを使っているので型定義ファイルもいれておく。

https://numb86-tech.hatenablog.com/entry/2017/05/06/125333

kurodakazumichi commented 5 years ago

ReactでLinkを使わずonClickのなかでページ遷移させたい場合

https://qiita.com/junara/items/a4a98c27dc23fd53ebb9 ここが参考になる。

Reactを使ったページ遷移はサーバーにアクセスしに行くわけではなく JavaScriptだけで表示の内容を切り替えている。

react-router-domはブラウザのhistoryを使ってページ遷移をしている。実際にサーバーにアクセスしに行っているわけではないというところが混乱した。

またhistoryを操作してURLを変えているが、サーバーにはindex.htmlしかないわけで本来404を返すところはindex.htmlへフォールバックするという設定をサーバーはしないといけない。

kurodakazumichi commented 5 years ago

Typedocを導入

`yarn add -D typedoc'

https://qiita.com/ConquestArrow/items/eb4a0dfb13497be4d6a3 使い方はここが参考になる。

基本はJSDoc風にコメントを書いておき、コマンド一発でドキュメントが作られる。

kurodakazumichi commented 5 years ago

ClassNamesの導入

yarn add classnames
yarn add -D @types/classnames

kurodakazumichi commented 5 years ago

Storybookの導入

yarn add -D @storybook/react

package.jsonに下記を追加:

{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}
}

カレントディレクトリに.storybookフォルダを作成
設定ファイル.storybook/config.jsを作成:
```
import { configure } from '@storybook/react';
```

function loadStories() { require('../stories/index.js'); // You can require as many stories as you need. }

configure(loadStories, module);

- `../stories/index.js`を作成:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => (
    <Button>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  ));

npm run storybookで起動

kurodakazumichi commented 5 years ago

StorybookをTypeScriptで作られたReactComponentに対応させる

TypeScriptとawesome-ts-loaderはすでに入れてるのでそこから

yarn add -D @types/storybook__react
これはオプションだけどお勧めとのこと
- yarn add -D @storybook/addon-info react-docgen-typescript-webpack-plugin

storybookのwebpack.config.jsを上書き

const path = require('path');
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin');
module.exports = (baseConfig, env, config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('awesome-typescript-loader'),
});
config.plugins.push(new TSDocgenPlugin()); // optional
config.resolve.extensions.push('.ts', '.tsx');
return config;
};

.storybook/tsconfig.json

{
"compilerOptions": {
"outDir": "build/lib",
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es6", "es7", "es2017", "dom"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"moduleResolution": "node",
"rootDirs": ["src", "stories"],
"baseUrl": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"declaration": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "build", "scripts"]
}

storybookを立ち上げっぱなしだと設定が反映されず、ん？ってなるので設定変えたらrerunした方が良い。

これでいける。

kurodakazumichi commented 5 years ago

↑TypeScriptはこれでいけるけど、`sass`使ってるとさらに`sass`の設定も追記が必要

.storybook/webpack.config.jsに追記:

module.exports = (baseConfig, env, config) => {
// Extend defaultConfig as you need.
// Make whatever fine-grained changes you need
defaultConfig.module.rules.push({
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"],
});
}

kurodakazumichi commented 5 years ago

Storybookのaddon

propsを動的に操作できるknobs
- `yarn add -D @storybook/addon-knobs
その他デフォルトっぽいの yarn add -D @storybook/addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes

.storybook/addons.jsを作成:

import '@storybook/addon-knobs/register';

kurodakazumichi / issues

【React + Mobx】環境構築まとめ #51

React + Mobxでのフロントエンド開発環境構築

カリキュラム

思ったこと

TODO

reset-cssの対応

font-awesomeの対応

fontのファイルタイプの違い

SASSの対応

Mobxの導入

@babel/plugin-proposal-class-properties

@babel/plugin-proposal-decorators

TODO

TypeScriptを導入

Reactでページ遷移するための準備

ReactでLinkを使わずonClickのなかでページ遷移させたい場合

Typedocを導入

ClassNamesの導入

Storybookの導入

StorybookをTypeScriptで作られたReactComponentに対応させる

↑TypeScriptはこれでいけるけど、`sass`使ってるとさらに`sass`の設定も追記が必要

Storybookのaddon

kurodakazumichi / issues

【React + Mobx】環境構築まとめ #51

React + Mobxでのフロントエンド開発環境構築

カリキュラム

思ったこと

TODO

reset-cssの対応

font-awesomeの対応

fontのファイルタイプの違い

SASSの対応

Mobxの導入

@babel/plugin-proposal-class-properties

@babel/plugin-proposal-decorators

TODO

TypeScriptを導入

Reactでページ遷移するための準備

ReactでLinkを使わずonClickのなかでページ遷移させたい場合

Typedocを導入

ClassNamesの導入

Storybookの導入

StorybookをTypeScriptで作られたReactComponentに対応させる

↑TypeScriptはこれでいけるけど、sass使ってるとさらにsassの設定も追記が必要

Storybookのaddon

↑TypeScriptはこれでいけるけど、`sass`使ってるとさらに`sass`の設定も追記が必要