フロントエンドエンジニア – いろいろ考察2017年版 その壱

俺は怠け者

基本的に俺は仕事をしたくないんだよ。とは言え、”仕事をしないでお金がほしい”わけではないんだな。この場合はお金は具体的な物質であり、概念じゃないんで。概念的な話を踏襲して説明するなら、”働かないで生活できるのが理想” が正解だろうね。

現実的にはラットレースから抜け出してファストトラックにでも行かない限り、ほとんどそれは実現不可だと思ってる。まぁアタリマエだよね。でも仕事とかしたくないからどうすればいい?という話。

仕事したとしても、最低限の作業量でその5倍位の成果が出せればいいかなって思う。昔は3倍くらいを目指していて、実際に実現できていたけど、結局精神的にも肉体的にも若かったからできた技で、技である以上研鑽していかないと、すぐにサビが出ちゃうんだよな。もう当時の手法は今では通用しなくなってる。

当時の俺はこんな感じだった。

俺たちWebエンジニアは、結局最終的にはLinuxサーバにデプロイするんだから、作るときもLinuxでいーじゃねーか!なんで無理やりバカ高いWindowsとかMacとかつかってんの?そもそもなんだよXAMPPとかMAMPとか、バカが使うバカツールか?バカは一生バカやってろ!俺はクライアントマシンをLinuxにする!

職場のWindowsマシンに無断でFedora上書きしてみた。これで2年ほど作業したけど、本気で効率2倍にアップしてた。更に努力して最終的には他の社員より3倍速で作業してた。

ただ、1ヶ月目くらいに職場の複合機を使う時、Fedoraにプリンタドライバが存在しなくて、職場でプリントアウトができないことに気づいた。RICOHの複合機はLinuxでは動かないんだよ。専用のボードとか買わないと。

じゃぁLinuxで動かないならWindowsで印刷すればいいじゃねーか!!というわけで、Windowsの入った小さいラップトップをFedraに繋いで、Linuxから直接印刷させてた。Linux内で完結させる必要性は無いわけで。

凝り固まった人達は面倒くさいだけ

Fedora自体が好きだったのもあり、俺の職場でのLinuxライフは快適そのものだった。

OSをLinuxにしたら、Microsoft OfficeとかAdobe Photoshopなんかうごかないじゃん!!!ダメじゃん!

という人がいる。そうだね、動かないね。 だからなんだ? としか思わない。

もしOSをWindowsからFedoraに替えることによって、Microsoft OfficeとAdobe Photsohopが使えなくなるなら、 使わなければいいじゃん としか思わない。

Microsoft OfficeやAdobe Photoshopを 使いたいわけじゃなくて 、それを 使わなければならないという強迫観念 でしかないでしょ。

そもそもただのドキュメントなのに、専用の1つのアプリケーションでしか開けないファイルをメールとかいう石器時代のツールをつかって添付してくるほうが悪い。そんなのに合わせる方がおかしい。複数のアプリで開ける方が良い。テキストファイルなんか最強だよな。秀丸でもCoda2でもmiでもATOMでもviでもemacsでも開ける。どんなエディタでも開ける。

Microsoft Officeが使えないならLibraOfficeを使えばいいし、Adobe Photoshopが使えないならGIMP使えばいい

というのも、俺からしたらバカっぽいいい加減な回答だと思う。

俺が言ってるのは、作業マシンがLinuxならLinuxで出来る作業はそれでやれば良いわけで、レタッチ作業が必要なら、レタッチ作業用のマシン使えばいいじゃんって話。MacでもWindowsでもOnixでもぴゅう太でもSC-3000でもなんでも買えばいい。もちろんOSが別ならそれを1つのマウス、1つのキーボードで操作出来るようにするとか、色々技術的な解決が合ったほうがよくて、そこら辺は自分で勝手に調べて勝手にやればいいと思ってる。それこそ個人の好みの問題だ。

なんで一人1台とかって勘違いしてるの?ということね。別に一人が何台持ってたっていいじゃん。

もちろん社員50人なのにPCが10台しか無くてもいいじゃん。人間とPCを一対一にしなければならない理由なんかないわけで、だったら作業でPCをわけてもいいんじゃね?と思う。

