【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた

はじめに

僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。
ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。
とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。
また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。

というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。

JavaScript Primer　迷わないための入門書 (アスキードワンゴ)

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

また、それらを使った実践的なノウハウを学ぶためにこちらの本も購入しました。

迷わない！困らない！レガシーフロントエンド安全改善ガイド (技術の泉シリーズ（NextPublishing）)

このエントリではこの3冊を読んだ感想をざっくりまとめてみます。

「JavaScript Primer」はJS版のチェリー本かも！

最初に読んだのは「JavaScript Primer」です。

いやあ、この本は良かったです！
僕みたいに「すでに他の言語のプログラミング経験はあるし、JSもある程度触れるが、ES2015以降の機能は雰囲気でしか理解していない」という人間にはピッタリの一冊でした。
その点で本書はJS版の「プロを目指す人のためのRuby入門（通称・チェリー本）」と呼んでいいかもしれません。

プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)

本書を読むことで、「なるほど、それはそういう仕様になっているのか！」とか「この機能はES2017で導入されたのか」といったふうに、様々な知識を得ることができました。
とくに、JSにおける真偽値の定義やthisの挙動、Promiseやawaitを使った非同期処理などは、いかに自分が雑な理解しかしていなかったのかが、本書を読んでよくわかりました。

かなりボリュームがあるので読み切るのはなかなか大変ですが、それはそれだけJSの仕様が奥深いということの裏返しでもあります。
いずれも知っておいて損はない、というか知っておくべき！という内容が満載だったので、僕みたいなJSレベルの人は必ず読んでおきましょう！

Web版なら無料で読めます

ちなみに、本書の内容はWebでもほぼおなじものが無料で公開されています。
jsprimer.net

僕は紙の本の方が自分自身に「読め」というプレッシャーを与えられる、という理由で紙の本を買いましたが、Webでも大丈夫という人は上記サイトを読破するのもアリです。

TSって完全に独立した言語やん！ということがよくわかった「プログラミングTypeScript」

その次に読んだのが「プログラミングTypeScript」です。

前述のとおり、JSはもともとある程度の経験がありましたが、TypeScriptの経験はゼロでした。
TSについては「JSに型が付けられるやつで、文法的にはJSの上位互換になってるらしい」ぐらいの知識しかありませんでした。

というわけで、本書を読んでみたわけですが、いやあ、TypeScriptってすごいですね。これって完全に独立した言語やん！って思いました。
「ちょっと進化したJSぐらいやろ」と思っていた僕の予想を大きく裏切られました。

それだけに、かなり難しい内容もたくさん出てきます。
僕はJavaやC#の経験があるので、静的型付け言語のコードを読むのもそれほど苦労しないのですが、それでも内容によっては「うひー、なんじゃこりゃ」と思うようなややこしい内容が結構ありました。（特に6章）
プログラミング初心者でなおかつRubyやPythonのような動的型付け言語の経験しかない人は、いきなりこの本に進むと面食らうかもしれないので注意してください。

対象バージョンは3.4（一部3.8）です

ちなみに、本書にはTypeScriptのどのバージョンを対象にしているのか明記されていなかったのですが、監訳者の今村 謙士さんに確認したところ、原著はバージョン3.4を前提に書かれているそうです。
ところどころに監訳者による補足説明が入っているのですが、その情報はバージョン3.8までの内容を反映しているとのことです。（参考）

なお、現時点（2020年6月末）での最新バージョンは3.9.5です。

• Releases · microsoft/TypeScript · GitHub

おまけ：RubyMineでTypeScriptを動かしてみた

サンプルコードを動かすときは、使い慣れたRubyMineにTypeScript用の環境をセットアップして動かしてみました。

TypeScriptの本を読みながらRubyMineでサンプルコードを動かしている人の図です。VS Codeを使わなくても、RubyMineだけで結構普通にTypeScriptが書けそう。ワンクリックでコンパイル→実行もできるし〜。 pic.twitter.com/Sc9YzvirfB

— Junichi Ito (伊藤淳一) (@jnchito) June 13, 2020

RubyMineでTypeScriptを動かす方法は公式ヘルプで説明されています。

• TypeScript - ヘルプ | RubyMine

手取り足取りモダンJSへの移行方法を教えてくれる「レガシーフロントエンド安全改善ガイド」

最後に読んだのは「迷わない！困らない！レガシーフロントエンド安全改善ガイド」です。

