.noviceish_history/

自転車・PC・読書感想。

一体僕達はどのようにしてimmutable.js+TypeScriptの環境を運用すれば良いのか

JSクソだと言い続けてはや幾月、僕です。

モダン開発環境おじさん「React+Redux+Typescript+immutable.js環境は良いぞ。」

K「向上心の無いやつは馬鹿だ」

とはよく言われますが、immutable.jsとTypescriptを併用しようとするとかなりめんどくさくなることに、取り返しのつかなくなった時点で気づくことがあるというのはよく知られています。でもその割にネットに情報はあまりないです。

素晴らしくモダンなimmutable.jsがTypescriptと相性悪いなんてあるわけないやろwwwと僕も最初は思っていました。

では以下のオブジェクトを見てみましょう。

const o = {
    name: 'arark',
    playerId: '0001',
    level: 23
}

これを型付けするのは簡単です。

interface user {
    name: string
    playerId: string
    rank: number
}

じゃあこれはどう型付けしましょう

import { Map } from "immutable";
const m = Map({
  name: "arark",
  playerId: "0001",
  level: 23
});

そう。。。めっちゃ面倒くさいのです。そもそも自分で定義しなくても型推論してくれるもんだと思ってたし。 immutable.jsでは以下のような問題が発生します。

import { Map, fromJS } from "immutable";

// JSのオブジェクトの場合
interface user {
  name: string;
  playerId: string;
  level: number;
}
const o: user = {
  name: "arark",
  playerId: "0001",
  level: 23
};
const name_mutable = o.name //stringと推論される(型付けしなくても)
const level_mutable = o.level // numberと推論される(型付けしなくても)
const none = o.none // エラーになる

// 普通のimmutable.Mapの場合
const u = Map({
  name: "arark",
  playerId: "0001",
  level: 23,
});

const name_immutable = u.get("name"); //string | numberになる。stringと推定してほしい
const hoge_immutable = u.get("hoge"); //string | numberになる。エラーにしてほしい。

このように明らかにJSのオブジェクトとは異なる動きをします。幾つか解決策は見つかっていて 一つは自分でgetなどのメソッドの型定義をオーバーライドすることです。*1*2

interface User {
  name: string
  address: string
  phoneNumber: number
}

interface ImmutableMap<T> extends Map<string, any> {
  get<K extends keyof T> (name: K): T[K];
}

type UserMap = ImmutableMap<User>

const user: User = {
  name: 'yuki',
  address: 'tokyo',
  phoneNumber: 8108012345678
}
const userMap: UserMap = Map(user)
const n = userMap.get('name') // stringと推論される
const age = userMap.get('age') // エラー

これは期待した通りに動き、問題も無いように思えます。しかし他にもある setIn, updataIn, mapなどのメソッドを使っていくたび新しく定義しなければいけないと考えるとかなり手間です。

もうひとつは

blog.mayflower.de

にあるように

import {Map, List} from 'immutable';

type AllowedValue =
  string |
  number |
  boolean |
  AllowedMap |
  AllowedList |
  TypedMap<any> |
  undefined;

interface AllowedList extends List<AllowedValue> {}

interface AllowedMap extends Map<string, AllowedValue> {}

export type MapTypeAllowedData<DataType> = {
  [K in keyof DataType]: AllowedValue;
};

export interface TypedMap<DataType extends MapTypeAllowedData<DataType>> extends Map<string, AllowedValue> {
  toJS(): DataType;
  get<K extends keyof DataType>(key: K, notSetValue?: DataType[K]): DataType[K];
  set<K extends keyof DataType>(key: K, value: DataType[K]): this;
}

const createTypedMap = <DataType extends MapTypeAllowedData<DataType>>(data: DataType): TypedMap<DataType> => Map(data) as any;

などと複雑な型定義をすることです。