VRAMが超潤沢な最強マシンはレタッチ用で3台あって、Office製品すべてがインストールされてる事務用マシンが5台あって、そんな職場でも全然良いと思う。そしてPC自体、レンタルでもいいと思う。交換コストが安くなるし。

それがやりやすいかどうかは使う側の人間の質の問題なわけで。Windowsなんか一応マルチユーザなんだから、サテライトでログインして自宅から操作してもいいよね。シンクライアントみたいな。それが出来るのかどうかはやったこと無いしよく分からんけど。

特定のソフトなんか別になくても良い

つまり、Microsoft Officeを使わなければいけないという強迫観念を理由にしたところで、作業効率なんか全然上がらないわけですよ。

もちろんマイクロソフトは名前の通りソフト会社のはずなんだけど、何故かバカっぽいソフトばっかりつくってるんだよ。でね、実はマイクロソフトって、マウスとかキーボードの評価が高いんだよ。異常なほど人気がある。俺もマイクロソフトの丸っこいマウス、めちゃめちゃ手にフィットするので買った。

だからいっその事マイクロソフトじゃなくて、マイクロハードにでも社名称変更しろって思うくらいだ。とにかく、マイクロソフトのソフトウェアはめちゃめちゃな作りしてたりするんだよな。

Excel 2016はほぼすべてを作り直したらしいけど、ようやく思想がまともなレベルになったらしい。これは喜ばしいね。

ちなみにマイクロソフトのWebサイト、本当にぐちゃぐちゃで、IBMとかOracleよりひどい作りしてる。そもそもWebなんていう ただのテキストデータの集合体 は、アホみたいに人数集めてアホみたいに無駄な会議やってアホみたいに一部の部署の意見だけ取り入れてアホみたいに作りっぱなしにでもしない限り、こんなひどい作りのサイトにならないはずなんだよ。つまり、マイクロソフトはWebもまともに作れない企業なのではないかと。

マイクロソフト=ソフトに弱い会社というイメージ。

Adobeはどうだろ?Adobeはwarezの生みの親だ。AdobeがPhotoshopをありえない高価な値段で販売したことから、ユーザの反発が強まり、最終的にはPhotoshopをクラックして使うというwarezが一気に流行した。つまり酔っ払って道の真ん中で寝てたら轢かれてしまうという話。当然轢いたほうが罰せられるが、どちらがバカかというと、道の真ん中で寝てたほうだ。つまりAdobeは利益の追求のみに注力したおかげで、ソフトウェア業界がwarezに侵されてしまったという、諸悪の権化みたいな企業だ。

ドメイン名とか管理してる会社もJASRACもそうだけど、ほとんど実態がないものを意味不明な値段でやり取りしてるという、濡れ手に粟の商売もある。ヤクザだ。いくら俺が仕事したくない、楽して生活したいと思っていても、流石にここまで他人を犠牲にしてまで自分だけ楽しようなんか思わない。

世の中には絶対にみんながやりやすい作業の仕方ってのがあって、それを、まるで化石を発掘するように、崩れやすい岩を削りながら形を露わにしていくという地味で確実な方法でどんどん発見して行こう、そして見つけたものはどんどん研ぎ澄ましていこうってのが俺の考え。

じゃぁどうすればいのか

うざいものはまず排除。以上だ。

閑話休題

Web業界のエンジニアには、フロントエンドエンジニア、サーバサイドエンジニア、ネットワークエンジニア、データベースエンジニア、インフラエンジニアなんかがいたりする。

その中でも フロントエンドエンジニアは酷い有様

もう有象無象がそれぞれ独自の考え方を場当たり的に主張したりして、魑魅魍魎ですよ。奇々怪々ですよ。俺はね、今のフロントエンドの界隈には近づきたくない。正直いって気持ちが悪いから。ただの新興宗教じゃん。

CSS界隈

cssをまともに書ける人を今まで一人も見たことがない(カスケードの概念を理解できてない)のと、頭は良いのにネットで調べて見つけたものを正解だと勘違いして、それ以外を受け入れない人とかも沢山いて、そういうのは俺はハナクソだと思ってる。

一番頭がおかしいとおもったのは、BEMとかいう意味不明の無駄な記法だ。CSSのクラス名を、ブロック、エレメント、モディファイヤに分けて作るという感じ。そしてそれらをハイフンとアンダースコアでつなげるとか。