本書はES5（class構文とかがないレガシーなJavaScript）とjQueryで書かれたTODOアプリケーションを、Webpack、TypeScript、Vue.jsといったモダンなフロントエンド技術を使ったアプリケーションに移行させる手順を解説した本です。

ベースとなっているのは技術書典６で同人誌として頒布された「レガシーフロントエンド安全改善ガイド」で、本書はそれを商業出版向けに加筆・修正したものです。
mugi1.hateblo.jp

「同人誌ベースなの？クオリティ的に大丈夫？」みたいに心配する人がいるかもしれませんが、その心配はまったくありません！
むしろ「同人誌ベースなのに、こんなにハイクオリティなの！？」と逆の意味でビックリします。
それぐらい懇切丁寧に、モダンJSへの移行方法が説明されています。

内容はとっても実践的です。
「なぜ改善したいのかを考えよう」「移行を始める前にまずテストを書こう」といった地に足の付いたアプローチで、一歩ずつレガシーなJSアプリケーションを改善していきます。

僕が昔からメンテしているRailsアプリケーションのフロントエンド技術もその多くがjQueryとかをバリバリ使ったレガシーJSなんですが、本書で説明されているアプローチを実践すればモダンJSに移行できそうな気がしました。（ただし、時間はかなりかかりそうですが💦）

ちなみに、本書で扱っているTODOアプリケーションはRailsのようなサーバーサイド処理を含まない、フロントエンドだけで完結するJSアプリケーションです。

写経するなら紙の本よりも電子版の方がオススメかも

他の2冊と同様、本書も紙の本で購入しました。
ただ、紙の本はカラー印刷になっており、その影響か使われている紙が少し固くてツルツルしたものになっています。

そのため、本を開きっぱなしにしようとしてもすぐに「パタン！」と本が閉じてしまいます。

しっかりした書見台を用意しないと写経するのは難しいと思うので、写経するなら電子版を購入した方が良いかもしれません。
また、紙の本よりも電子版の方が600円ほど安いのも電子版のメリットです。（紙の本は2200円、電子版は1600円、各税別）

あとがきには僕の名前が！

著者の麦島さんと僕は、実は知り合いです。
去年は富山Ruby会議01で4年ぶりに再会しました。（参考）

だから、というわけではないと思いますが、本書のあとがきには僕の名前が登場しています。

本書の内容については、昔の私自身が欲しかった情報をまとめており、このあたりは私が尊敬するエンジニアの伊藤淳一（@jnchito）さんが仰っている「その知識を知らなかった頃の自分が喜ぶような記事を書く」という考えに基づいています。

あとがき：迷わない！困らない！レガシーフロントエンド安全改善ガイド

たしかに本書を読んでいると、「そうそう、そういう話が知りたかったんだよ！」と思うポイントがたくさんありました。
どうやら、これは僕の執筆ポリシーが反映された結果みたいです。（とっても嬉しい〜！😆）

qiita.com

まとめ

というわけで、このエントリでは僕が最近読んだフロントエンド関連の3冊の技術書について書評を書いてみました。
いずれもとても良い本だったので、もっとJSやフロントエンド技術に詳しくなりたい！という人はぜひチェックしてみてください！

JavaScript Primer　迷わないための入門書 (アスキードワンゴ)

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

迷わない！困らない！レガシーフロントエンド安全改善ガイド (技術の泉シリーズ（NextPublishing）)

👂耳寄り情報？👂

期間限定なのかな？ブログでも紹介した「迷わない！困らない！レガシーフロントエンド安全改善ガイド」、Kindle版は880円で売ってますね。半額になってるので、とてもお買い得なのでは！！ https://t.co/VpjZorxuJg pic.twitter.com/JOaMe0QpN5

— Junichi Ito (伊藤淳一) (@jnchito) June 30, 2020

梅雨時の洗濯は除湿機が大活躍！（あと、部屋干しの臭い対策とか）

最近は梅雨時期なので雨が良く降りますねー。
我が家は2階に物干しスペースがあるので、外に洗濯物が干せない場合はここで干しています。

天井からぶら下げている物干し竿は、ホスクリーンというアイテムを自分で取り付けました。

川口技研 物干金物 ホスクリーン 2本組 SPCS-W

あと、タオルを干しているのはIKEAで買ったREKISという洋服ラックです。

www.ikea.com

