give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

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

はじめに

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

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

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

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

  • 作者:Boris Cherny
  • 発売日: 2020/03/16
  • メディア: 単行本(ソフトカバー)

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

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

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

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

f:id:JunichiIto:20200630073838j:plain

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

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

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

Web版なら無料で読めます

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

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

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

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

f:id:JunichiIto:20200630075739j:plain

前述のとおり、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です。

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

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

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

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

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

f:id:JunichiIto:20200630082954j:plain

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

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

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

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

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

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

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

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

f:id:JunichiIto:20200630085556j:plain

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

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

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

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

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

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

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

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

qiita.com

まとめ

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

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

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

  • 作者:Boris Cherny
  • 発売日: 2020/03/16
  • メディア: 単行本(ソフトカバー)

👂耳寄り情報?👂