別にこの記述が気持ち悪いとかって話じゃない。気持ち悪いとか気持ち良いとかは個人の勝手な主観でしょ?それとは別の話。

具体的には、こういうHTMLにこういうクラス名をつけたりする方法。

具体的にどう使うかというと、例えばタブナビゲーションの場合、gnavがトップにあり、その中のタブ一つ一つはgnav__tabになったりする。そしてマウスオーバーしたら背景色が変わったりするのでgnav__tab--hoverとかって感じになる。それらをheaderブロックで囲ったりして、入れ子になる、と。

はぁ、そうですか。

更にここから派生したもの(MindBEMdingやローカルルール的なものなど)が沢山あって、自分で理解したBEMを書くと『そこは違くてこうだろ!』とかいちいち指摘してくる人がいる。更に言うと、その人も間違えてたりする。

要するに方言がありすぎて、話が通じなくなってる。『ゴミを投げて』と言われたら普通投げるだろう。だけど北海道ではゴミを『捨てる』んだよ。

こうなったらもう、俺はこういう理解をするよ。

BEM自体がはなくそ

と。うん。だからうざい。うざいから使わなければ良い。以上だ。

好きな人は使えばいいよ。ただし、強制する意味は全く無いので、お前らの大好きな 必要か不要かの問題と、好きか嫌いかを混同 して脊髄反射してファビョったりするのはやめたほうが良い。自分を滅ぼす。

俺か?俺はBEMは大嫌いだ。好きか嫌いかと言われれば大嫌いだ。理由は、感覚的に苛つくのと、あとは、そうする意味が見いだせないからだ。

gnavって書いてあったらグローバルナビと普通は気づく。そして気づくべきだと思う。それにそもそもHTML見ればわかるでしょ。

もし人から『これはgnavです』というところを『これはgnavといいまして、ご存知ですか?聞いたことありますか?』なんて聞かれると腹立つじゃん?要するに言い方の問題。

そんな嫌味な言い方しなくても、書き手にgnavが何なのかをわからせる方法なんかいくらでもある。だからなんでBEMとかいうのが流行ったのか理解ができない(それほどCSS界隈は混乱してるんだろうけど)。

ただ、業務でBEMで書けと言われれば文句言わずに書くんで、普段は素直に『BEMは嫌い』と言ってる。

個人的にはcssのクラス名なら、『どこにある』+『なんのための』+『何か』という記述はしない。それだと変更に弱い。弱すぎる。

Webデザイナと呼ばれていた人たちが間違えてるのがここだ。システム経験がない+システムに憧れがある的な感じの人に多い。

漠然と仕事してて、いつも何かしら不安があって、それを払拭するのはルールだ!と思うところまでは良いけど、見つけたルールがはなくそルールって話。

以前俺が聞いた話で、『あぁ、この人は数年後に頭打ちだな』って思った台詞がある。

HTML書く人はマークアッパーで、JavaScript書ける人はスクリプターで、CSS書ける人はコーディネーターで、PHP書ける人はコーダーでいいのかな?

単語が間違ってるとかの話じゃなくて、そういう風に いちいち無駄に分ける事 に何の意味があるのかって話。

そもそも当時のWebデザイナってのは、画像作成、HTML、CSS、JavaScriptやるのが当たり前なので、それを分ける意味がよく分からん。名刺に肩書を沢山書きたかった?だったらなんで肩書じゃなくてスキルを分ける?

とにかくずーっと今まで何もルールがない状態で好き勝手やってきたフロントエンドエンジニア的な人が多すぎるのが原因。コミュニティでも影でDisりあってたし、つまらん。

そういう人は、BEMみたいにブロック、エレメント、モディファイヤって分かれてると、そこに一種の恍惚感を感じるんだろうな。

俺はね、そんな世界どうでもよくて、みんなが楽して作業できて、終わった後自分の時間が沢山持てるような作業の仕方をしたいだけなんだ。

だから『どこにある』+『なんのための』+『何か』のうち、『どこにある』は指定しない方が良いと思ってる。移動できなくなるから。

だから、何のためにある何か、だけでいいと思う。