しかし、梅雨時は屋内の湿度もすごいので、そのままではなかなか乾きません。
そこで活躍するのがこれ。

これは何かというと、除湿機です。

シャープ 除湿機 衣類乾燥 プラズマクラスター 12L ホワイト CV-H120W

最初は「本当に除湿してくれるのかなー？」と半信半疑で購入しましたが、この季節は半日動かすだけで4.5リットルの排水タンクが満タン近くまで溜まります。

下の写真は洗濯を干して5時間後の排水タンクの様子です。矢印の部分まで水が溜まっています。

「こんなにいっぱいの水がどこから出てきたの！？」とビックリするぐらいの量です。
そのおかげで洗濯物もしっかり乾きます✨✨✨

2022.9.20追記
さらにパワフルなモデルに買い換えました！

シャープ 衣類乾燥機 除湿機 18L / プラズマクラスター 7000 スタンダード 20畳 / 2021年モデル ホワイト CV-N180-W

部屋干しの臭い対策（by 妻）

しかし、洗濯物を部屋干しすると、部屋干し特有の臭いが気になる、という人も結構いるんじゃないかと思います。
たしかに以前は「うーん、やっぱり部屋干ししたあとのタオルはなんか・・・」と思うこともありました。
ですが、ここ数年は部屋干ししても特に臭いを感じることがなくなりました。

その秘訣は何か、洗濯大臣の妻にポイントを聞いてみました。

お風呂の残り湯を使わない

洗濯といえば、お風呂の残り湯を使って水道代を節約するのが日本の由緒正しきお洗濯スタイルである・・・と考えている人も多いかもしれませんが、残り湯には雑菌が含まれているせいか、臭いの原因になりやすいみたいです。
というわけで、我が家ではお風呂の残り湯は洗濯に使いません。お風呂が終わったら浴槽のお湯はすぐに捨てます。

そもそも節約という観点で言えば、お風呂の残り湯を使ったとしても節約できる金額は1ヶ月につき数十円か数百円ぐらいなのではないでしょうか？
その数十円か数百円かと引き換えに部屋干しの臭いとおさらばできるのであれば、そっちの方がいいじゃない、というのが我が家の選択です。

酸素系漂白剤も合わせて使う＆お湯で洗う

洗濯を洗うときは通常の洗剤に加えて酸素系漂白剤も合わせて使います。
さらに酸素系漂白剤がよく働くように水道水ではなく、お湯を使います。

画像の出典: https://asuyamablog.com/house-building/recommendation/washing-machine-faucet

うちの妻はこの漂白剤をよく使っているようです。

arau. アラウ 酸素系漂白剤 800g 無添加 天然ハーブの香り

洗剤はいろいろ試した結果、最近はこの洗剤に落ち着いているとのことです。

【Amazon.co.jp 限定】【まとめ買い】アタック抗菌EXスーパークリアジェル 洗濯洗剤 液体 本体+詰め替え1.35㎏

酸素系漂白剤は臭い対策だけでなく、単純に汚れをきれいに落としたいから、という目的でも使っています。
ちなみに酸素系漂白剤は塩素系漂白剤と違い、色物の衣服に使っても大丈夫です。

あと、お湯を使うのは「洗い」のときだけでOKです。
すすぎのときまでお湯を使うともったいないので、すすぎは水道水に切り替えます。

最近の洗濯機は水温を上げて洗濯できる機能が付いている場合があるので、洗濯機の蛇口は水道水にしかつながっていない、という場合はその機能を使えばOKです。

脱水が終わり次第、早めに干す

脱水が終わった状態で洗濯物を長時間入れっぱなしにするのもよくないみたいです。
脱水が終わり次第洗濯カゴに移して、早めに干しましょう。

部屋干しするときはなるべく短時間で乾かす方が良いので、我が家では前述の除湿機を使っています。
浴室乾燥機が付いているご家庭なら、浴室で乾かすのもアリだと思います。（残念ながら我が家の浴室には付いていません）

定期的に洗濯槽を洗う

3ヶ月に一回ぐらいの頻度で洗濯槽を洗うのも効果的です。
洗濯槽クリーナーはたくさんありますが、ドラム式対応のクリーナーは少ないようです。
その中でも妻は特有の臭いが付きにくい酸素系（過炭酸ナトリウムが入っているもの）が好みなのですが、ドラム式対応＋酸素系という組み合わせだとかなり選択肢が限られます。
こちらの洗濯槽クリーナーはそんな数少ないドラム式対応＋酸素系の洗濯槽クリーナーです。

