エンジニアでなくてもJSは役立つ！な本
約2週間遅れで物理本を入手した技術書典6の感想を書いていくシリーズです。
さァみんな大好きワイたちのしがないラジオのパーソナリティのgamiさんの新刊。前回の技術書典5では伝説の『完全SIer脱出マニュアル』が大きな反響を呼びましたが、今作はレガスィなエスアイヤ〜を非常口から脱出したピクトグラム氏が新しい職場でJSを学ぶ表紙なのかな…と思いきや、非エンジニアの人がターゲット。
文法の解説なし、怖がる人の多いあの黒いコンソール画面なし、JavaScriptに覚悟を決めて苦しい入門をするのではなく、あくまで明日からの仕事を楽しくしていくための本だ…と位置づけています。このへんもしがないラジオらしくて良いですね。
第1章 なぜプログラミングを学んだ方がいいのか？
コストパフォーマンスも良いし、世の中全体ではまだまだできる人も少ないので学んでおくと仕事の幅が広がっていいことがあるよ！という話の章。 一般的にITエンジニアになるまでに必要な学習時間が500〜1000時間、転職であれば200〜300時間と具体的な量も書いてあります。
本書を買うと聴けるしがないラジオの限定エピソードでも関連した話が聴けるのですが、Webマーケターや営業、サポート、果ては採用担当者もちょっとした作業でJavaScriptを書く機会があり、ちょっとでも基本が分かっていれば仕事が楽になるところを分からないまま格闘して苦労することが多いそうです。
僕も仕事でいわゆるバックオフィス系とか非エンジニアの人と接する機会はありますが、なんというか伝統的SIerだとそういう人たちはJSどころかプログラミング自体がまったくできない人が多いので、やっぱりこのへんは会社によって文化がまったく違うなあというところ。
また、本書全体を通してコラムでは非エンジニア向けに噛み砕いた説明をしているのですが、1章のコラムでもプログラムを「コンピュータが読む作業手順書」だという風に定義して説明しています。こうしたエンジニア外の視点に立った解説も面白いです。
第2章 プログラムを書かずにできること
誰もが困ったことであれば誰かが既にプログラミングで解決していることも多い。さァ謎の呪文を大量に書くプログラミングの苦行の時間だ！と身構えなくても、世の中にはツールの活用や連携で解決できることが色々あるんだよ、というツール類の紹介の章。
まずは自動化ツールのZapier。IT系のニュースでしか知らなかったのでへぇ、となりました。ぐぐると最近だと、世の中一般に話題のRPAと関連付けられているのも興味深いです。
そして使っている人も多いChrome拡張機能。入れすぎるとメモリがどんどんなくなったりしますが、業務効率化のツールも確かに色々あります。
そしてチャットツールの Slack の中で使えるSlack Appsも色々あるよという話。僕はSlack初心者なので想像するしかないのですが、ここの説明に「SlackのワークスペースにBotを住まわせて」という独特な表現があったのがエンジニアっぽい未来感があって面白いです。
そしてWeb上でOfficeライクなことができるGoogle提供のG Suiteでも、G Suite Marketplace でアプリが色々提供してあるよという話。
gamiさんの会社のPLAIDさんは技術ブログのPLAID Engineer Blogによるとクラウド基盤はAWSだけでなくGCPと両方活用していますし、だから社内ツール類も全体的にGoogle寄りなのかな？と推測してみたりします。このへんは会社によって、あるいは会社内の組織によってもいろいろ特色あるでしょうね。
コラムではこうしたツール類は、オープンで業界標準的なアプリを使うとよいよという話が述べられています。昔の時代のチャットツールでIRC(Internet Relay Chat)が出てきて懐かスィ…これ2000年代によく使いました…
第3章 あなたはどんなプログラムを書くべきか？
初心者が迷いがちなところですが、何の目的で何をするプログラムを書くのか明らかにするのが大事ですよ、という話の章。
プログラムを書かないとできないこと、書かなくてもできること、書いてもできないことを明確に述べ、区別していくよいことを書いています。
コラムで実例として、しがないラジオのWebサイトは実際にプログラムを書いて実現したこと、仕事用にChrome拡張機能やSlackにメッセージを流す自動生成プログラムを書いて業務効率した話が載っています。DevOpsやCIと関連してSlackにいろんな通知が来るように工夫した話はよくあちこちで聞くので、先進企業だとこういう工夫が多いのでしょうね。
そしてここでプログラムを書いてもできないことの例で、「人間の感情のコントロール」が出てきてなかなかSFチックです。そして「IEをChormeと同じぐらいモダンに作り変えること」も出てきて遠回しにIEをdis…いやいやいや、世のエンジニアの苦労を代弁しています！
本当に自分が書くべきなのかを考えて、コストに見合うだけにした方が良い、とはっきり書いてあるあたりは、得てしてプログラムを書きたがる人も多いエンジニアとは違う視点で面白いです。
第4章 簡単な JavaScript でブックマークレットを作る
実際にJSを書いていく章。サンプルコードもGitHubに上がっています。
ブラウザはChromeを想定し、ブックマークの代わりに中でJavaScriptが動くブックマークレットを作っていきます。フロントエンドJSフレームワークの入門書だと超頻出のToDoリストアプリのような難しいものではなく、Amazonの商品ページのURLを操作したり身近なところから始まります。
- 要は1つのブックマークレットごとにJSの無名関数を定義していくだけなのですが、サンプルは簡単なところから始まってとてもわかりやすいです。
- 関数を「命令」と呼んだり、非エンジニア向けの視点を徹底しています。
- 無名関数の定義を「閉じ込める」と表現しているのも面白い。
- JavaScript実行時には変数に入っている実際の値が使われることを「変数が変身する」と表現しています。
- 行末のセミコロン
;を打つのは日本語の「。」だと喩えています。 - 関数やメソッドもこの呼び方は使わず「命令」と呼んでいます。
- 変数に入るデータの文字列と数値の例で、ご自分の名前と年齢28歳が出てきます。サンプルコードで自分の年を例に使えるなんて…くっこれが若さか…眩しい……闇へ還ろう…w
- モダンJavaScriptなのでDOM要素の取得は伝統的な
document.getElementById()などではなく、document.querySelector()を使っています。ここでもコード例ではID属性や子要素タグで引いてきていますが、非エンジニアには難しい話は一切オミットしています。 - モダンJSなのに変数宣言は
letとconstを使わず全てvarなのはなにか意図があるのかな？と思ったのですが、本書を通し解説で変数のスコープ類には触れていないからだと勝手に納得しました。 - ネットの記事や書物でのこうしたサンプルコードを見る時の嗜みは、中に仕込まれたネタを楽しむこと。と勝手に思っていますが、gamiさんが好きらしい『デッドデッドデーモンズデデデデデストラクション』という長い名前のコミックをJSコードでゲットできます。
デッドデッドデーモンズデデデデデストラクション (1) (ビッグコミックススペシャル)
- 作者:浅野 いにお
- 発売日: 2014/09/30
- メディア: コミック
JavaScriptの本格プログラミング時におすすめのテキストエディタとして紹介しているのは、最近進化が目覚ましいVisual Studio Code, Atom, Sublime Textでこのへんは定番。
そしてインターネット上でJavaScriptの実行を試せるツールとして、Thimble が紹介されていいます。フロントエンドJS入門本だとJSFiddleが載っていることが多い気がするので、これは新たな発見でした。Mozilla がやってるんですね。
一番最後はJS開発では必須となるChrome拡張ツールの説明、例題の解き方や自分のオリジナルのプログラムの作り方など。サンプルは10分間考えて分からなかったらもう写経しようと勧めていて現実的です。
第5章 さらにJavaScriptを学ぶ
今度はGoogleが提供しているサーバサイドJavaScript実行環境でもある、GAS(Google Apps Script)でのJavaScriptを書いていく実装例。G Suiteのスプレッドシート用に、令和にも対応したナウい元号変換の関数を作ります。
そしてもうひとつ、日本では誰でも使うLINEのLINE Botの実装例。ウルトラソウル！と返してくるbotが作れます。LINE上で手続きをして個人別のトークンを取得してから、GASの画面でJavaScriptを書いていくもの。
これが意外に簡単で、要はdoPost()という関数の中で、JSON形式で飛んできたデータに対して返事を加工して、JSONに乗せて返すだけ。UrlFetchApp.fetch という関数がLINE側が用意しているものでしょう。Ajax通信などをかじったことのある方ならすぐ実装できると思います。
また細かいところではメッセージ本文をJSON文字列化した値をpayloadという変数に入れています。この名前の付け方はモダンJS系のライブラリやコードサンプルなどでよく見るので、文化なんだなーと思います。(元は飛行機などの積載量のこと、IT用語としては通信で付加情報を除いたデータ本体を指す言葉。)
このLINE Botの自作は、よく転職で実績アピールのためにGitHubに何か載せようと思って作った…などの話でも出てきます。もっと難しいのかと思っていたら、予想以上に簡単なのですね。今や我々の身の回りの様々なところでJavaScriptは活躍しているのだと改めて思いました。
最後は今後の展開に向けてNode.jsやデスクトップアプリ用のElectron、スマホアプリを実現したJSの仕組みいくつか、そして初心者向けのおすすめ入門書。
そして注意点として、JavaScriptは進化が続いているので世代よって文法が違うこと、エンジニアでも文法全てを覚えるのは不可能でそうしていないこと、そしてプログラミングを学ぶ上で重要だけど初学者が忘れがちな「困ったら人に頼ること」がしっかり書いてあります。なんと著者のgamiさんにも聞いてよいそうで、Twitterアカウントが書いてあります！
まとめ：非エンジニア向けJS入門とエンジニア向けJS再入門の書
あとがきを読むとgamiさん自身も仕事で非エンジニアがJSに苦戦しているシーンによく遭遇し、そうした人々を助けたい気持ちから本書を思いついたそうで、やはり日々勢いを増すJavaScriptは色んな所で使われているのだなあと改めて思います。
非エンジニアの人もプログラムをかじったらもっと楽しくなる…という話は、しがないラジオで度々語られている、スキルを掛け算で持っていくとキャリアが豊かになって楽しくなる話とも通じていますね。
JavaScriptやその周辺技術の界隈というと、まだ拡大中で変化が激しかったり比較的若い世代が多かったりで、ともすれば「Node.js入れてライブラリをガンガン入れてFWはReactやVue.jsでキメ！SPAにSSRにPWAにWeb Components！ まだjQueryで消耗してるの？ 時代はサーバレスでサーバサイドなんていらなくなる！ フロントエンド最強！」みたいな最新技術偏重でちょっとイキった感じになりがちですが(注：誇張してます笑)、こうした基本に返って非エンジニアをターゲットにした視点はなかなか珍しい気がします。同人誌ならではの本ですね。
またターゲットでないとしているエンジニアにとっても、
- JSをあまり知らなかったり苦手なエンジニアのための再入門の一歩
- 忘れている人が多い気がするChromeブックマークレット再入門
- LINE BotやGAS 開発入門の一歩
- これから非エンジニアと接するかもしれないエンジニア向けの心の準備
- JavaSriptと近い位置にある先進企業などで、どんなツール群が使われているかのトレンド把握
などにも役立つと思います。手軽に読めますし、エンジニア以外の視点を養うためにも手にとってみるのも良いと思います。
一方、「会社の標準ブラウザがChromeでない」とか「クラウド上のG Suiteでなくローカル上の伝統のExcelがメイン」などの職場ではすぐには役に立たないかもしれませんが、まあそこは今後でしょう。くっ、Japanese Traditional Big(以下略)も早くIEを根絶してほしいものだぜ…
リンク集とGinza.jsイベント
電子版はBOOTHで500円で入手可能です。#エンジニア銭湯 イベントで話題になった #金春湯技術書コーナー にも本書がめでたく置かれたそうです。
著者のgamiさんのブログでの事前の紹介記事。 jumpei-ikegami.hatenablog.com
そして技術書典終了後の記事。予定通り物理本は200部完売。ハッシュタグは「#非エンジニアのためのJavaScript」です。
jumpei-ikegami.hatenablog.com twitter.com
本書が立ち位置的に似たようなところを目指したという『ノンデザイナーズ・デザインブック』。これは有名な定番本ですね。僕もむかし個人サイト運営時代に前の版のを読みました。デザイナーじゃない人にこそオススメ。
![ノンデザイナーズ・デザインブック [第4版]](https://m.media-amazon.com/images/I/51HKaOqL-RL._SL160_.jpg "ノンデザイナーズ・デザインブック [第4版]")
- 作者:Robin Williams
- 発売日: 2016/06/30
- メディア: 単行本（ソフトカバー）
PLAIDさんといえばフロントエンドJSフレームワークの最有力候補のひとつ、Vue.jsを大規模サービスの中で本格活用していることでも知られています。サーバサイドもNode.jsで同じくJSだし、だからこそ社内でJSに触れる機会が多いのでしょう。
そして最近Twitterで話題になっていましたが、しがないラジオ初期の sp.9a/sp.9bにも出演されていたVue.js自体のコアチームのコミッターでもあるkazuponさん、なんと2019年春からPLAIDに移ったそうです。
僕も読んだ『Vue.js入門 基礎から実践アプリケーション開発まで』の共著者の一人の野田陽平さんもPLAIDの方でしたし、これはVue.jsのすごい人達がどんどん集まっていく流れなのか…？
そして2019/5/22にこの銀座PLAIDでJavaScript関連の新たな勉強会イベント/コミュニティ、Ginza.jsが始動します。kazuponさんも登壇するとのこと。よーしJS力を高めるために僕も申し込んじゃったぞ〜
→【5/18追記】仕事がバグとり週間で忙しそうなので無念のキャンセルです。すみません…
そして…Amazonで検索すると同人誌版と違う書影が出てきますが、シーアンドアール研究所から2019/6/18発売予定であの『完全SIer脱出マニュアル』が出てきます。商業本化のために内容は付録の逆引きしがないラジオあたりの部分がなくなって修正、内容も一部加筆したそうです。
技術書典5で累計1500部、当ブログでも感想を書いたらなんかブクマ550のバズり不動の2位を達成してしまったあの禁断の書がついに…一般の本屋から世に解き放たれてしまうのか…(ゴクリ)
- 作者:池上純平
- 発売日: 2019/06/22
- メディア: 単行本（ソフトカバー）