そもそもCSSのは装飾と配置をごっちゃにした出来損ないのテクノロジーだ。本来は『何のためにある何か』だけで済むはずなのに、配置機能が貧弱なため、装飾と同じレベルで配置を記述しないといけないというクソ仕様。

それがあるからかどうか知らんが、cssのクラス名に配置という装飾に関係ない要素を含めてる時点で、もう色々わかってないと思っちゃう。

もしgnavというクラス名を使いたかったら、gnavだけでいい。gnavの中にタブがあるなら、他の場所でも使えるように、ただ単にtabsとかにしておけばいい。tabsは複数形なので、子要素としてtabがあるだろうな。

本来tabtabs-tabになりそうだけど、そんなん見ればわかるじゃん!という意味で、無駄な記述は排除した。

これなら、gnav内だけじゃなく、tabs以下をコピペして他の場所に使うことが出来る(もちろんcss側で gnavの子要素としてだけtabsクラス書くようなアホなことはしない前提。やるならtabsを先に宣言してその後gnav内のtabsに差分だけ書けば良い話)。

これをやらないWebデザイナが多すぎる。9割以上が変更を考慮しないで書くからダメすぎる。ページ固有のスタイルとか、そういうのは本気でいい加減にしてほしい(オフショアとかすると100%そういうものが納品される)。

要するにBEMよりOOCSSの方が変更に強いし、余計な作業が発生しないという意味で、手離れよくフットワークが良いと言う意味(日本人の思想的に合ってると思う)。

もちろん完璧に設計されて変更が無いであろうプロジェクトならBEMでもいいと思うけど、大抵変更とかってあるよな、だったら変更を踏まえて書こうぜ!という場合には圧倒的にOOCSSの方が便利だと思う。

BEMだと当然、移動すると崩れる。そういうCSSしか見たことがない。
もちろん崩れない方法もあるけど、それならBEMじゃなくてもいいじゃんってなる。

マークアッパー、スクリプター、コーダーなどなど、最初から分けなくて良い事して分かったつもりになりたかったら、BEMとか使えばいいよ。

でも俺は無駄な記述は時間の無駄になる。みんなが早く帰れなくなる。それは避けたい。レバレッジを聞かせたい。

JavaScript界隈

CSS界隈は、ユーザのITリテラシーの低さとか、そもそもCSS自体が不完全にも程があるぐずぐずの仕様ってのもあって、いわば混乱しちゃってるけどみんな頑張ってるって感じがする。

JavaScript界隈はまた違う。罵り合いと貶し合いだ。宗教戦争だ。

とりあえずなんでそういう風に捉えてるかは、実際に耳にしたセリフを列挙することで説明するよ。

  • 『まだjQueryなんか使ってるの?www』
  • A『AngularJSかReactかな』
    • 俺『riotってのもあるよ』
    • A『riotは無いな』← おそらくよく知らないで言ってる(最終的にriot使ってた)
  • 『まだGrunt使ってるの?www』
  • 『gulpじゃなくてnpm scriptでやろうよwww』
  • 『◯◯より◯◯のほうがイケてるよね!』
  • 『普通ESNextで書いてトランスパイルでしょwww』
    • 『jsはbabelでやるのがスタンダード』
  • 『CoffeeScriptってオワコンだよね』
  • 『Sublime Text使ったら恋に落ちた』

などなど。

俺の一番キライな、自分の好みを正解にしたがるはなくそ レベルじゃないすか。

あのな、好きなものは主張してもいいんだよ。だけど、別のものをDisらないと好きなものを正当化できないんだったら、最初から自分の好き嫌いだけでものを言ってほしいわけだ。

『俺はjQuery使うよりバニラで書くほうが好きだなぁ。ま、それが許されるならね!』とか『riotもいいかもしれないけど、AngulerとかReactとかメジャーだし本も沢山でてるやつ覚えたほうが自分が安心するんだよね』とか、そういうのでいいじゃん。それなら誰でも『なるほど、わかったよ!』ってなるじゃんか。

変に意識高い奴(大抵経験不足を知識量でカバーしようとする使えないやつ)に多い。

