お節介にもコーダーさんをフロントエンドエンジニアにする殺し文句3つ考えてみた

しかし、確かに、コーダーといっても「マークアップエンジニア」という、”エンジニアよりはビジネスパーソン的な”立ち位置の人間は業務上必須だ。

ともあれ10年後、マークアップエンジニアとして一人前なだけでは今ひとつ物足りない気がする。
年なんて関係ねぇ。

というわけで、今にでもReactやVueを触れる用になっておけば、数年後は売れ残ることはないかな、というのが今回のお節介なところ。
「考えてみた」というタイトルは名ばかりに、今後この記事の内容は少なくとも一人でも、あわよくば社内で実行していきたい。
つまり、いわばこれは「作戦会議」なのだ。

目標

以下のような人材の集団になったらいいな

①ReactやVueなどのJSフレームワークを駆使したエンジニアリング
②Gulpを使ったタスクランニング
③フルスクラッチのjQueryプラグイン作成
④それでいてW3CやSEOの規格に準じたコーディング（セマンティック）

最低限これになれば本当に大成功。
ちなみにGit、GitHubは義務教育だと思ってる。
PHP、CMS、LaravelなどのPHPフレームワークはクライアントに合わせてスキルを取得すればいいんじゃないかな（あればナオヨシ）。

実践方法

さて、上記に述べた①～④に於いて、個人的な見解でいうと④はSlackなどにRSSリーダー作って、「海外SEO情報ブログ」読んでおけば問題ない。
SEOはW3C準拠なはずなので。

そして問題の、①～③は”実践していくしかない”に決まってる。
そこでコーダーさんの重い腰を上げるべく（助けるべく）、殺し文句を考えてなんとか実践への第一歩を踏み出させるのである。

殺し文句①: 「コーディング楽になりますよ。」

いけない薬を勧めている感覚に陥るが、これは嘘ではない。
本当に楽になるのだ。
そして個人的には一旦Vue.js使ってもらうのが一番いいかなって思ってる。

せっかくデザインをもとに設計・マークアップしたHTMLを、デザ○ナーはカプラでできた家のようにいとも簡単に仕様を変更してしまう。
ul>liな商品情報リストに後から、カラムを追加したいと抜かす輩もいる。
静的なHTMLで扱っていると、リストが20個超えたあたりから更新が面倒になってくる。

もちろん、そんなデ○イナーやディレクターだけではない。
世の中には本当に優れた人材で溢れている。
しかし、クライアントが増えるとどうしてもそこだけが目立ってしまう。
きれいな白いハンカチの上の黒ごまのように。

愚痴はここらへんにしておいて、
Vue.jsのリストレンダリングは本当に素晴らしい。
axiosプラグインと連携して外部JSONを参照できるようになると、さらに素晴らしい。

var app = new Vue({
   el: "#target",
   data: {
       items: null
   },
   mounted: function () {
       axios.get("/assets/js/data.json")
       .then(response => (this.items = response.data))
   }
})

おもむろに上記のコードを仕込んだページを見せながら、リストレンダリングのソースをいやらしく見せるのだ…

「テンプレート化したら楽ですよ…」
って。

<ul id="target" class="items">
   <li v-for="item in items" v-bind:class="{ wide: item.isWide }">
       <img v-bind:src="'/assets/img/item_'+ item.id +'.jpg'" alt="">
       <img class="brandName" v-if="!item.nameImg" v-bind:src="'/assets/img/name/'+ item.name +'.png'" v-bind:alt="item.name">
       <img class="brandName" v-else v-bind:src="'/assets/img/name/'+ item.nameImg +'.png'" v-bind:alt="item.name">
   </li>
</ul>

例えば商品詳細ページなどは、リストが何十何百と追加されようとも上記のテンプレートだけで自動でレンダリングされる。
カラムが追加されたとしても、テンプレートを変更するだけでよいので、静的なHTMLのように既存の100リストを変更しなくてよい。

更にJSONをCSVなどに変換できれば、雛形として扱うことができるので、ディレクターさんなどに雛形を更新してもらうだけでリストは自動で変更されていき幸せ。

ここらへんを頭に入れ、口説きの第一フェーズを通過していこう。

殺し文句②: 「SEO気にしたほうがいいですよ。」

SEOといったものの切り口は、「表示速度」に絞ろうと思う。
ニュアンス的には少し煽りになってしまうが
「せっかく丹精込めて作ったページも遅ければ見てくれる人少なくなりますよ」
ということを匂わせたい。

で、表示速度のための方策なのだが、最近でいうとAMPが有名だ。
しかし、amp-bindらへんを除けば、まぁ現段階のコーダーの技術力で対応可能。

大事なのは画像やCSS、JSファイルなどのミニファイ化じゃないかな、と思う。

というわけでGulpを導入してタスクランナーに慣れよう！ということ。

絶対つまずかないGulp 4入門(2022年版) - インストールとSassを使うまでの手順 - ICS MEDIA

gulpとbabelとwebpackというフロント開発３銃士 - Qiita

ここらへん参考に、Gulp組めば一旦はGulpとはなんぞや？というものが見えてきそう。

watchつかってSassの自動コンパイルとか、Sass触ってみたい！な人は幸せになれるね。

殺し文句③: 「これ自作してみたらどうです？」

これは正直ギリギリのうまいところ。
人によっちゃまじで煽りに聞こえるので、うまい具合にそう仕向けなければいけない。

例えば、ドロワーメニューとかって意外と簡単に実装できるのに、億劫になってプラグインを使っちゃう人が多い。

メニューくらいなら５分あれば書けますよーってみせてあげたり、ここらへんのURL送りつけてあげると幸せになれるかも。

僕も最初は実装が怖くてプラグイン使ってたけど、だんだんjQueryに慣れていくうちに「こんくらいなら初心者でもフルスクラッチで実現できたな」って思う。

最後に

なんとなく、実践していこうと思っていることを徒然と書いてみましたが、書いてる段階で「一番大事なのはググり力じゃないか？」って思ってきた。

スキルはなくても「調べたらできる」って思えるぐらいのググり力は義務教育よりも義務教育。