タグ: Web制作

ディレクターが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の入門書として良書です。

特定分野の研究は深く掘り下げるクセがあるにも関わらず、Webディレクターを始めるにあたりこの手の標準ルール本からWebディレクションを学ぶという選択肢はなぜか今までなかった。

ここまでなんとなく歩いてはきたけど、口コミの評判が良かったこともあり、去年（2017年）『Webディレクションの新・標準ルール 現場の効率をアップする最新ワークフローとマネジメント』を購入して、やっと最近一通り読み終える。

うんざりするWebディレクターのスキルの広さ

目次を読むと、あらためてWebディレクターという仕事も”身につけるべき”と思われるスキルがたくさんあるんだなーと思いつつ後ずさりしたくなる。

当然わくわくしながら読み進める人もいるでしょうが、たぶん、この本を手に取る人はこれからWebディレクターを始めようという人が多いと思うので、この目次の項目数の多さにおののいてしまう人もいるのではないか・・・。

今思えば、自分が今まで標準ルール本からWebディレクションを学ぶという選択肢がなかったのは、こういった理由だったのかもしれない。

しかし、そういった人もちょっと考え方を変えれば、この本は普段持ち歩くに等しい良書となる。

この本に書いてあるスキルを全て体得してフルスタックなWebディレクターになるのだという考え方を一時的に捨てれば。

「ディレクションの目的と役割」「企画」「設計」「制作・進行管理」「運用・改善」と全5章にわたり、一人前のWebディレクターになるための必要不可欠な知識が完全といっていいほどコンパクトにまとまって網羅されている。

最初から読み進めれば読み進めるほど、たしかにどのスキルの習得もはっきり言って捨てがたい。

が、エッセンシャル思考の本を読んだときにも書いたけど、ここはあえてどんどん切り捨てる。

Webディレクターの守備範囲は人それぞれ

どんどん切り捨てると言っても、好きなところだけを読んであとは無駄という意味ではない。

Webディレクターも組織の環境によって役割の守備範囲がだいぶ変わる。

• ほとんどの工程を内製できるWeb制作会社
• 企画立案がメインの上流工程を主体としたマーケティング会社
• メーカーのマーケティング部門、並びにインハウスWeb制作部隊
• 印刷・製版会社の中のWeb制作事業部隊

自分のバックグラウンドも大きく影響するが、周囲の環境によって守備範囲が変わるのは物理的にも避けられない。

特に、比較的にWeb制作のリテラシーが高くないと思われる印刷・製版会社では、組織と自分（たち）との狭間で根本的な考え方の違いで苦悩と奮闘の日々を送ることになることが想定される。

ポジティブな行動として組織改革が考えられるが、そこに労力を費やす余裕はこの本を読んでいる時点ではきっとない。

人それぞれに合った効率的な読み方

したがって、その環境・案件に適用するスタイルを確立するためには、今の自分に絶対的に必要な知識からチョイスして読み進めることをおすすめする。

チョイスをしたら、その分野を別の本なり、勉強会なり、ネットなりでもっと深く掘り下げていけばいい。

当然、最初から最後まで一読しても面白くて有用な内容だけど、もはやWeb制作会社だけにWebディレクターがいるわけではない現在において、こういったチョイス方法は相応かと思う。

本書CHAPTER 1でも、事業会社の社内ディレクターの役割と必要なスキルセットも紹介されているほどだし、しつこいようだが、Webディレクターは受託会社だけに存在するわけではない。さらにUXなどの人間中心設計についても科目として取り上げられているあたりが、今回の標準ルールに「新」をつけた理由のひとつなのだろう。

繰り返しになるけど、この本は立派なWebディレクターになるために必要な知識が完全といっていいほどコンパクトにまとまって網羅されているので、現在のWebディレクションに関するスキルセット内容を俯瞰的に把握できるという点もこの本の特徴のひとつ。

そういった意味では、一人前のWebディレクターへの道を計画的にロードマップを立てるのにも使えると思った。

好きなところから読み進め、何かの壁にぶつかった時に開けば助け舟にもなるかもしれない。

Webディレクションの新・標準ルール 現場の効率をアップする最新ワークフローとマネジメント

この記事で紹介しているのは『現場の効率をアップする最新ワークフローとマネジメント編』です。

『システム開発編 ノンエンジニアでも失敗しないワークフローと開発プロセス』というのもあるので、気をつけてください。

Webディレクションの新・標準ルール システム開発編 ノンエンジニアでも失敗しないワークフローと開発プロセス

とはいえ、この開発編も非常に気になりますが。

本質を押さえてから

と、ここまで偉そうに書いてきたけど、本書の冒頭に以下の文章がしっかりと書いてある。

（省略…）では、上記（様々な技術や知識を要すること）を満たすため技術に長けたフルスタックなWebディレクターでなければならないのか？もちろんできればそれに越したことはないが、それがWebディレクターの本質ではない。……

前述のようにどこから読み進めるべきかは人それぞれだが、サブタイトルに「現場の効率をアップする最新のワークフローとマネジメント」とあるように、物事（プロジェクト）を円滑に進行することに重点を置く思考こそが、やはりWebディレクターが最初に身につけるべき最優先事項なのではと思う。

必要なテクニックが多く網羅されているともいえるのだが、「ディレクターはこうあるべき」という思考はとても大事で、本質を捉えてから多くのことを学んでいってっも遅くはない。

むしろ、このエッセンスを理解していないと、のちに多くのスキルを身につけていく過程で自分が何者だかわからなくなるという、急に自分探しの旅に出なくてはならなくなるという恐れがある（自分がその傾向にあった）。

ちなみにまったく別の本のだけど『ディレクション思考』という本はWebディレクターのエッセンスを刷り込むのに大変おすすめ。

初歩的な問題から効率化を図るテクニックまで

最後になって気になる内容についてだが、各科目についてははっきり言ってAmazonのなか見!検索を見ていただいた方が手っ取り早い。そこで目次も見ることができる。

本質を理解したうえでも、いざWebディレクターとして実際に走り始めてるとミクロな部分ですぐに壁にぶち当たる現実。

• キックオフミーティングの開催はいつ？
• どのサーバーを選べばいいのか？
• 工数計算の算出法は？
• MacだからExceでドキュメントを作ったことがない・・・
• DNSって？公開のタイミングがわからない・・・

上記のような初歩的な問題から、「見込み案件の見極め」「運用後の課題管理」「商流のパターン」「Webサイトの検収の見極め」といった、さらに効率化を図るテクニックやリスクマネジメントまで。

そういったリアルな現場で直面した時に役にたつ対処、習得しておくとディレクションがさらに効率よくなる知識が、見開き2ページ単位で具体的に紹介されている。

僕は最初この本を知り合いから借覧していたが、現在はKindleで購入しMacBookでいつでもどこでも引けるようにしている。