「ファック!!!!!!!!!!俺は開発をしたいんであって型定義をしたいんじゃんねえええええええええ型付けなんて小学生のころにCで卒業したぜ。この時代で型付けしてるのはcountrysideでビックマック食ってるサクラエディタおじさんだけだろうさHAHAHA」

というのは至極まっとうな意見であって、実際僕もそう思います。ここまでくるともはやimmutable.jsが開発の邪魔になってくることさえ有ります。

そんな悩みに対する回答を、私はstackoverflowの奥地で見つけました。

stackoverflow.com

この一文に注目してみましょう

we converted to immer and we don't want to look back.(中略)We are happy.

そう、わざわざimmutable.jsなんて使いづらいものを使う必要はなかったということをこのコメントは気づかせてくれました。

このTypescriptとの不親和は本家リポジトリでもつとに指摘されていることではありますが、以下のissueに見られるように、なかなか改善される見込みはありません。 Immutable.js is essentially unmaintained · Issue #1689 · immutable-js/immutable-js · GitHub immer.jsに乗り換える人も多いようです。

僕?僕は使いません。もはや戻れないところまで来てしまったからさ......

word死すべし慈悲はない

wordの悪口で一晩明かせるとうそぶく漢、僕です。レポートでoffice製品を強要されて腹がたったので悪口を書いていきます。そして東工大は工業大学を名乗るのをやめろ。

テキストファイルじゃない

もうこれが全にして一、一にして全。microsoft第二の失敗、ソフトウェア界のapple pencil(第一世代)、Magic Mouseの後継、最後に書き足された蛇の足、ネタバレ絵をRTするアホ、e-tax誕生の遠因などと言われています。ちなみにmicrosoft最大の失敗はwindowsです。全ての悪は.docxがバイナリファイルだということに起因しています。

エディタが選べない

テキストファイルじゃないのでエディタが選べません。これがプレーンテキストだったらどんなに良かったことか・・・。特にwordの数式記述は東工大の学内システムの如くクソなので、使っているうちに不満がたまり、レポートを書く気力がゴリゴリ削られていきます。

構造とデザインの分離ができない

wordは典型的なWYSIWYGエディターです。だから見出しを太字にしただけで見出しになったと勘違いしてる奴がいます。というかそういうやつしかいません。太字は!!!!!見出しじゃ!!!!!!ない!!!!!!! 見出しはアウトラインで階層的に表示される、メタ的に意味づけされた物のことを言うんじゃボケ!!!!!!!!wordでちゃんと階層的に文書を作ろうとすると、マウスとキーボードの往復でストレスしかたまりません。いちいち「新しい小見出しを作成」なんてクリックさせてんじゃね〜〜〜〜〜〜〜。

構造とデザインの分離が出来ないとどういうことになるかと言うと、「太字部分の書式一括で変えたいな〜」って思った時に出来ません。一つ一つ自分で書き換えていくしかありません。いやホントは出来るのかもしれん。でもそもそもテキストファイルであれば簡単に出来たことをわざわざ難しくしないでくれ。それにWYSIWYGだからコピペが死ぬほど無理。

wordで図形とかコピペしようとすると(そもそもテキストエディタで図形を書かせるなと言うのはある)大体崩れますよね? 自社製品のファイル間くらい!!!!!簡単に!!!!コピペ出来るようにしろ!!!!!

これがhtmlだったりmarkdownだったら<h1>#だけで見出しになります。表示を変更したかったらテキストじゃなくて出力プロセッサの方を変えれば良い。webで言えば、htmlじゃなくてCSSを変えればいい。html+CSSがwordだと思ってください。h1などのマークアップタグを使わずにpタグのインラインCSSのみで書かれた文書がwordです。どうです?クソエディタオブザワールドじゃないですか?

文を書く以外のことが出来てしまう

wordだと図形を書けます。アホか!!!!!なんでテキストエディタで図形書かなきゃいけないんじゃ!!!!!かけるんだったらちゃんと文の回り込みとか設定しやすくしろや!!!!文章の回り込み回避のために連打された改行のせいで何度レイアウト崩れに涙をこらえたか。