洗濯槽の 激落ちくん 4個パック

すでに服や洗濯機に臭いが付いている場合は、全部リセットする

上で挙げた対策は「臭いが付いていない状態をキープしていること」が前提になります。
すでに汚れがこびりついた洗濯槽は表面的な解決策だけでは臭いが落ちないので、業者に依頼して徹底的に掃除してもらったり、新しい洗濯機に買い換えたりすることをお勧めします。

また、一度臭いが付いてしまった衣服も繰り返し臭くなりやすいです。
そういった服は真夏に長時間干すことを繰り返すと臭いをなくすことができます。
真夏まで待っていられない、という場合は「さっさと捨てて新しい服を買う」というのも選択肢のひとつです。

（おまけ）泥汚れにはスティック石けんタイプのアタックが最強

部屋干しの臭い対策とは別ですが、妻に「ぜひ紹介してほしい！！」と言われたのが「アタック プロEX石けん」という商品です。
うちの息子は野球をやっているのですが、野球をやっていると練習着やユニホームに付いた泥汚れを落とすのが大変です。

泥汚れはいきなり洗濯機に入れずに最初に手洗いすると思いますが、そのときにこの「アタック プロEX石けん」を使うとめちゃくちゃ汚れが落ちるそうです。

アタック プロEX 石けん ケースつき 1組

また、泥汚れだけでなく「服に絵の具や墨汁が付いてしまった」とか、「しょうゆやコーヒーが跳ねてしまった」というときにも「アタック プロEX石けん」は活躍します。

世間では「泥汚れにはウタマロせっけん」という意見が多いみたいですが、「アタック プロEX石けん」の方が絶対によく落ちる！専用のブラシも付いているから、これでこすったら泥汚れも一掃できます！！・・・と妻が力説していたので、お子さんの泥汚れに悩んでいる方はぜひ使ってみてください😅

Q. ドラム式洗濯機の乾燥機能は使わないの？

我が家で使っているのは6年前に買ったこちらのドラム式洗濯機です。
kakaku.com

この洗濯機にも乾燥機能は付いています。
除湿機を買う前は洗濯機の乾燥機能も活用していたのですが、部屋干し＋除湿機の方が以下のようなメリットがあります。

• 一度に干せる量が多い
• 洗濯機を複数回まわす必要があるときは、2回目の洗濯をしている間に1回目の洗濯を干せる

というわけで、以前に比べると洗濯機の乾燥機能を使う機会は少なくなってきました。

Q. 除湿機は一年中使ってるの？

除湿機が活躍するのは湿度が高い梅雨から夏にかけてです。
冬場は暖房を掛けたりして部屋が乾燥しがちなので、除湿機無しでも洗濯物は乾きます。（むしろ洗濯物が加湿器代わりになってるかも？）

なお、気温が低い冬場は外に干してもなかなか乾かないので、部屋干しした方がすぐ早く乾きます。
ブルブル震えながら洗濯を干したりする必要もないので、冬場の洗濯は最近は部屋干しが基本です。

Q. てか、なんで物干し専用の部屋があるの？？

いえいえ、べつに物干し専用の部屋があるわけではありません。
ここは通称「セカンドリビング」という名の、2階のフリースペースです。

昔はここで息子と室内野球をしたりして遊んでいました。
（今は大人と変わらない体格になったので無理ですが😅）

ひな祭りの時期になるとひな壇を飾るスペースにもなります。

もともとは「もし3人目ができたらここをリフォームして3つめの子ども部屋にしよう」という計画だったのですが、このままいくとおそらくフリースペースのままになりそうです。

ちなみに、セカンドリビングは吹き抜けに面していて、手すり部分に洗ったじゅうたんを干したりすることもできます。
じゅうたんを干している写真はなかったので、代わりにぬいぐるみを干している写真を載せておきます。

まとめ

というわけで、このエントリでは「除湿機って便利だよー」とか、「我が家はこうやって部屋干しの臭い対策をやってるよー」という話をあれこれ書いてみました。
梅雨時のお洗濯に困っている方にとって、何か参考になる情報があれば幸いです😄

他人の失敗や後悔から学べることって何だろう？

娘の「宿題」に答えてみた、が・・・！？