俺が初めてprototype.js見た時に、『これすげーな!』って思ったけど、動作の不安定さ、重さに辟易してて、速攻で使う気がしなくなった。その後でてきたjQuery、当時は全然知名度もなかったけど、俺は速攻で書店にいってjQueryの書籍を探しに行ったもんだ。もちろん1冊もでてない。そして間違えてxQueryの本とか買いそうになった思い出がある。

同僚が言うには、『そんなよく分からんもの使わないで、素直にprototype.js使えばいいよ』だ。たしかにjQuery使いたがってるのは俺だけで、そしてこれは俺の好みの問題だよな。だけど、なんで俺はprototype.jsが嫌いなんだろう?と自問した。

結局prototype.js自体が悪いというより、JavaScript自体の記述が悪かったのが原因だったりもした。だけど、jQueryのほうが処理スピードが遥かに早かったので、最終的に次のプロジェクトからはprototype.jsは使わず、jQueryを使うことになった。

そう、prototype.jsをDisらず、jQueryを褒めちぎっただけ。Disる必要なんかない。

10年前の製品を今使ってみて『使いにくい』というのは当たり前の話。その時代にはそのテクノロジーはマッチしてた。ただ、今はマッチしないってだけ。では今マッチするものはなんだろう?あるのか無いのか。あるならどういうものだ、という感じ。比べるものじゃないと思うけど、まぁ秒進分歩のIT業界では、比べてしまうほどリリース日が近かったりするんで、ある意味人間側が追いついてない感じだよな。

というわけで、とにかくcss界隈よりかは論理的かと思ってたJavaScript界隈だけど、とにかくドロドロしてて気持ち悪い。一度全裸になってから全身にはちみつぬりたくり、そのままスーツを着て砂漠を歩くような感じとでもいおうか、可能な限り避けたい。

2000年くらいにDHTMLのメーリングリストに参加してたんだけど、その時から変わってない。JavaScript使うひとってのは高圧的で、できない人をすごく見下す傾向がある。もちろんメーリングリストにもすごい知識と経験を持った人がいたけど、あまりに言葉が悪いので、あるユーザが反撃してた。『みんなあなたのようにすごい人間じゃないです。見下したくなる気持ちも分かりますけど、わかるんだったら最初からみんなあなたに質問なんかしませんよ』的な感じ。俺はそのメールに対して『人間なんで感情的な部分もあるでしょうが、質問に対する回答が得られ、それが解決に繋がったのかも、感情とは別に書いてほしい。MLなんで。』と書いたら速攻で収まった。その言葉の悪い人もおとなしくなった。俺はその人嫌いじゃなかった。言い方は別として内容が濃かったので。

画像界隈

Adobe Photoshopの性能だけに頼って画像作るのもいいけど、jpeg画像の構造しらないとか、png最適化しないでデプロイするとか、やめてほしい。

jpegの構造なんか知らないよ!プログラマじゃないんだから!と言われたことがあるが、コンピュータを使ってる時点でエンジニアなんだから、そんな甘ったれたこと言うやつには説教だ。知ってると良い事はあるが、知らないと良いことは無い。だからこれを機に読むと良い。頭に通過させるだけでも良い。

そもそも最適化とかを知らない?だったらもう少し、例えばネットワークの勉強してみるとか、別の分野を知る必要があるかな。

2000年あたりの低速インターネット時代は、パケット量を気にしながら画像ファイルを作ってた。つまりwinodowsの平均的なパケットサイズで割り切れれば最適化!的な話。だから構造知っておくと便利だとは思う。今は100Mbpsとか普通だけど、比例してその環境自体も増えてるから、場合によっては最適化して圧縮すると、その差が物を言う場合もある。

あと、GIMPでもPaintでもPixelmatorでもなんででも画像生成出来るくらいが普通だと思うので、Adobe Photoshop一択は、俺はどうかと思う。

さーせん、フォトショがクラッシュした → 仕事止まる

が許されるならそれでいいけどね。

あとさ、無駄な機能ばっかり搭載してどんどん重くなるAdobe Photoshopに合わせて、作業マシンもどんどんアップグレードしないといけないでしょ?なんだかねーって感じ。

一旦終わる

長くなりそうなのでここで一旦終了。

次回は作業が楽になるgulpでつくったフロントエンド向け環境なんか紹介していたい。