wordで図形が書けるせいで、一体どれだけの学生がコピペが出来ないことに悩まされたか課題をだす教授側はわから無いんでしょう。コピペ不可の表紙を使うことを強制してる電気電子系、お前やぞ。そして東工大は工業大学を名乗るのをやめろ。

数式記述がクソどころじゃない

wordで数式を書こうとします。 リボンから数式をクリック→上付き文字、下付き文字などの中から求める構造をクリック→数字を入れる。ギリシャ文字の場合リボンから選ぶ→更に複雑な構造の場合永遠ループ

う、う、うぜ〜〜〜〜〜〜💢💢💢幸いにして、wordでは一部のtex記法がサポートされています。ですがそもそもtexも書きづらいので、多少のストレスを緩和するだけで、やはりストレスが貯まるし、もはやtexで良いです。

gitで管理できない

別にgitじゃなくてもいいです。なんか一般ユーザに優しいVCSがあればそれでもいいです。いかに優れたVCSであろうとも、対象がバイナリファイルになってしまってはバージョン管理するメリットがなくなります。このせいでいくつreport_v1.docx, report_v1_rev.docx, report_v1_rev_checked.docxなんて言うファイルが生み出されたことか・・・。それはそれとしてdocxの改訂にはセマンティックバージョニング(的なもの)使えや!!!!!!

OSが限定される

Windowsを使っている人の8割は家族を人質に取られているというのは有名な話ですが、一部のレジスタンス(他OS)では実質wordファイルの編集が出来ません。できるだけwindowsと距離を置きたいことを主目的として生活している僕のような人にとってはエディタどころかOSも制限されるのはもはや人権侵害。macはどうなんだろう。あんまり不具合とか聞かないので最近は完全に互換性があるのかも知れません。

じゃあどうすればいいのさ

pandocを使いましょう。

qiita.com

ただこれでも完全じゃなくて、ギリシャ文字などが文字化けしてしまうことがあるので結局wordを使ってます。頼むからwordじゃなくてPDFもOKにしてくれ。

東工大は工業大学を名乗るのをやめろ。

「OPPO Reno A 」のレビュー:コスパ最高の日本向け中華スマホ

OPωPO ←Reno Aのコスパの高さに嗚咽を抑えられないOPPO

Too long;Don't read

みなさん財布使ってますか?今すぐ捨てましょう。

最近は政府がキャッシュレス決済を推進してくれているおかげで、だいぶ色々な所でキャッシュレスでお買い物ができます。僕のバイト先もPayPayが使えるようになりました。

でもQRコード決済はなぁ~~~個人情報おもらしするし(〇Pay)、特典もおにぎり2個だけだし(7〇ay)、競合が多すぎてすぐつぶれそうだし(7P〇y)、使える場所もコンビニ1社しかなさそう(7 P a y)。って思ってる人多いと思います。

ただSA行ったときに気づいたんですけど、QuicPayとかiDとかそこら辺の非接触決済は対応してるってとこも多いんですよね。じゃあFelica搭載端末買うかってなったところでスマホを探すとします。するとこんな感じのスマホがどさどさ出てきます。

f:id:arark:20191007215258p:plain
なんじゃこのCPU!?
f:id:arark:20191007215514p:plain
なんじゃこのメモリ!?(arrows U)
f:id:arark:20191007215935p:plain
貧弱ぅ!(AQUOS sense2 SH-M08)

スマホのCPUに詳しくない人はSDMをGTXに置換した感覚でそんなに違いはありません。

まぁあえて貧弱スマホを選びましたが、同価格帯にはHUAWEIOPPOASUSなど海外の高コスパメーカーがひしめく中でわざわざこんなスマホを選ぶのはちょっと刺身にタンポポ載せる仕事を強制されるくらい人権を奪われた気になります。高性能かつFelica搭載なものもありますが大体フラッグシップなので10万くらいします。

Felica機って大体両極端なんですよね。