昨日、小学生の娘が「学校の宿題だから」と言って、僕に「今まで失敗してきたことや後悔していること」をインタビューしてきました。
何やら「総合学習」の一環として「身近な人の失敗や後悔を聞いてくる」という宿題が出たそうです。

そのときに娘に話した一問一答はこんな感じです。（質問はいずれも学校から指定されたもの）

Q. 中学生のときに失敗したこと、または後悔していることは何？

小学校のころは太っていたので、中学校では太らないようにあまり食べなかったけど（注：中学生になったら突然痩せた）、あのときもっとたくさん食べていたら、もっと背が伸びていたかもしれない。（全然関係ないかもしれない）

Q. 高校生のときに失敗したこと、または後悔していることは何？

高校で急に勉強の成績が落ちたのは、もしかすると高校の先生の教え方が悪かったせいかもしれないと思っている。というのも、浪人時代に通っていた予備校の先生は何倍もわかりやすく教えてくれたから。なので、「学校の先生から教わる」以外の勉強法を知って実践すれば良かった。（現代っ子はYouTubeで勉強できたりするのでいいですね！）

Q. 大学生のときに失敗したこと、または後悔していることは何？

将来の自分の仕事がプログラマだと分かっていたら、大学でコンピュータサイエンスを習いたかった。（が、当時は全くそんなつもりはなかったので、大学時代の勉強がほとんど今の仕事に活かされていない😣）

Q. 最近失敗したこと、または後悔していることは何？

うーん・・・・・・・思いつきません。

Q. 昔に戻れるならいつに戻りたい？

今が一番良いので、昔に戻りたいという気持ちは特にないです。

と、以上のような質問を受けたのですが、正直言ってこのインタビューって何か子どもたちの役に立つんでしょうか？？？

てか、なんで質問が全部「失敗や後悔」なの？？
なんでそんなに後ろ向きなの？？

失敗や後悔よりも、人生で良かったことや役に立ったことを聞いてきた方がいいんじゃないの？？
もしくは両方聞けばいいんじゃないの？？

そもそも失敗や後悔って、その瞬間においては「しまった！」「悔しい！」と思うかもしれないけど、そのあとの人生にまで尾を引くような失敗ってそうそうないし、失敗したってやり直したり、そこからさらに努力したりすれば挽回できることがあるし、当時は失敗したと思っていても振り返ってみれば「あれで良かったのかもな」と思うことも多いです。

なので、僕は「失敗したことや後悔していることは何？」と聞かれても、ぱっと答えが出ず、上で挙げた回答はどれも「えー！？何かあるかな〜？うーんと、えーと・・・」と、かなり時間をかけて無理矢理ひねり出したものばかりです。

失敗ではなく「Lesson＆Learn」（再掲）

僕は何かしくじってしまったとき、それを失敗とは呼ばずに「Lesson＆Learn」と考えるようにしています。
まったく同じ話を以前ブログに書いたので、それを再掲します。

失敗についてもひとこと言っておくと、失敗も100%役に立たない失敗、デメリットしかない失敗は滅多にないと思っています。

僕は失敗を失敗と呼ばずに「Lesson＆Learn」と呼ぶようにしています。
つまり、「失敗という経験から新しいことを学んだ」とプラスに考えるのです。

成功する経験だけでなく、「なるほど、こうやってもうまくいかないのか」という失敗する経験を積むことも、人生におけるひとつの勉強です。

自分や家族の命を落とすような失敗さえしなければ、「失敗したけど、勉強になった。次はうまくやる！」と考えることができます。

「レールに沿った人生はつまらない」と本気で考えていた元・若者が語る、現在の心境 - give IT a try

インタビューに答えたあと、娘にもこれと同じ話をしておきました。

これをインプットにしてどんな授業をするんだろう？🤔

それにしても、大人の失敗や後悔 "だけ" を聞いてくるこの授業のテーマ設定が謎です。
反面教師として子どもたちに何かを学ばせたいのでしょうか？
「もっとたくさん勉強しておけばよかった」みたいな大人の自責の念を引き出して、「ほらね、だからみんなもしっかり勉強しましょう」みたいな結論にもっていきたいのでしょうか？

少なくとも、僕のインタビューの回答は小学生の子どもたちにとって、ほとんど役に立たない気がするのですが・・・。

インタビューの回答は明日の授業で使われるみたいなので、どういう授業内容になったのか、後日娘に聞いてみたいと思います！