美しい仕事とは!? ひとしごと終えて考えてみた。


ここ2週間ほど、練習として新しいウェブサイトを作っていました。担当したのはコーディングで、第1弾が昨日完成。ものすごい達成感です。コード書くこと自体が楽しくて、分からないことを聞いたり調べたりするのも楽しくて、達成感も味わえて、こんな幸せでいいのかと疑心暗鬼になります。

さて、できあがったコードを師匠に見せ、フィードバックをもらいました。そうだろなー、そうだよなー、って感じです。師匠、的確で分かりやすいフォードバックありがとうございました!本エントリはその記録です。

ただ、テクニカルな話だけを書くとみなさん「???」で終わってしまうので、何となく一般論に昇華させてみました。思いつきの抽象論なのでさらっと読んでください。



本題に入る前に…コーディングとは!?

詳しい説明は省きますが、ウェブサイトは主に、 “HTML” と “CSS” という、2つの材料を使って作られています。カフェラテのエスプレッソとミルクみたいなもんです(適当)。たまに “JavaScript” とか “Flash” (フレーバーシロップにあたるのかな)を使う場合もあります。

このウェブサイトはこういう名前でこういう内容で、メインコンテンツはここでリンクはこっちなどなど、サイトがもつ情報のすべてを文字情報として記述したのがHTML。CSSはデザインを担当し、この内容はページのどこどこに配置して、幅はこんなんでうっすらシャドウをつけましょうとか、次々に指示しています。

コーディングとは、ウェブサイトを論理的に記述[HTML]して、デザイン情報を加える[CSS]という、2つの作業を指しています。

ありがたくおそろしきオープンソース

普通、プログラミングしたコードを、一般人が見ることはありません。エアコンに使われているプログラムがどんななんて見たことないよね。でも、ウェブのコードは誰でも見れるようになっています。Mac/PCでウェブサイトを見ているとき、ブラウザの「表示」タブとか右クリックとか使って「ソースコードを見る」的なところをクリックすると、ほら!現れましたね!それがソースコードです。

広義のプログラミングの中でHTMLやCSSは「オープンソース」と呼ばれているそうです。ぼくはオープンソース至上主義者のはしくれです。なぜなら、世界中のあらゆるウェブサイトについて、どうやって作られているか簡単に調べることができるからです。あぁありがたい。逆に言えば、自分が作ったサイトを他の人が見て、「フッ…」と鼻で笑うかもしれない。あぁおそろしい。

コードはなぜ美しくあるべきか?

上記のように、美しいコードを書くべき理由の一つは、不特定多数の人に見られるという、こそばゆいけど誇り高いオープンソースならではの性質にあります。

もう一つの理由は、プログラミング全般に言えることだと思いますが、仕事を早く正確に行うため。複数人で仕事をするとき、他の人が書いたコードに加筆修正する場面もあるでしょうし、半年前に作ったコードを自分自身で改良することもあるでしょう。一定のルールに沿って美しく書かれているかどうかは、仕事のスピードを決める最も重要な要素の一つです。

最後に持論を一つ。コードはなぜ美しくあるべきか。それは、すべてのものは美しくあるべきだからです…

美しいコードを書くために。ぼくが得たフィードバック

師匠からのフィードバックを、課題として羅列していきます。

1.セレクタのネーミングセンスを鍛えよう。

divのidとかclassとか、誰が見ても分かりやすい名前を付けられるように。経験によってセンスを培いましょう。そのためにはたくさん作ること、たくさん見ること。精進します。

2.どこに何があるか分かりやすいCSSを書こう。

<悪い例>
#localnavi{
padding:0 0 20px;
}

<良い例>
#side #localnavi{padding:0 0 20px;}

塵も積もれば山となる。なるべくスクロールが少なくなるように。スクロールが少ないと一つのセクションのCSSが画面におさまります。

3.フレームでぶったぎるのはほどほどに。

あまり記述をわけると探しづらい。抜き出してぶったぎるのは最低限の大枠だけにして、他はまとめて2のように書くこと。

最後に…美しい仕事とは!?

美しさはやさしさです。

ここまでテクニカルな話として書いてきましたが、やろうとしていることは結局、仕事を進めるうえで自分や仲間にやさしくあろうよ、ということです。どの職場にもルールはあります。これもやさしさ。ルールを守れば何がどうなっているか一目瞭然で、自分も仲間も仕事が早く進むからです。

むかしバリスタになりたてのころ、ピークタイムが苦手でした。1時間に百杯以上のドリンクを作る必要があり、そのためのスピードが自分にはないと思っていたから。でも今思えば、必要なのは自分の動きのスピードではありませんでした。

変わりに、ピークタイムの(=複数人で仕事をする時間の)バーで必要なのは、やっぱりやさしさでした。自分のやってること、これからやることを仲間に知らせ、動きに過不足が出ないようにすること。作業をしやすいよう常にカウンターを綺麗に保つこと。幾つかの工程を並行して進められるよう順番を組み立て、それを仲間とシェアすること。それぞれは3秒で終わるこれらのことを、急がば回れで先手を打って済ませておくことです。

上記のことをきちんとやっていると、結果的にスピードが上がり、かつ美しさも生まれます。コーディングでもバリスタでも同じでした。きっと他の仕事にも役立つと思います。

なんだか悟りを開いた人の話みたいになってしまった…今日も長文お付き合いありがとうございました。これでも短く書こうとしてるんですが。。。
仕事行ってきます!