「もっとこう・・・全部そこそこの性能で、使ってて不満がないスマホはないのか・・・」

あ り ま す

OPωPO

ここでOPPO Reno A 128GBの性能を見てみましょう。

パーツ スペック
CPU SDM710
RAM 6GB
ROM 128GB(実質105GBくらい)
バッテリー 3600mAh
認証 画面内指紋、顔
ディスプレイ 有機EL(水滴ノッチ)
Felica もちろん搭載
ちなみに 保護フィルム、ケース付き

これで\38,800です。素敵スペックですね。ちなみにこれは予想外だったんですが、なんと販売開始1分でSIMフリー版は売り切れました。Twitterではあんまり盛り上がってなかった気がするのになんでだ・・・。

使ってみて

とにかくストレスフリーです。Google PayでSuicaが使えるのでわざわざ財布から出す必要なし。コンビニではQuicPayで爆速会計。自販機もいけます。有機ELは発色が綺麗で、前のスマホ(p10 lite)と比べてみると明らかに彩度に差がありました。

保護フィルムもケースもついてくるので余計な出費はなし。来てすぐ使い始められます。 唯一の欠点はちょっとでかいこと。女性はきついかも?まぁ不満に思うほどではないし、画面分割で使えるスペースが増えたので良しとしましょう。

カメラ

Oppoはカメラを推してるスマホメーカーなので写真も見てみましょう。写真はブログに直貼りしてて画質落ちてるので、解像感とかは参考程度に見てください。

f:id:arark:20191008180329j:plain
RenoA多分夜景モード
f:id:arark:20191008175722j:plain
P10lite
さすがにp10 liteと比べると雲泥の差ですね。p10liteだと暗いところがつぶれているのがRenoAだとちゃんと見えます。 もうちょっと夜景モードを見てみましょう。

f:id:arark:20191010053801j:plain
夜景モード無し
f:id:arark:20191010053943j:plain
夜景モードあり
f:id:arark:20191010053847j:plain
なし
f:id:arark:20191010053835j:plain
あり
f:id:arark:20191010053911j:plain
なし
f:id:arark:20191010053859j:plain
あり

かなり夜景モードが効いてますね。黒でつぶれてるところや、光がにじんでるところがくっきり映ってます。

夜景モードのほかにもポートレート、パノラマ、エキスパート(exposureとWBとAFとEVをいじれる)、タイムラプス、Google Lensモードがあります。

ついでに10倍までズームできたので一応撮ってみました。

f:id:arark:20191008180738j:plain
10倍ズーム
まぁこんなもんでしょう。P30proが異常なんや!

僕は最後列から板書を撮れる能力があればそれで満足です。

ゲーム性能

僕はFGOをやってるんですが、明らかにロードも描写も速くなりました。"天地乖離す開闢の星"も、”星馳せる終幕の薔薇”もカクつかないだと・・・?

手動ですが、ローディング時間計測しました。3回やって平均とってます。一括DL済。

場面 時間
アプリ起動→ロード終了まで 11.6秒
種火開始→ロード終了まで 12.7秒

すごい!はやい!って言いたいけどこう見ると種火のロード結構長いな・・・。p10 liteだったらもっと長いのか・・・。

便利機能として、ゲーム中にピクチャーインピクチャーでLINEの返信ができます。キーボードもフロートしてるのでつかいやすいf:id:arark:20191008202328p:plain メモリが6GBもあるので色々他のタスクやってからFGOつけても落ちてないです。ブラウザで攻略見てtwitterやって戻ってきてもまだ生きてる。え?まだキルされて無かったの!?ってことがまま有ります。あとゲーム中熱くなることはないです。こういうちょこちょこ便利な所が結構うれしい。

認証

期待していた画面内指紋認証ですが、顔認証があるのでそんなに使いません。持ち上げたらもうロック解除されてるので。

レスポンスも、指紋だと一拍挟んでから認識される感じでちょっと遅いです。場所が触覚でわかるわけじゃないからちょっと迷うってのもあります。

