kamiの日記

Webサービスをつくって生きています

メモ

webpack: JavaScript用のモジュールバンドラ。 Entry, Output, Loader, Plugin, Modeの5つの要素からなる

  • Entry: エントリーポイントの設定を行う。エントリーポイントとはモジュール間の依存関係の解析を開始する地点のこと
  • Output: コンパイルされたファイルをディスクに書き込む方法を設定する
  • Loader: デフォルトではJavaScriptJSONのみを処理する。Loaderにより他のタイプのファイル処理を有効にする
  • Plugin: アセット管理など柔軟な処理を行える機構とその設定
  • Mode: 環境を設定する。環境ごとに最適な処理を行えるようになる

-

webpackはv4からwebpack-cliが必須となる。

webpack-dev-server: 開発用のサーバ。検知対象のファイルが変更された際にブラウザを更新する。メモリ上に展開するので高速にアクセスできる(ファイルが作成される訳ではないので注意)

$ yarn init -y
$ yarn add -D webpack webpack-cli webpack-dev-server

下記でサーバを起動する

$ npx webpack-dev-server

-

Reactアプリを書くための最低限のパッケージをインストールする。

  • @babel/preset-env: 環境によって必要なロードを管理してくれる
  • @babel/preset-react: JSXを処理してくれたりする
  • babel-loader: babelのwebpack用プラグイン
$ yarn add react react-dom
$ yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader

.babelrcはBabelの設定を書くファイルで、次のように書く

{
  "presets": ["@babel/env", "@babel/react"]
}

-

webpackの設定ファイル: webpack.config.jsは次のような感じ。 resolveでモジュールの解決方法を設定する

module.exports = {
  mode: 'development',
  entry: './src/index.jsx',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: './dist'
  },
}

-

developmentとproductionでファイルを分ける方法がプラクティスとしてある

ref: https://webpack.js.org/guides/production/

-

TypeScriptを有効にするには以下を追加し.babelrcにも追記する

$ yarn add -D @babel/preset-typescript

-

DefinitelyTyped: 型定義ファイルのリポジトリfooパッケージの型ファイルは@types/fooとなり、コンパイラによって自動的にインクルードされる

$ yarn add -D @types/react @types/react-dom @types/react-redux

メモ

Create React App: Reactのプロジェクトをはじめるためのツール。 yarn create react-app でプロジェクトを生成する

ref: https://github.com/facebook/create-react-app

TypeScriptを指定してはじめることもできる。 その場合 --scripts-version=react-scripts-ts をオプションとして渡す

ref: https://github.com/wmonk/create-react-app-typescript

-

Create React Appで生成したプロジェクトでどう開発していくかが書いてあるUser Guideがある。 コード整形の自動化についてなどが書いてあるので、全体に軽く目をとおすとよさそう

-

Create React Appの例では yarn create コマンドでプロジェクトを生成している。

yarn create: スターターキットから新しいプロジェクトを生成する。 たとえば yarn create react-app foo は次と同様:

$ yarn global add create-react-app
$ create-react-app foo

ref: https://yarnpkg.com/lang/ja/docs/cli/create/

-

Create React Appの依存として reactreact-dom の他に react-scripts というのがある。 これはBabelやESLint、Webpackの設定だったり yarn start のようなコマンドが入ったりしている

ref: https://github.com/facebook/create-react-app/tree/5fecfee2373ebd1eda0c405b82a1c2d24afae6a1/packages/react-scripts

ちなみにReact Nativeで同様のものとしてMetroというものがあるようす

-

Create React AppでTypeScriptを指定してプロジェクトを生成すると images.d.ts というファイルができ、中身は次のようになっている:

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

そもそも .d.ts は型定義ファイルで、TypeScriptに必要な型情報を与えるもの。 images.d.ts は画像をインポートするために必要な型情報となる

ref: https://github.com/wmonk/create-react-app-typescript/blob/2cb3de96e8d0d897b25d6773b835eeaf88ce0f34/template/README.md#adding-images-fonts-and-files

-

Create React AppでTypeScriptを指定してプロジェクトを生成すると、あわせて tsconfig.json というファイルができる。 これはプロジェクトのルートであることを示し、またプロジェクトをコンパイルするために必要な設定などを書いていく

ref: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

うちって無印良品の音楽流せるよね

妻がこのまえ「うちって無印良品の音楽流せるよね」といっていて、流せるというのは流す資格がある、つまり家が無印良品たりえているということなんだけど、見渡してみるとたしかにベッド、ソファ、作業用デスク、椅子、テーブル、テレビ台、本棚、キッチンにあるテーブルx2、その他雑貨も全部無印良品だった。

本当は無印良品にあるアロマも置きたいんだけど、ネコによくないらしく、我が家にはネコとイヌがいるので置いてない。

無印良品の特に気に入っているのがオーク材で、前述の家具類は全部この素材で統一している。

高校の頃はモノクロの無機質な材質のもので統一していたし、大学院に入ってからはダークブラン一色で染めてたんだけど、ここ数年はオーク材にシフトしてる。

無印良品のオーク材のものはこれはこれでいいんだけど、こだわりだすとIDEEとかいう上位互換が異様にほしくなって、これがめちゃくちゃ高価なのでIDEEのWebサイトは見ずに無印良品で妥協している側面がある。

無印良品の音楽を流せる、というのに同意しつつ音楽が流れる我が家をイメージしたくないのはそういう感情があったからなのかな、と全社ミーティングの発表資料をつくりながらなんとなく思った。