JavaScriptをめぐるパラレルワールド 〜Webデザイナーから見た今どきのフロントエンド事情〜

どうも、ほそだです。ゴールデンウィークも終わり、暖かい空気を感じる季節になりました。

さてちょっと前に、こんな記事が話題になっていました。

You Don’t Need jQuery – Qiita （旧題：もうjQueryは必要ない）

元々は海外の方が書かれたものを日本語訳してくださったものですが、あらかた網羅されていて感服しました。実は今回、これと全く同じようなことをこのブログのネタにしようと考えていたのですが（jQueryでやってたことをjQueryを使わずにやってみた的な）、締切間近になってさあ書くぞってタイミングでここまで完璧なものを先に出されちゃったので、こりゃ勝てねえと泣く泣く断念したのですよね。。

それで急遽新たにネタを考えなきゃいけなくなったのですが、これに対するネット上での反応がけっこう興味深いなと思って見ていました。

「もうjQueryは必要ない」に関するみんなの反応 – Togetterまとめ

おそらくJSって歴史的な経緯でいろんな立場の人が使うようになったので、それぞれ同じものを見ているつもりが実は違う見え方をしていて、その一つの象徴がjQueryだったりするんじゃないのかなと。

というわけで今回は、いわゆる昔ながらのWebデザイナーで非エンジニアな僕にとって、JSの世界がどう映っていたのかという話を中心に、昨今のフロントエンド界隈について感じたことなどをコラム的にお送りしようと思います。

僕が見ていたJSの世界

はじめに

まず僕のバックグラウンドについてざっくりお話ししておきます。

この仕事をはじめたのは2000年代中頃で、特に何か学生時代にデザインやプログラムを学んだというわけではなく、純粋に食い扶持としてバイトからはじめて独学で覚えていきました。当時はまだWebの技術も今ほど複雑ではなく、一方でサイト制作の需要はあったので、音楽バカでフリーターだった僕のような人間でも多少絵心があれば入り込む余地がありました。そういう意味ではラッキーな時代でしたね。

はじめたきっかけはそんな感じなんですが、Webデザイナーとしての技能はわりと順当に時代の要請に応じてきたのではないかなと思います。率先して先進的なことはできないけど、ちゃんとトレンドに遅れないようにはしてきた感じ・・・要するに可もなく不可もないタイプですね。。

jQueryとの出会い

JSを本格的に使うようになったのは、やはりjQueryの登場からです。それまでは画像をマウスオーバーさせるにもDreamWeaverのビヘイビアで自動生成したりしてました。jQueryが出てくるまではDOMの概念がよくわかっていなかったので、せいぜい自分で書くにしても window.open()とかその程度だったと思います。

それに、アニメーションを伴うものは長いことFlashが担当していました。僕もFlashは好きだったので、基本的なプログラムの語法はJSよりも先にActionScriptで身につけていたような気がします。まさかその後こんな感じになってしまうとは想像できませんでしたけど。。

jQueryを使うようになってからは一気にできることが増えました。jQuery makes me free…!

そんな僕にとってJSのスキルとは？

2010年以降、Flashが失墜していく一方で、それまでFlashでやっていたことのニーズが減ったわけではないので、Webサイトにおけるリッチな表現がJSに求められるようになりました。

その代表格はやはりパララックスですかね。さすがにもう落ち着きましたけど、一時は本当に多かった。一口にパララックスと言っても同様の手法を用いて様々なバリエーションがありました。あと思いつくのはPinterest風のダイナミックなレイアウトとか、背景を全面動画にするとか・・・。そういった「表現」を身につけていくことが、僕にとってJSを学習するということでした。

なのでプログラマーとしてすごいなあと思う人は元Flasherの方が多かったです。そっち方面の人はJSになってもCreateJSとかthree.jsあたりを使ってるイメージがあります。逆にサーバーサイドのエンジニアは自分とは遠い感じがして、あまり関心がありませんでした。

突然現れた僕の知らないJSの世界

知ってるJSと違うんですけど問題

2014年から現在まで参加しているドワンゴのプロジェクトにデザイナーとして加わるのですが、そこではじめてエンジニア文脈のJSに触れてカルチャーショックを受けることになります。

いくつか具体例を挙げると…

1. テストを書く

一番ショッキングだったのがこれ。長らくやってきてそんなこと考えたこともありませんでした。

2. 変数・関数の考え方

それまでは単純に、変数は値を格納しておくもの、関数は処理をまとめておくものくらいに考えていました。まあそれはそれで説明としては間違いではないと思うのですが、変数は副作用をもたらすから再代入しないようにするとか、関数はできるだけテストしやすいように引数で外からパラメータを渡せるようにして戻り値をとるように作っておくとか、そういう考え方に慣れるまではなかなか時間がかかりました。

3. import (require)

JSでもこういうことができるんだなーと感動したものです。一応、リクエストを減らしたほうがいいらしいというのは認識していたので、読み込むJSファイルを結合してminimizeするくらいはしていたのですが、もっと早く知りたかったなあという感じです。

4. npm modules

これも今となっては早く知りたかった案件ですね。便利。

きっかけはNode.js？