でもロマンあるからOKです!

キャッスレス決済

これに関してはRenoAのレビューではありませんが・・・。

google payにカードを登録するとこんな感じでリストアップされて、色んな決済方法が使えます。

f:id:arark:20191011124435j:plain
google payの画面

買って間もないので非接触決済のみ対応してる店にはまだ行ってませんが、多分大幅にキャッシュレスで会計できる店が増えてると思います。

ただGoogle Payに登録したLINE PAYカードを登録したQUIC PAYで支払うというこのわかりづらさはなんとかならないのか。

サイクリストに最適

僕は自転車乗るんですが、おサイフケータイ+防水防塵のRenoAは実はとってもサイクリングに合うんですよね。サイクリングに行くときは背中のポケットに、スマホと現金をジップロックに入れて走るんですが、小銭があるとじゃらじゃらして出しづらいし違和感もある。

その点RenoAは現金いらずでコンビニで補給食買えます。QRコード決済でも現金いらずで買い物できるんですが、いちいちジップロックから出すのがめんどくさい。google payなら非接触でとってもスムーズです。防水なので突然の雨でも安心という至れり尽くせりの仕様。

まとめ

発売前は普通にこのスペックだったら5万してもおかしくないと予想していたのでかなりお手頃感があります。少なくともpixel3aと同じかそれ以上だと思ってました。

キャッシュレス決済も、政府がでかいキャンペーンをうってることと、セブンイレブンQRに対応したことでようやく完全移行の土壌が整った感じがします。

よっしゃ~~~~~キャッシュレスで買い物しまくるぜ~~~~~~。

あれ?

f:id:arark:20191008190137j:plain
口座残高
お前…消えるのか…?

Github実践入門 をよんだ

なーんか感覚でcommitしてんな〜〜って人、いますか? 感覚でcommitをするな。

とは言ってみたものの、この本にcommitの粒度が詳しく解説してあるわけではないです。できるだけ細かく。コミットメッセージ以外のことはやらない、と書いてあるくらい。

この本はあくまでGithubの使い方であって、Gitの使い方ではないので基本くらいは知っておきましょう。あと当たり前のようにシェルとコマンドも使えるようになっておきましょう。windowsに救いはありません。これなんかおすすめ。

arark.hatenadiary.jp

個人で開発してるとgitの使い方良くわかんなくなりますよね。え、私のコミット、汚すぎ・・・?

ブランチがなんぼのもんじゃい。漢はmaster一本よ。とばかりに執拗にmasterにcommitしてる人もいるでしょう。やめようね!

また、本文に書いてあるように、gitの使い方はProGitを読むと知識が補完しあっていい感じに読み進められます。猿でもわかるgitとかどこの新入社員が書いたとも知れないGit入門などという記事を読むと時間の無駄になります。ProGitを読め。この機会に今まで曖昧だった理解を直せてよかった。

初版がちょっと古いのでUIの解説とかは今のと違いますが、まぁ本質的に差はそんなにありません。

内容としてはやっぱタイトルにもあるようにプルリクを重視したものです。他にも、issueの使い方が書いてあったのがとてもためになりました。

issue立てる!?ベテランかお前みたいに思ってたんですけど案外そんなことはないんだと知りました。commitメッセージに#1とか書くと対応issueへのリンクになるとか、へぇ〜〜って感じです。

github-flowの使い方もためになりました。github-flowはデプロイ中心のスタイルだからCIツールを使ってテスト自動化しようね。とか知らなかった。travisCIの使い方も簡単に紹介してくれたので便利。今だとGithub actionなのかな?

たぶん本書を読むとOSSプロジェクトに参加できます。GitHubなんかうまく使えてないな〜とか、OSS参加してつよつよコーダーになりたいな〜〜とか言う人は読むと幸せになれます。

追記:

