仕事ですぐに使えるTypeScriptを読んでいくその67
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考
著作権者：フューチャー株式会社（Future Corporation）様
Next.js（React）の環境構築
Next.js+TSのソースコード
昨日の続きです。
資料ではMaterial UIとTypeScriptを組み合わせるのにstyles関数とwithStyles(styles)の部分が肝となっています。
function styles(theme: Theme) {
return createStyles({
root: {
paddingTop: theme.spacing.unit * 20
}
});
}
--省略--
export default withStyles(styles)(Index);
うーん...
ここまでやってきてやっとMaterial UIをもっと理解した方がよいということがわかってきました。
明日はMaterial UIについて学習してみたいと思います。
今日はここまで。
仕事ですぐに使えるTypeScriptを読んでいくその67
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考
著作権者：フューチャー株式会社（Future Corporation）様
Next.js（React）の環境構築
Next.js+TSのソースコード
昨日途中でよくわからなくなったので分けました。
どうもMaterial UI + TypeScriptの組み合わせが(他と比べて)手間がかかるようだというのがわかってきました。
そもそもindex.tscってなんだっけとなり、いろいろ調べた結果、
エントリーポイントであることがわかったところで、いろいろ足りてないなってのが明らかになった次第です。
参考に書かれているindex.tsx前半部分が何をしているのかはわかるのですが、
import Link from "next/link";
import React from "react";
import { Toolbar } from "@material-ui/core";
import AppBar from "@material-ui/core/AppBar";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import {
createStyles,
Theme,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
withStylesってなんだっけで随分と戸惑ってしまいました。
もう少し理解を深めて次に進めたらなと思います。
今日はここまで。
仕事ですぐに使えるTypeScriptを読んでいくその66
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考
著作権者：フューチャー株式会社（Future Corporation）様
Next.js（React）の環境構築
Next.js+TSのソースコード
Material UIを使うにあたり設定が必要なためサンプルから三つダウンロードする。
ダウンロード後の配置は同じようになるよう配置する。
・src/getPageContext.js
・pages/app.js
・pages/document.js
Material UIのCSS in JSがNext.jsの標準と異なるので、有効化しておかないと表示がおかしくなる。
Next.jsの規約としてはpages以下のファイルがexport defaultでReactコンポーネントを返すとそれがページとなる。
....なんだかよくわからなかったのでこの章はいくつかに分割しようとおもいます。
今日はここまで。
仕事ですぐに使えるTypeScriptを読んでいくその65
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考
著作権者：フューチャー株式会社（Future Corporation）様
Next.js（React）の環境構築
ビルドのツールのインストールと設定
Next.jsは単独で機能するものではなく、react、react-domをインストールする必要がある。
参考ではReactのJSX対応をさせるためにeslint-plugin-reactを追加。
$ npm install --save next react react-dom
$ npm install --save-dev @types/node @types/next @types/react @types/react-dom
$ npm install --save-dev typescript prettier
eslint @typescript-eslint/eslint-plugin eslint-plugin-prettier
eslint-config-prettier eslint-plugin-react npm-run-all
$ npm install --save-dev jest ts-jest @types/jest
公式ではこう書いてある。
TypeScriptを考慮しない場合は非常に簡単に導入ができそう。
npm init -y npm install --save react react-dom next
他の参考では以下のような方法もあった。
npm init -y npm i next react react-dom @zeit/next-typescript && npm i -D @types/next @types/react @types/react-dom
Next.js本家が提供するSCSSを導入し、快適さをあげる。
$ npm install --save-dev @zeit/next-typescript @zeit/next-sass node-sass
Next.jsだけではまっしろい画面が表示されるHTMLになってしまうので、UIパッケージを追加。
$ npm install --save @material-ui/core @material-ui/icons react-jss
tsconfigの変更
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"jsx": "preserve",
"lib": ["dom", "es2017"],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"preserveConstEnums": true,
"removeComments": false,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"target": "esnext"
}
}
.babelrcにも設定変更をする
{
"presets": [
"next/babel",
"@zeit/next-typescript/babel"
]
}
package.jsonの修正
{
"scripts": {
"dev": "next",
"build": "next build",
"export": "next export",
"start": "next start",
"lint": "eslint .",
"fix": "eslint --fix .",
"test": "jest",
"watch": "jest --watchAll"
}
}
eslintrcの修正
{
"plugins": [
"prettier"
],
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:react/recommended"
],
"rules": {
"no-console": 0,
"prettier/prettier": "error",
"@typescript-eslint/no-var-requires": false,
"@typescript-eslint/indent": "ingore",
"react/jsx-filename-extension": [1, {
"extensions": [".ts", ".tsx", ".js", ".jsx"]
}]
}
}
今日はここまで。
仕事ですぐに使えるTypeScriptを読んでいくその64
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考
著作権者：フューチャー株式会社（Future Corporation）様
Next.js（React）の環境構築
作業フォルダを作る
Next.jsではpagesフォルダにあるコンポーネントが自動でRouterに登録されるので、
まずはpagesフォルダを作成する。
$ mkdir pages
npmを作成し公開することはほとんどないことが想定されるため、 npmignoreは不要。
Next.jsの出力フォルダをignoreしておく。
.next
あまり関係ないのだけれど、Next.jsを検索するとNuxt.jsが出てくるのなんとかしてほしい。
今日はここまで。
仕事ですぐに使えるTypeScriptを読んでいくその63
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考
著作権者：フューチャー株式会社（Future Corporation）様
Next.js（React）の環境構築
参考資料ではいろんなツールとの組み合わせの検証の手間を減らすために、Next.jsを使います。ということらしい。
そもそもNext.jsってなんだろうってところからやろうかと思います。
公式
公式によるとPHPの代わりに、JavaScriptとReactを使用してアプリを構築します。ということらしい。
他には
・デフォルトでサーバーレンダリング
・ページの読み込みを高速化する自動コード分割
・単純なクライアント側ルーティング（ページベース）
・ホットモジュール交換（HMR）をサポートするWebpackベースの開発環境
・Expressまたはその他のNode.js HTTPサーバーで実装可能
・独自のBabelおよびWebpack構成でカスタマイズ可能
といったことを主な機能として考えているようだ。
参考資料でもReactの上に作られたフレームワークと書いてあるように、
Reactはシンプルで便利なんだけれども、もう少しカスタマイズして使えるようなのが欲しいなといったところからNext.jsを選択することが多いように見えた。
パッと見た感じチュートリアルが充実しているようなので、こちらを一通り目を通しておくと良さげ。
ただ、チュートリアルを進めるのにGitHubアカウントの連携を求められるのはちょっと確認しておきたい。
参考
今日はここまで。
仕事ですぐに使えるTypeScriptを読んでいくその62
これは
TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。
参考
著作権者：フューチャー株式会社（Future Corporation）様
CLIツール作成のための環境設定
バンドラーで1つにまとめる
npm経由での配布であればバンドルは不要。
TypeScriptで作ったちょっとしたスクリプトをDockerサーバーで動かしたい場合、
軽く動作させたいのでnode_modulesは入れたくないケースが今後増えていくと予想されることから
資料にはその点も触れられている。
バンドラーで一番利用されているのはwebpackだが、小物をビルドするにはBrowserifyが設定ファイルも不要で便利。
BrowserifyはNode.jsのCommonJS形式のコードをバンドルしつつ、
Node.js固有のパッケージは互換ライブラリを代わりに利用するようにして、
Node.jsのコードをそのままブラウザで使えるようにするもの。
Browserifyのインストール
$ npm install --save-dev browserify tsify
low.jsはes5しか動作しない。
tsconfig.json (low.jsを使う場合)
{
"compilerOptions": {
"target": "es5", // もしlow.jsを使うなら
"lib": ["dom", "es2017"] // もしlow.jsで新しいクラスなどを使うなら
}
}
ビルドスクリプト
{
"scripts": {
"build": "browserify --node -o dist/script.js -p [ tsify -p . ] src/index.ts"
}
}
今日はここまで。
