ディレクターがJavaScriptを基礎から学びなおす
組織の都合もあるけど、Web制作を俯瞰的に見れるよう自分のキャリアアップのためにもディレクターへシフトしたものの、Webデザイナー時代にもっと経験を積んでおけばよかったと今でも思うプログラミングスキル「JavaScript」。
考え方は人それぞれ違うかもしれませんが、僕の場合Web制作の仕事をしていくうえでディレクターになった今でも時折JavaScriptをマスターしたいという衝動にかられます。
以前、オライリージャパンから出版された『デザインの伝え方』の著者が、プライベートの時間に本業のデザインから離れクラシックカーのリペアをしているのを読んで、僕もこの夏、なにかを本業とは別の分野の研究や学習をし直そうと思っていました。
『デザインの伝え方』の著者Tom Greeverは、クラシックカーを弄り通して、当時のエンジニアから多くのことを楽しみながら学び、本業へフィードバックしており、クリエイティブな仕事をしている身としてこのライフスタイルに共感しました。
本業のWeb制作に活かせるかはわかりませんが、普段にらめっこしているパソコンやスマホから離れ、別の分野に没頭するために、はんだごてとニッパーでも買って鉱石ラジオをスクラッチ開発してみようかと思った矢先、ふらり立ち寄った本屋で面だしされていた、ある一冊の本のタイトルが目に止まりました。
スラスラ読める JavaScript ふりがなプログラミング
というわけで、ディレクター職がメインの僕はJavaScript（以下、JS）初心者レベルなのですが、本屋さんで『スラスラ読める JavaScript ふりがなプログラミング』という本を見かけて立ち読みしたとき、「この本なら今度は挫折しなそう」という気がして久しぶりに衝動買い。
スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)
別に他分野にこだわらなくても同じWeb制作の分野で身近に関わっているコーダーやフロントエンジニアのスキルの一環を学ぶのも必ず本業に役に立つ。
さらに、2020年度から小学校でプログラミング教育が必修化されることが明示されたことにより、自分の子どもの勉強を見てあげられるのでは？
と、自分に言い聞かせ、鉱石ラジオのスクラッチ開発は来年の夏休みに先送りにし、再びパソコンの画面に戻ってきました。
著者はリブロワークスさんで、監修は、ネット上でもフォローさせていただいているGoogleやMicrosoftを渡り歩いた日本を代表するエンジニアの及川卓也さん。
終始ふりがながふってあることでソースの意味を理解。
過去にもこのような教材があったのか知りませんが、この本はタイトルの通り、本書内にある全てのサンプルプログラミングのソースコードに、もれなく「ふりがな（ルビ）」がふってあるのが最大の特徴。
最終章まで繰り返し付きまとう「ふりがな（ルビ）」のおかげで、覚えが悪い初心者の僕でも本書をもとに学習し終わった頃には演算子、関数、変数、式の書き方や基本的なルールなどを頭に叩き込むことができました。
読み下し文によってさらに理解への補完に。
変数、演算子などの単語ひとつひとつに細かくふりがながふってありますが、英単語の様に、ふりがな部分だけを繋げて読んでも日本語の文法としてはおかしい状態です。
よって、ふりがながふってあるサンプルのプログラムの下には、「読み下し文」も記載されていて、プログラミングコードの式の理解をさらに深めることができます。
今思えば、もしこの読み下し文が無くふりがなだけだったら理解し難かったと思います。
ソースコードのサンプルをダウンロード。
1章〜5章までに本書内で出てくるサンプルのプログラムコードがダウンロードできます。
最初にダウンロードしたものの、僕は２ヶ月間ゆっくり時間をかけてこの本で実習したので、結局最後まで使うことはありませんでした。
ですが、時間が無い中どうしても記載通りに書いてるのにプログラムが動かない／エラーになる、または、4章（Chapter4）までは、テキストエディタに書いたプログラムをGoogle Chromeのコンソールを利用して動作確認をするのですが、最終章の5章（Chapter5）では、実際にHTMLファイルを作成して動かすので、うまくいかない時に差分用としてあると便利です。
JavaScript ふりがなプログラミングを読んで
実際のプログラムの書き方の前に、1章ではJavaScriptとはどんなものかの話から始まります。
JSのバージョンであるES5とES6の説明もあり、基本的に今後移行しつつあるES6に基づいて章が続きますが、ES6では対応できない書き方についても別の章で解説されています。
また、本書の読み進め方とJSを書くとための準備として、Web屋にお馴染みにChromeデベロッパーツールのコンソールと、テキストエディタ（Atom）を推奨していますが、僕の場合、動作を確認するためのコンソールはChromeを使いましたが、エディタは日頃から慣れ親しんでいるAdobeのBraketsを使用しました。ここら辺は使い慣れたツールでいいと思います。
どの章にも後半にエラーメッセージの読み解き方が紹介されており、制作実務でバグっているときに、社内の新米Webデザイナーとデベロッパーツールをにらめっこしてても理解できないことがあり、いちいちベテランに来てもらってたこともあったので、これは僕にとって良い勉強材料になりました。
1章の中盤、実践学習からは、いよいよ文字列の表示の書き方から始まり、その後、演算子を使って簡単な計算（四測計算）の書き方に進みます。
「またか」と思いました。
JSの個人的なイメージとして、ひと昔前は入力フォームの様にユーザーに何かを入力してもらった結果を素っ気なく表示したりといった印象でしたが、最近だとスライドショー、モーダルウィンドウ、その他スクロールエフェクトなどの華やかな動きの役割を担うプログラムの印象が強いので、以前学んだときも足し算掛け算などのこういった地味な計算から学ぶのが非常に退屈だった記憶があります。
しかし、「+」「-」「×」「÷」といっ演算子の使いこなしが今後重要になることを理解してきて考え方が変わりました。以前購入した技術書やネットスクールで学習をしていた頃は、この地味な計算式から覚えなければならない退屈感から挫折した記憶があるのですが、本書は２名のキャラクターイラストがストーリーを展開しており、図版や優しい色使いのせいか、緊張感なく基礎の大切さが伝わりました。
ちなみに、最初はエディタの入力保管機能は使わず、慣れるまで直打ちの繰り返しを徹しました。そのおかげで各章の最後のドリル問題にて、自然にコードが打てるようになりました。
やっぱり、何かを覚える時には書く（打つ）って大事だと思います。
初心者とはいえ、for文の条件分岐、while文などのループ、配列のarrayなどは、WordPressのPHPをいじっていた経験もあり比較的に理解しやすかったけど、やっぱりエッセンスというか、基本を理解していなかったので、この本でJSやプログラムの原理が学べて充実した夏の自由研究を終えました。
当然この本は、僕の様なディレクターではなく、これからJavaScriptを学ぶWebデザイナー、フロントエンドエンジニアの初学者におすすめです。
誤植について
JS初心者の僕が読み進めていると、どうしても理解できない部分があり、調べて見たら数ページに誤植があることに気づきました。
版元のインプレスブックスのサイトから確認できるので、つまずく前に確認することをおすすめします。
インプレスブックス紹介ページ
https://book.impress.co.jp/books/1117101139
今回紹介したJavaScriptの姉妹本で、Python版も出ていました。
スラスラ読める Pythonふりがなプログラミング (ふりがなプログラミングシリーズ)
番外編：ディレクターにJavaScriptの知識は必要か？
「ディレクターはコーティングしてはいけない」という言葉を耳にすることがあるけど、その通りだと思います。
ディレクターの仕事は、あくまで「なるべくプロジェクトを円滑に完遂することが基本」なので役割として不当に思うし、そもそも複数のプロジェクトの舵取りの片手間にコーディングをやる暇がない。
一人でWeb制作の1から10を担った経験がある人なら尚更わかると思うけど、それはかなり荷が勝つことです。
しかし、JSに限らずPHP、HTML、CSSの知識はディレクターといえども持っていて不都合は当然ないどころか役に立ちます。理由は以下の2つ。
クライアントの前ではっきり可否
上流工程のクライアントとの会議において、目前のクライアントは遠慮なく技術的な質問をしてきます。
ディレクターだろうが、デザイナーだろうが、コーダーだろうが、なんだか知らないけどクライアントにとっては目の前にいる人間はWeb制作者に見えています。
PHPなどのバックエンドプログラムにもいえることですが、オリエンの時点でアサインするメンバーはほぼ決めているので、費用感や技術レベルを会議の場である程度は把握していますが、あまりに複雑で多くのパターンを要する条件分岐の要望があった際に、「この予算でこの仕様は可能か？」との質問にその場で答えられないことが多々ありました。
「多分大丈夫です」「宿題にします」「勉強します」とその場を切り抜けたり、その場で直接エンジニアに電話や、こっそりSlackなどで聞いたりすることもありますが、やはり即答できてミーティングを円滑に進められることが望ましいと思います。
プログラム上のトラブルの早期対応
納品後にプログラム上のなにかしらのトラブルが発見された時に、協力会社のコーダーにいちいち時間を作ってもらうより、その場で自分で解決策をみつけたほうがよほど早い場面もあります。
ただ気をつけなければならないのは、自分で直せるからといって毎回自分で作業しないこと。
矛盾しているかに思えますが、ディレクターには他にやらなければならない優先事項が多々あるのでタスク優先度としては低い。あくまで緊急時。エラーの原因の究明まで終えルことができたら、あとは極力エンジニアに任せた方が良い。
そういった意味では、前述の通り本書に書いてあるエラーの読み解き方はとても参考になります。
なにはともあれ、この本は社内のデザイナー達に共有しようと決めるくらいJavaScriptの入門書として良書です。