この本を参考にして、個人で開発してたコードをgithubに上げて、issue立てたら知らない人から「hey!これ直していいかい!」ってコメントが来たのでマジ焦りました。でもちゃんと動作確認して、プルリクマージできました。まじでありがとう本書....

reactで簡単なタイマーを作る

機能としては

  • ストップウォッチ
  • 一時停止
  • リセット

がある。カウントダウンはない。全然大したものではないが、一応公開しておく。

import React from 'react';

export default class Timer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLive: false,
      currentElapsedTime: 0,
      totalElapsedTime: 0
    }
  }
  render() {
    return (<div>
      <p>{this.getElapsedSec()}</p>
      <button onClick={(e) => this.handleClick(e)}>{this.getButtonName()}</button>
      <button onClick={(e) => this.handleReset(e)}>リセット</button>
    </div>)
  }
  getElapsedSec() {
    return Math.floor((this.state.currentElapsedTime + this.state.totalElapsedTime) / 1000)
  }
  handleClick(e) {
    if (!this.state.isLive) {
      // stop -> live
      this.initClock()
    } else if (this.state.isLive) {
      // live -> pause
      this.releaseClock(false);
    }
  }
  releaseClock(resetTotalTime = false) {
    const totalElapsedTime = this.state.totalElapsedTime;
    this.setState({
      isLive: false,
      currentElapsedTime: 0,
      totalElapsedTime: resetTotalTime ?
        0 :
        Math.floor((Date.now() - this.started_at + totalElapsedTime) / 1000) * 1000, // ここで秒以下を切り捨てないと表示してる時間とtotalElapsedTimeが小数点以下でずれる
    });
    clearInterval(this.timerId);
  }

  handleReset(e) {
    this.releaseClock(true)
  }
  initClock() {
    this.started_at = Date.now()
    this.setState({ isLive: true })
    this.timerId = setInterval(() => {
      this.setState({
        currentElapsedTime: Date.now() - this.started_at
      })
    }, 1000)
  }
  componentWillUnmount() {
    clearInterval(this.timerId)
  }
  getButtonName() {
    if (this.state.isLive) {
      return '一時停止'
    } else {
      return '開始'
    }
  }
}

Reactアプリケーション開発テクニック を(大体)読んだので注意点をまとめる

正式名称はいまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック。長い。

この本はreactに限らず、electron, react native, flux, webpack, babel, websocket, expressなど、様々な技術を扱っていて、ベストプラクティスを学べるという点ではとても良い。ただ初版が2017年8月と古いのもあって、今の状況とは合わないところもある。第4章以外は読んだので注意点など、気づいたところを書いていく。

私の環境

  • Ubuntu 18.04.3 LTS (Bionic Beaver)
  • node v10.16.0
  • npm 6.10.3

最初に

まず$ webpackなど、コマンドが使えないのはパスが通っていないせい。(npmのバージョンアップのせい?) 使う場合はexport PATH=${PATH}:./node_modules/.bin でパスを通すか、npx <command>に置き換えたほうが良い。

パッケージのアップグレード

サンプルコードのパッケージを最新版にしたい場合は

npx npm-check-updates -u
npm install

でアップデートができる。以下は全てパッケージが最新(2019/09/08)の時の話。

最新版reactで本書のコードを実行する場合

react ver16.3以降で

  • componentWillMount
  • componentWillRecieveProps
  • componentWillUpdate

を使うと「廃止予定なので使わないでください」というwarningがでる*1( p146のコードなど)。 詳細は

Update on Async Rendering – React Blog を参照。

componentWillMountはconstructorへ。

「インチとセンチの単位変換コンポーネントを作ろう」(p160)について

inchToCm.jsにはバグがあって、cmChangedが*2.54じゃなくて/2.54(25行目)。

このアプリは上述のnpm-check-updatesでモジュールをアプデするとwebpackが通らないしなんかWARNもでる。

原因としてはbabelのアプデでオプションの指定が変わったことが挙げられる。