僕自身、それなりにJSの情報はキャッチアップしていたつもりだったのですが、観測範囲が違っていたためか全くこういった話に触れることがありませんでした（Web DesigningとWEB+DB PRESSの差？）。もしかしたら目の届くところに情報はあったのかもしれないですが、完全に意識の外でスルーしてましたね。。

おそらくNode.jsをきっかけにガチなエンジニアの方々がJSに本格参入してきて以降の流れなのかなと思ったりするのですが、Node.jsって僕の中で「サーバーサイドでもJSが使える」っていう話で止まっていたので、やっぱりちょっと自分とは関係のない遠い話に感じてしまいました。

こちらの世界においてJSのスキルとは？

少なくとも僕が考えていたような「表現」といった話ではなさそうです。最終的に動けばOKという感じでまわってきたJSの文化に、他のプログラム言語同様の秩序を与える・・・そのために必要な技術力のことを指しているように見えます。秩序のないJS界にドロップキック。
僕がこれまで「技を増やす」ような取り組み方をしてきたのに対して、エンジニアの方々は「最適解を探していく」ような印象を受けました。

それぞれの思考の違い

現実空間と抽象空間

先述した関数の話とも通じるのですが、エンジニアの方ってインプットとアウトプットで考えますよね。当たり前じゃねえかって言われちゃいそうなんですけど、実は僕はそんな発想でJSを書いてなかったので新鮮でした。どちらかと言うと何かを操作するものという感覚が強いです。それはDOM操作がメインのjQueryから入った影響かもしれません。

Reactみたいなものを使ってみると、jQuery的な発想と全く違っていて驚かされます。僕はJSを使う時、常にウェブブラウザという現実空間と格闘してきた感じがあるのですが、エンジニアはいったんひとつ上の抽象空間で物事を考えて、最後に現実空間にアウトプットしているようなイメージがあります。Virtual DOMなんてのはまさにそういうことなのかなと。

たまにエンジニアがJSやCSSは難しいと言ったりするので、そっちで普段やってることの方がよっぽど高度で難解じゃないかと思っていたのですが、よくよく聞くとそういうことではなくて、JSやCSSが受け持っている「抽象空間からはみ出た領域」も含めてきちんと秩序付けるのが難しいってことなんですね。現実空間にはIEみたいなならず者がいますし。

jQuery、下から見るか 横から見るか

冒頭の記事に関してですが、僕も以前だったら「むしろjQueryすごくね？」と反発してたと思います。でも混み入ったSPA的な実装をjQueryでやってみてその相性の悪さに辟易させられた今となっては、jQuery否定派の言い分もよく理解できます。

一方では超便利、もう一方では超厄介・・・面白いですね。こいつをどう思うかでパラレルワールドのどちらの住人かがわかるリトマス試験紙になりそうです。

個人的にはjQueryを特にレガシーだとは思わなくて、まだまだ用途によっては有用だと思っています。これからもケースに応じて使っていくでしょう。決してオワコンになってしまったのではなくて、日本のプロ野球における巨人のように一強時代が終わって数ある選択肢の一つになったというのが僕の認識です（野球は全然知らないけど）。

まとめ

以上、非エンジニアな僕の目から見たJSの世界の話を綴ってみました。

もちろんあくまで僕固有のケースということで非エンジニアのJSerを代表するものではないですし、デザイナーでJS書くけどちゃんとエンジニアの文脈を踏まえていたぜというフルスタックな猛者もいることでしょう。

ただ、僕と同じような距離感でJSを使ってきたタイプの多くは、昨今のフロントエンドの話ってエンジニア文脈強すぎてなかなかついていくのが大変なんじゃないかという気がします。僕はたまたま運良く巻き込まれる形で足を踏み入れましたが、はたして独学のままで理解できていたかというと相当怪しい。

なのでチームで開発する場合は、予めフロントエンドの役割分担をはっきりさせておくのが重要ですね。最近は良いプロトタイピングツールがいろいろ出てきてるので、JSを書くのは全部エンジニアに任せちゃうってのもアリなんですけど、モーション系なんかはデザイナー寄りの人間のほうがアイデアを持ってる気がしますし、実際にコードを書くことで出てくるアイデアというのもあったりします。そうやって共同作業していく中で、少しずつエンジニア文脈に慣れていったらいいんじゃないかと思います。

One more thing…

完全に余談なんですが、ちょっと前にAmazonのセールで買ったこんな本を読んでて、なぜか途中からJSに想いを馳せてしまいました。

英語はいかにして英語になったか？: 「英単語成立史」の視点から : 晴山陽一

英語の歴史はグレートブリテン島の他民族による被支配の歴史で、元々は僅かな語彙しかない地方言語だったものが、多民族の侵略を経るにつれてそれらの語彙を吸収していって、今の形になったということなんですよね。

JSもそんな感じでプログラム言語としては貧弱なんだけど、他言語を知るおせっかいなエンジニアたちが「なんでこんなこともできないんだ！俺ができるようにしてやるぜ！」と息巻いていろんな発明をしてきた結果、ここ数年で一気にカオスになったできることが増えていった印象があります。

もし将来的にプログラミングがもっと生活の中でカジュアルに行われるような未来が来たら、その時公用語的に使われているのはJSなのかもしれないですね・・・！