CSS Nite LP, Disk 9「Coder's Higher」に参加してきました。

内容については、上記告知サイトにあるリンク、Web Designing ４月号（もうバックナンバーになっちゃいましたが）、あと以下の本が参考になると思います。

• 羽田野太巳「徹底解説HTML5マークアップガイドブック」
• 大藤幹「XHTML&CSS超高速コーディング術」
• 西畑一馬「Web制作の現場で使う jQueryデザイン入門」
• Jeremy Keith「DOM Scripting 標準ガイドブック 〜やさしく学ぶ、JavaScriptとDOMによるWebデザイン〜」

全体としては理論の話と具体例の紹介のバランスが良く、幅広い層が楽しめるイベントになったのではないかと思います。関係者のみなさま、どうもお疲れさまでした。

以上レポ終わり！・・・ではなんというかアレなので、恒例（？）の感想文を書いていきます。

このエントリのタイトルにもあるように、今回のイベントでの学びは「どうコーディングするか？」という問いに対する回答それ自体ではなく、回答の背景にある考え方がポイントだったと思っています。が、その前に、今回も含め最近よく目にする「ライブコーディング」について思うところを書きます。

これまで僕が見てきたのがたまたまそうなだけかもしれませんが、なぜライブコーディングをしたのか謎なプレゼンが多いんですよね。今回は、大藤さん＆大杉さんのコーディング術のセッションと、小山田さん＆益子さんのHTML5の解説のセッションでライブコーディングが行われていました。でも正直僕の目には、セッションの内容と目的からいって、どちらもライブコーディングじゃなくて良いのでは？と映りました。

Web Designingの連載を愛読していた僕にとって、大藤幹さんは大好きなライターさん。大杉さんとの著書「XHTML&CSS超高速コーディング術」も意欲的で面白い本です。だからかなり期待していたのですが、70分という時間がどうも間延びしてしまった感がありました。冒頭に「７つの習慣」の話を持ってきたあたり、作業に取り掛かる前の準備と手順管理が大切、というような「考え方」の話が主軸だったと思うんです。でも、ライブコーディングに時間を割いたことで、個々のオペレーションに聴衆の目が行ってしまい、さらに大杉さんが操作中に口頭で解説をすることが少なかった（これはそもそもやりながらしゃべるのに無理があるので仕方ないです）ので、何がポイントなのか聞いていてつかみづらかったように思います。キーとなっていたはずの「シャドウコーディング」も、理論の部分をもっとスライドで説明してもらえれば、なぜそれが必要なのかより伝わった気がします。お二人は魅力的なコンテンツを持っていると感じていただけに、結果的にそれが見えにくいプレゼンの構成だったのが残念でした。

一方で小山田さん＆益子さんのセッションは、ダブルスクリーンの片方にはコーディング画面を、もう片方にはその解説を表示させ、お二人がコーディングと解説を分担するようなスタイルで、見せ方として工夫されているなと感じました。でもライブコーディングの良さが出ていたかというと微妙でしたね。XHTMLからHTML5にマークアップを修正するという作業では、そもそもそんなに大幅には書き換えることがないわけで、修正部分を取り出してスライドにしてしまったほうが、より見やすく、時間に追われて終盤駆け足になることも避けられたのではないかと思います。こちらも実践的な内容でお話もよかったのに、残念です。

そもそも、ライブコーディングはどんな目的があってやるものなんでしょうか。オペレーションの早さと正確さというスキルを示すものだったらわかるのですが、今回のセッションはそういうパフォーマンスが必要なものではない気がしました。スクリーンは小さくないとはいえ、コードを見やすく表示するには相応の拡大表示が必要です。アプリケーションの切り替えやDreamweaverのパレットの表示は、発表者の操作も複雑にし、表示できる領域も小さくするので、やっていることが聴衆に伝わるのを妨げてしまう側面が強いのではないでしょうか。やるならば、エディタだけを目で追えば必要十分な理解が得られる、そんな形にしないと魅力が伝わらないように思いました。むー、ライブコーディングって、なんなのでしょう。

さて、脱線はこれぐらいにして、本題です。

今回のセッションで上げられた具体的な方法は「これをやってればOK」とか「すべてこれで解決します」とかいった、単純で実行しやすいTipsは少なかったと思います。例えば石本さんのセッションでは、表示速度の改善のためのコーディング手法が紹介されていましたが、適用範囲を広げるとメンテナンス性が落ちるなど、トレードオフの関係、バランスの見極めが重要だという話でした。徳田さんや長谷川さんのJavascriptの話にしても、JavaScriptを使えばユーザーに対して必ずプラスになるとは限らない、という点が強調されていました。何事も総合的に判断しないといけないわけです。

HTML5の解説をした小山田さん＆益子さんも、aside要素の説明には苦慮されていた感じでした。たぶん、プレゼンのトーンを重くしない配慮もあって、小山田さんが「関係ないコンテンツをマークアップする」と最初説明されたのですが（僕も授業でそういう言い方をして誤解されたりするので自戒を込めてですが）、その説明だと「どういう視点において何に対して関係ないのか」という疑問が残ってマークアップができないんですよね。極端な話、関係ないんだったら情報としてそもそも存在する必要がないんじゃない？という。より正確には「関連性の低いコンテンツ」ということでしたが、何と関連性が低いかを考えると、他の要素の役割を理解し、ページにおけるコンテンツの文脈を考えたうえで判断していくしかない。そこには竹を割ったようなわかりやすさはないので、確かに不安にもなります。でも「やり方を覚えてしまおう」ではなく「関係する領域も含め全体を見よう」とすることで、理解が深まって、より柔軟に適切な対応ができるようになるんだと思います。

大杉さんのコーディング手法も、Tipsとして闇雲にまねるのでは意味がないですよね。ビジュアルが固まった状態のものを大量に効率良くマークアップする、マークアッパーのレベルにバラつきがあったとしても生産性を一定以上キープする、という前提を理解した上で、その価値を捉えなければなりません。僕らは例えば、HTMLプロトタイピングをするようなフローではどうか、ページ数が少なく個別に最適化することが重要な場合はどうか、と考えてエッセンスをつまんでいければいい。そんなふうに考えて自分のものにしてはじめて、身についたと言えるんじゃないでしょうか。

これはアフターパーティーでコーディングコンテストの審査員の方からお聞きしたのですが、審査の時間はとても有意義だったそうです。マークアップの視点が応募者ごとに違っていて、その評価について意見を交換するのが楽しかったのだとか。当日は時間が押していたこともあり、個々の受賞作品の具体的な特徴についてはあまり言及されませんでした。ぜひ審査の場で交わされた話が聞きたいですね。Web上に様子とかはアップされないんでしょうか。コーディングの意図、アプローチの違い、そういう部分を知ることによって、HTML5の理解はいっそう深まると思うので。

自分も含めて、忙しいと判断に時間をかけられないので、わかりやすいもの、扱いやすいものに流れていってしまいがちです。こういう学びの場でも、つい特効薬を求めがち。でもその状況が長く続くと、なぜその手法を選択するのか、他によりよいやり方はないのかすら考えなくなってしまう怖さがあります。安易なTipsは思考停止を生む、というかね。

でも考えようによっては、正解がないから、考える余地、チャレンジする余地があって楽しいとも思うんですよね。もう一度関連情報に目を通しながら、自分の状況では何をやっていけばいいのか、考えようと思っています。今回もいろいろ勉強になりました。