webpack.config.jsを

 module.exports = {
+  mode: 'development',
-          presets: ['es2015', 'react']
+          presets: ['@babel/preset-react']

のようにする*2。preset-envはなくてもバンドルが通る。なぜかわからん。npm install @babel/preset-reactでインストールしておく必要がある。WARNはmodule.exports.mode=’development’で消える。

webpackでバンドルすると今度は以下のような、廃止予定のライフサイクルです、というWARNが出る。

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

対策の詳細は公式を見てもらうのが良いが、この場合ではcomponentWillRecievePropsはgetDerivedStateFromPropsに移動するのが最良*3

例:

  static getDerivedStateFromProps(props, state) {
    if (props.value !== state.value) { 
      return {value: props.value}
    }
    return null
  }

だがしかしcomponentWillReceivePropsgetDerivedStateFromPropsもバグを引き起こしやすいメソッドなので*4できるだけ使わない方法を考えたほうが良いらしい。

初心者なので理解するのに時間がかかったけど、引数の(props, state)は言い換えるなら(nextProps, currentState)で、わざわざcurrentStateを与えてるのはstaticメソッド内ではthisがundefinedになるから。

「汎用的な入力コンポーネントを作ってみよう」(p177)について

何の説明もなくprop-typesモジュールがでてくるが、これはreactが公式にサポートしてる型チェックモジュール。 以下の説明がわかりやすい。

アプリケーションが成長するにつれて、型チェックによって多くの不具合を見つけられるようになります。アプリケーションによっては、Flow もしくは TypeScript のような JavaScript 拡張を使ってアプリケーション全体の型チェックを行うことができるでしょう。しかしそれらを使用せずとも、React は組み込みの型チェック機能を備えています。コンポーネントの props に型チェックを行うために、特別な propTypes プロパティを割当てることができます。

詳細は 公式 を参照。

「DOMに直接アクセスする」(p185)について

ref={obj=> this.hoge = obj}としてrefを利用するのは16.3から非推奨*5。以下のように編集することでモダンな書き方になる。

headタグ(reactとbabelのアップグレード)

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

constructor

this.userNameInput = React.createRef()
this.pwInput = React.createRef()

renderメソッド

<input type='text' name='user' ref={this.userNameInput} ...>
<input type='password' name='pass' ref={this.pwInput} ...>

createRefは.bind(this)しなくてもOKだった。というかbindしようとするとエラーが出る...なぜ?

「ReactコンポーネントAjax通信を使う」(p191)について

componentWillMountを使ってますよというエラーが出る。Ajax通信の場合はcomponentWillMountじゃなくてcomponentDidMountメソッドを使おう*6。中身は全く一緒でよい。

p284のコード

fs.renameだとコールバックがなんちゃらとエラーが出るので fs.renameSyncに変えると動く。もしくは以下のようにコールバック関数を書く。

  fs.rename(req.file.path, des, (err) => {
    res.send('ファイルを受信しました<br/>' +
      `<img src="/pub/${fname}" />`)
  })

React Routerについて

React Router は今v5だが本書で使ってるv4とは互換性があるらしいので気にする必要はない。

websocket

websocketが急にでてきてわからなくなると思う。基本的な使い方はp324の下の通りだけど、 //「クライアント」がメッセージを受信した時の処理//「サーバー」がメッセージを受信した時 の誤植だと思う。多分...。

公式ドキュメント

Wikiシステムを作ってみよう

react router で渡されるthis.props.matchには以下のような値が入ってる。参考までに。 f:id:arark:20190906230237p:plain

自分のSNSを作ろう(p346)

あんまり関係ないけど、htmlのtitleタグがwikiになってました。

HTML5/CSS3モダンコーディングを読んだ

react nativeすげーとか、モダンなwebアプリ作りてえなぁとか、大学のwebシステムのデザイン変えてえなぁとか思ってたのがきっかけだが、とにかくwebデザインの知識がないと始まらないので泣く泣くデザインの本を買った。最初はあんまり興味なかったんだけど、やってくうちに結構楽しくなった。

内容は3つのHPをスクラッチで作っていく形式で、デスクトップデザインの解説が主。レスポンシブ対応は最後の1つしかでてこなかった。レスポンシブの解説がもっとあれば嬉しかったが、まぁ基礎さえ分かればデスクトップデザインもレスポンシブもあまり変わらなそうだとは思う(ほんとか?)。

解説は論理の飛躍なく丁寧で、コラムは細かいけど大切なことが書いてあった。セルフコーディングっていう演習のページがあって、一見難しそうに見えるがヒントもあったし、ちゃんと最後に解答例が載ってたのでちゃんとやりきれる演習だった。総合して良書。大学の教科書聞いてるか〜^^???

ちなみに素のCSSじゃなくて、SCSSを使って勉強してたんだけど、もうバニラCSSに戻る気にはなれない。ネスト使えるのが神。SCSSじゃなくてSASSの方がどう考えても見やすいが、コンパイルできなかったしスタンダードじゃないので諦めた。

次はreactかnode.jsの勉強します。

pythonで実験の測定値の確度を求める

def acc(value: str, rdg: float, dgt: int):
    error = float(value) * rdg / 100
    after_dp = value.split('.')[-1]
    if after_dp:
        len_after_dp = len(after_dp)
        lsd = dgt * 10 ** -len_after_dp

    return round(error + lsd, len_after_dp)

レポート中に苦しみながら書いたやつなのでこれがあってるかどうかは全くわからない。

マイナンバーの交付がやばい

パスワードの扱いがやばい。 まずIDと初期パスワードが紙に印刷されて、封筒に入って送られてくる。え?これ封をする人いるよね?悪意のある人が盗んだらどうなるわけ?

で、次に受付での手続きもやばい。

受付の人「パスワード申請依頼書と、控えの両方にパスワードをご記入ください。」

俺「え?書くんですか?ここに?(俺の字汚いんだが?転記ミスは?パスワード流出は?そもそも依頼書とは????FAXで送ってまた手入力ってこと??ハッシュ化の意味とは??????)

受付「そうですね〜区役所の方に行ってもらうと自分で設定できるんですが」

俺「わかりました(呆れ)」

もうここで絶対にパスワードお漏らしするのは確信できたのでパスワードジェネレータで捨てパスワード作って書く

受付「ありがとうございますー。こちらの英文字は全て大文字になりますがよろしいですか?」

僕「え?大文字になるんですか?」(組み合わせ数ごっそり減るが????)

受付「そうですねー。この文字はhでよろしいですか?」

僕「○○○○○○です。(もはやどうでも良くなって読み上げる)」

受付「こちらの3種のパスワードは同じでよろしいですね」

僕「はい(怒りを通り越した何か)」

しかもなんとマイナンバーの番号自体がパスワード兼ねてるから漏らしちゃいけないらしい。

django-heroku をインストールするときにエラーがでる(ubuntu)

エラーメッセージが

   ERROR: Complete output from command python setup.py egg_info:
    ERROR: running egg_info
    creating pip-egg-info/psycopg2.egg-info
    writing pip-egg-info/psycopg2.egg-info/PKG-INFO
    writing dependency_links to pip-egg-info/psycopg2.egg-info/dependency_links.txt
    writing top-level names to pip-egg-info/psycopg2.egg-info/top_level.txt
    writing manifest file 'pip-egg-info/psycopg2.egg-info/SOURCES.txt'
    Error: b'You need to install postgresql-server-dev-NN for building a server-side extension or libpq-dev for building a client-side application.\n'
    ----------------------------------------
ERROR: Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-install-sqbappkj/psycopg2/

ってなる時は、メッセージの通り、psycog2が依存してる?postgresql-server-dev-NNかlibpq-devをインストールする必要がある。 俺の場合は sudo apt install libpq-devで直った。

こちらも参考

stackoverflow.com

こういうので躓くと大変〜〜〜〜