Kifu for JS を改造しようぜ☆（＾～＾）
2020-06-17(tue)
「 Kifu for Type Script だろ☆ よく Kifu for JS なんて名乗るよな☆ いつからマイクロソフトの独自実装が幅を利かせてるんだぜ☆ この作者とは友達にはなれない☆」
「 取るに足らない 細かい違いだろう☆」
「 全部 Java Script に書き戻すの？」
「 編集合戦は不毛なんで ブランチで……☆」
「 ↑ 最新の推奨版 nodejs をインストールしておこうぜ☆」
「 パッケージのリストを更新するかだぜ☆」
「 アップデートすると コードが動かなくなるかも知れないが やるなら一発目だぜ☆」
「 というか もう ncu -u を叩いたよな☆ -u オプションをまだ付けてはいけないのに……☆」
「 deprecated deprecated deprecated ……、舐めてる……☆」
「 アップデートするから……☆」
「 ↑ 一体何が……☆」
「 何がもカニがも アップデートなんかするからよ！」
「 Kifu for JS の作者に合わせてアップデートしないという選択肢は わたしには無いぜ☆ そんな足並みを揃えるプログラマーとはわたしは友達にはなれない☆
プログラマーの敵は仲良しごっこだぜ☆
書きかえたろ☆」
「 ↑ コマンドラインが ぱっと見 Linux系 みたいに見えるが Windows のコマンドラインに 書きかえてみるか……☆」
「 なんで マイクロソフト系のOSに書きかえてしまうんだぜ……☆ Windows Power shell とかいう もっさりした延命を続ける遺物☆」
「 ↑ 頭に node と付けたらどうだぜ☆？」
「 ↑ わたしは もうダメかも知らん……☆」
「 インストールの案内が出てるわよ！ npm i -D webpack-cli と打ちなさい！」
「 ↑ さて、どうなったか……☆」
「 お父んが アップデート したせいだと思う☆
CleanWebpackPlugin は昔はコンストラクターだったが、今はコンストラクターじゃないんだぜ☆」
「 調べて直したろ☆ 低バージョンに 足並みなど揃えていられない☆」
「 ↑ ここが公式だろうか……、知らんけど……☆」
https://webpack.js.org/guides/development/#using-watch-mode
「 ↑ このページに何か書いてるぜ☆」
「 ↑ Visual Studio Code では操作のヒントが出てくるから 見逃すなだぜ☆ [Ctrl] + クリック で問題個所に飛べるぜ☆
トップ・ディレクトリーに置いてある webpack-dev-server.js の書き方に deprecated か何かが混じってるんだな☆」
「 ↑ こうすりゃいいのかだぜ☆？ 知らんけど……☆」
「 CleanWebpackPlugin はコンストラクターではないと言ってるのに……☆」
「 ↑ じゃあ デストラクチャー して、こうか☆」
「 HtmlWebpackPlugin とか要らんもん付けたと思う☆」
「 それも消す☆ npm run start ☆」
「 うわっ☆！」
「 目の前をブラウザが飛んできたんだけど！」
「 よくある ローカルホストに立ったWebサイトだぜ☆
しかし ディレクトリが見えていて かっこ悪いな……☆」
「 セキュリティ意識とは☆」
「 ↑ エラーがいっぱいある……☆」
「 お父んが アップデートしたからな☆」
「 ↑ なんで モジュールが見つからないんだぜ☆！ development モードじゃないというのかだぜ☆！」
「 そうなんじゃないの？」
「 [Ctrl] + [C] で サーバー止めて……☆」
「 npm run build ……☆ 今度は何だぜ☆！」
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
「 ↑ もう削除されてるプラグインを使ってんじゃないの？」
「 こんな deprecated コードばっか残して……☆ 最終更新日はいつだぜ☆！」
「 ８日前だぜ☆」
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
https://webpack.js.org/configuration/optimization/
「 ↑ 公式ページ見ても何の参考にもならん……☆ 難読化コードなんじゃないか☆？」
「 ↑ common.plugins.push(new webpack.optimize.UglifyJsPlugin()); をコメントアウトするのは確定として……☆
please use config.optimization.minimize instead. がどうすりゃいいのか分からん☆ 別に 難読化しなくてもいいか……☆」
「 ↑ エラーが取れんなあ☆」
「 お父んが アップデートするから……☆」
Cannot find module babel-preset-es2015
「 ↑ 現象が似ている記事はこれか……☆」
npm install --save-dev @babel/preset-env
# Deprecated.
# npm install --save-dev @babel/preset-es2017
「 ↑ 変化なし……☆」
「 ↑ この２行を消してみるかだぜ☆？」
「 やるしか☆！」
「 ↑ .babelrc にもあったのでコメントアウト☆」
「 ↑ エラー・メッセージが変わったぜ☆」
Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.
「 ↑ 対応方法は調べりゃ出てくるぜ☆」
npm install --save-dev @babel/plugin-proposal-decorators
「 ↑ どんどん勝手に書き換え☆」
「 ↑ はい、エラー☆」
Error: Multiple configuration files found. Please remove one:
- package.json
- C:\Users\むずでょ\source\repos\kifu-for-js\.babelrc
「 ↑ 設定ファイルが複数あるから、どっちか１つ消せって言ってるわよ？」
「 じゃあ .babelrc 消そうぜ☆」
「 ↑ はい、また別のエラー☆」
Error: Cannot find module 'babel-preset-react-app' from 'C:\Users\むずでょ\source\repos\kifu-for-js'
「 ↑ お父んが消したファイルに書いてあったやつだぜ☆」
Cannot find module babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray #7183
「 ↑ 調べるか……☆」
npm add @babel/runtime
「 ↑ 変化なし……☆」
npm install babel-preset-react-app
Output:
ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\むずでょ\source\repos\kifu-for-js\src\index.tsx: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and
"production". Instead, received: undefined. (While processing: "C:\\Users\\むずでょ\\source\\repos\\kifu-for-js\\node_modules\\babel-preset-react-app\\index.js")
「 ↑ エラーメッセージが変わったぜ☆」
Cannot find module babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray #7183
export NODE_ENV=development
export BABEL_ENV=$NODE_ENV
「 ↑ おっと、これは Linux系の書き方だぜ☆」
set NODE_ENV=development
set BABEL_ENV=%NODE_ENV%
「 ↑ あれっ？ 効かねっ☆？！」
「 お父んが使っているのは クソ・ターミナル Power shell なんで☆」
$NODE_ENV = "development"
$BABEL_ENV = ${NODE_ENV}
「 ↑ 全く 効き目なし☆」
「 Windows ユーザー向けの情報が足りてないぜ☆」
「 お父んが Windows なんか使ってるから……☆」
BABEL_ENV issue when running npm test in React App
「 ↑ Linux系と互換しなくなるが、Windowsの書き方をベタ書きで 乗り越えるぜ☆」
「 あーあ、Windowsに依存するクソ・コードだぜ☆」
「 プル・リクエストはお断りのやつね」
ERROR in ./src/Kifu.tsx
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for C:\Users\むずでょ\source\repos\kifu-for-js\src\Kifu.tsx.
at makeSourceMapAndFinish (C:\Users\むずでょ\source\repos\kifu-for-js\node_modules\ts-loader\dist\index.js:88:18)
at successLoader (C:\Users\むずでょ\source\repos\kifu-for-js\node_modules\ts-loader\dist\index.js:74:9)
at Object.loader (C:\Users\むずでょ\source\repos\kifu-for-js\node_modules\ts-loader\dist\index.js:25:5)
@ ./src/index.tsx 9:0-26 29:33-37
「 ↑ エラーは まだまだ あるぜ☆」
tsconfig.json:
"noEmitOnError": false,
「 ↑ true を false に変更☆」
ERROR in ./src/Kifu.tsx
Module not found: Error: Can't resolve 'react-dnd-multi-backend/lib/HTML5toTouch' in 'C:\Users\むずでょ\source\repos\kifu-for-js\src'
@ ./src/Kifu.tsx 21:0-68 150:48-60
@ ./src/index.tsx
react-dnd-multi-backend looking for cjs on latest version (v4.0.0) #34
「 ↑ そんなものは無い系のエラーだぜ☆」
「 お父んが アップデートするから……☆」
「 こんなん使い続けてるんだったら 最近のコード知らんのだろう☆」
「 ↑ 最近のコードをキャッチアップしたいところだが、大改造は嫌なんで レガシーを調べるぜ☆」
import HTML5toTouch from 'react-dnd-multi-backend/dist/esm/HTML5toTouch';
「 ↑ ひとまず ESM へ逃げる☆」
WARNING in ./node_modules/react-dnd-multi-backend/dist/esm/HTML5toTouch.js 9:13-25
"export 'TouchBackend' was not found in 'react-dnd-touch-backend'
@ ./src/Kifu.tsx
@ ./src/index.tsx
「 ↑ エラーメッセージが変わったぜ☆」
「 ↑ Kifu for JS がいつのバージョンの書き方してんのか 出てこないな☆」
「 まるごと 一から書き直すか、棋譜をドラッグ＆ドロップする機能を消すか……、よし、消そう☆
こんなクソ・コードの面倒を見ているメリットがないぜ☆」
WARNING in ./src/index.tsx 29:33-37
"export 'default' (imported as 'Kifu') was not found in './Kifu'
ERROR in C:\Users\むずでょ\source\repos\kifu-for-js\src\index.tsx
[tsl] ERROR in C:\Users\むずでょ\source\repos\kifu-for-js\src\index.tsx(9,8)
TS1192: Module '"C:/Users/\u3080\u305A\u3067\u3087/source/repos/kifu-for-js/src/Kifu"' has no default export.
「 ↑ 次のエラー☆」
Module 'xxx' has no default export.といわれるとき
// import Kifu from "./Kifu";
import * as Kifu from "./Kifu";
「 ↑ 書きかえて逃げる☆」
ERROR in C:\Users\むずでょ\source\repos\kifu-for-js\src\index.tsx
[tsl] ERROR in C:\Users\むずでょ\source\repos\kifu-for-js\src\index.tsx(35,21)
TS2604: JSX element type 'Kifu' does not have any construct or call signatures.
「 ↑ 次のエラー☆」
JSX element type does not have any construct or call signatures in v3.2.0-rc #28631
「 ↑ そろそろ 調べる時間が無くなってきたな……☆」
「 ↑ 勘で export 付けたろ☆」
「 ↑ エラーが出ているのでコメントアウト☆」
「 ダメだぜ、動かない……☆」
2020-06-18(wed)
「 ↑ React の仕様を読もうぜ☆？」
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);
「 ↑ 本来は これぐらい簡単な書き方をするらしいぜ☆」
「 しかし Kifu for JS は TypeScript なんで 別の知識が要るぜ☆」
「 ↑ 適当に書きかえて実行してみようぜ☆？」
「 ↑ このディレクトリーが出てくるのは何なんだぜ☆？」
「 知らね☆」
「 ↑ Webpack というフレームワークに全てを丸投げしているようだから、その設定ファイルと思う webpack.config.js に
エントリー・ポイントが書かれているだろ☆
この設定ファイルは TypeScript ではなく JavaScript であることから、Webpack の仕事は TypeScript を JavaScript に変換することだと思うぜ☆」
「 したがって webpack.config.js から辿れるはずで、 ./src/index.tsx は、ブラウザでアクセスしたときに表示されるページを担当していると予想を立てるぜ☆」
「 ↑ で、 ./src/index.tsx を見てみると さっき分からん、と思っていたファイルだぜ☆」
「 じゃあ お父んは 玄関開けたら すぐ分からん かだぜ☆？」
「 それで なんで ディレクトリーのリストが出てくんの？」
「 まったく分からないぜ☆」
「 ↑ webpack-dev-server.js --open に丸投げしているので、こいつが何をやっているかだぜ☆」
「 ↑ HTMLソースから逆探知したろ☆」
「 ↑ Java Script が難読化コードになってないから、React は動いてないんじゃないの？」
「 お父んが 壊したのかも知れない☆」
.icon-application-javascript
「 ↑ 特徴的な文字列で、 Cドライブ全体を検索な☆」
「 すぐには見つからないようだな☆」
「 npm run start すると webpack-dev-server.js --open が走って、上図の２つの Node.js: Server-side JavaScript というのがスポーンされてくるんで、
こいつらがやってるに違いないぜ☆」
「 Google クロームがやってるかも……☆」
「 ↑ Firefox でも Google クロームでも同じで、 React は動いていないとすると NodeJS のデフォルトのエラー画面かだぜ☆？」
「 デフォルトで ディレクトリー・リストを表示されたら 大惨事よ！」
「 404 Not Found なのか、 Internal Server Error なのかなんなのか 表示して欲しいよな☆」
「 ログは どこかに残されていないのかだぜ☆？」
「 他人のフレームワークなんか知らね☆」
「 ↑ 無いもんが どうやって出てくるんだぜ☆？」
「 ↑ webpack-dev-server が悪いんじゃないか☆？ 何をしてるんだぜ こいつは☆？」
「 ↑ この不愉快なセッティングを見直すかだぜ☆」
「 書き方がぜんぜん違う☆」
「 webpack-dev-server は必要なのかだぜ☆？」
「 さあ……☆？」
「 これ以上 Kifu for JS の不快なコードと付き合うのは嫌なので、 React を一から書き直そうぜ☆」
「 ↑ w3css を使って、ふつうの書き方を覚えようぜ☆？」
npm install -g create-react-app
「 ↑ react をインストール☆」
npx create-react-app myfirstreact
「 ↑ いわゆるプロジェクトを作成☆」
cd myfirstreact
「 ↑ プロジェクト・ディレクトリに降りて……☆」
- /package-lock.json ファイルの削除
- /node_modules フォルダーの削除
- packages.json のリストから
babel-jestパッケージを除外
npm install
「 ↑ packages.json に書いてあるパッケージをインストール☆」
「 ↑ http://localhost:3000 にアクセス、はい、画面が出た☆ これぐらい さくっと できるもんだぜ☆」
「 ↑ ソースコードを編集して保存すると Webサイトにもすぐ反映されるぜ☆
Python flask や nodejs を使った今どきの Webサーバーという感じだぜ☆」
「 これで レガシーを用いた 苦労や 努力の安物のぼったくりから 開放されるぜ☆
苦労、努力に評価は一切 認めないぜ☆ 友だちごっこや オリジナリティ有る村の掟づくり は無しで☆」
「 ↑ この <App /> というやつが さっきの function App() と何か関係あるんだろ☆」
「 ↑ なるほど☆ これは Facebook も生産性が上がるというものだよな☆」
「 Kifu for JS は けなしてたのに……☆」
「 ↑ Java Script の中に クォーテーション無しで HTMLタグみたいなやつを直接書けるみたいだぜ☆
ECMAScript のパーサーはどうなってんだろな☆？」
「 ↑ なるほど、 getElementById('root') というのは <div id="root"></div> に対応しているのかだぜ☆」
「 <App /> も function App() の中身のことで、その中身は HTML みたいだったから、
HTMLのコードを そのまま放り込んでるのと同じじゃないの？」
「 テンプレートだよな☆ Jinja2 と React、 どっちが便利かな、みたいな……☆
そういえば 会社は nodejs 嫌いだったから React 使えないな☆ やはりプログラムを覚えるなら独習だぜ☆」
「 金に結びつかないスキルばかり伸ばして……☆」
「 ↑ JavaScript の中に HTMLのタグみたいなのを打ち込んでるのは XMLのタグで、 JSX という名前の技術のようだな☆」
App.js:
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';
ReactDOM.render(<Car />, document.getElementById('root'));
「 ↑ これだけ書きゃ、HTMLの <Car /> タグのように振る舞うテンプレートとして使えるはずなんだぜ☆」
「 ↑ Props の説明もあるぜ☆」
const myelement = <Car brand="Ford" />;
「 ↑ こんな感じで <Car /> に Ford という文字を渡したいときは、brand という名前を付けて……☆」
class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand}!</h2>;
}
}
「 ↑ Java Script の方で this.props.brand と書けば Ford という文字を受け取れるという仕組みだぜ☆」
「 理解したか☆」
「 理解したぜ☆」
class Car extends React.Component {
render() {
return <h2>I am a {this.props.brand}!</h2>;
}
}
class Garage extends React.Component {
render() {
const carname = "Ford";
return (
<div>
<h1>Who lives in my garage?</h1>
<Car brand={carname} />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
「 ↑ ２段渡しするときは、ダブル・クォーテーションを省くことに注意しろだぜ☆ 分かりきっているものは省くということだろう☆」
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a Car!</h2>;
}
}
ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));
「 ↑ constructor があるときは、 props はこう書け、というサンプルだぜ☆」
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}
「 ↑ JSXの中で変数を使いたいときは、state という名前の変数を作る習わしらしいぜ☆」
「 で、ドラッグ＆ドロップ は どう書くの？」
「 w3cschool では触れられていないので、React の公式を探すかだぜ☆」
「 別に 独自実装でも できるんだけどな☆」
「 ↑ 2015 年にはもう やってる人がいるな☆」
How to Implement Drag and Drop Feature for Your React Component
「 ↑ いくつか候補を調べておこうぜ☆」
How To Use The HTML Drag-And-Drop API In React
「 ↑ 楽なやつを選ばないとな☆」
The ultimate guide to drag and drop in React
「 ↑ どれが一番か 分からんな……☆」
2020-06-21(sun) 17:00
「 何してたっけ☆？」
「 ドラッグ＆ドロップは React の標準的な方法がないから、ライブラリを探していたんだぜ☆」
https://react-dnd.github.io/react-dnd/about
「 ↑ Kifu for JS が使ってるのは React DnD かだぜ☆ Kifu for JS の作者より上手く使ったろ☆」
「 ↑ この画面は Kifu for JS が表示されているのかだぜ☆？」
「 再利用せずに １から 書き直した方が 速いんじゃないの？」
「 時間を掛け過ぎだし、そうするぜ☆」
「 一からダウンロードして ビルドしてみたが 失敗した☆ どの道ダメだったようだぜ☆」
＜おわり＞
光速のアカウント凍結されちゃったんで……。ゲームプログラムを独習中なんだぜ☆電王戦IIに出た棋士もコンピューターもみんな好きだぜ☆▲(パソコン将棋)WCSC29一次予選36位、SDT5予選42位▲(パソコン囲碁)AI竜星戦予選16位
Crieitは個人で開発中です。
興味がある方は是非記事の投稿をお願いします！ どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください！