フロントエンドエンジニア歴4年生の通信簿・前編

フロントエンドエンジニア歴4年生の通信簿・前編

奇怪なタイトルで恐縮ですが、自己紹介的な記事ですのでご容赦いただきたく。
そのため、あまり技術的内容での有用性は期待できないかもれません。
ですが、同業者やウェブの仕事に興味のある方には参考になる情報だと思うので、
4年間で学んだものやこれからの課題についてを書き殴りました。

小学校4年生というと、算数で小数や分数、グラフや面積計算などを習う時期でございます。
理科と社会を習うようになるのもこの学年からですね。
“10で神童 15で才子 20過ぎればただの人”ということわざもありますが、
既にこの辺から神童人生の雲行きが怪しくなってきた方も少なくはなかったでしょう。

4年生。入学からは遠く感じる学年。
4年生。卒業までも遠く感じる学年。
4年生。どこをどう取っても半端な学年。
――しかし、自分の本質が現れ始める学年。

通信簿?

前フリが少し長すぎましたでしょうか。Timmyと申します。
4年目というと社会人的には、“とりあえず3年”の3年が過ぎたネクストステージとなります。

では、フロントエンドエンジニアになって4年生になった自分の成績がどの程度のもんなのか、
ポジショントークやセルフプロモーション抜きでお伝えしようというのが今回の本旨です。
厳密には3年強ぐらいですがキリが悪いのでサバを読みます。

末が博士でも大臣でもなかった、なんでもねぇ“ただの人”の通信簿ですから、
面白さや華やかさ、凄さや立派さには欠けるかもしれません。
ですが泥臭い日々の中で学んできたものもありますから、そういったものをお見せしようかなと。

後編はこちら:フロントエンドエンジニア歴4年生の通信簿・後編

成績開示「よくできる」「できる」編

前編ではいわゆる「大変よくできました」「よくできました」に相当する
自分の能力について触れていこうと思います(あくまで自己評価ですが)。
本当はあんま技術一辺倒の話になるのもどうかと思ってるんですけどね~、
仕事はハートとかメンタルとかも結構大事なファクターだったりするんで。あとフィジカルな。
思想の話とか業界について思うこととかは筆が乗ったら書こうかなと考えていますが、
ここでは長くなるので割愛します。


スキルや実績みたいな目に見える成果の話で自分を紹介するのって便利ですからねー。
手っ取り早く他人にスゴイと思わせられますし。
ただ、それってやりすぎるとカッコよくないんですよね。
ほら、ネット上でもよく目にするじゃないですか。
「〇〇ならこれぐらいできて当然!」「次の時代は△△だ!」「まだ□□で消耗してるの?」
みたいなけったくそ悪いマウンティング記事とか。

まあね。カッコイイ新機軸とか小難しい横文字とか並べて
凄さを見せつけるのも生存戦略としては正しいんですよ。
(実際トレンドを追うのもスキルの一つではありますし)
しかーし。ネット上ではそういう見せかけのキラキラ感を発す不届き者が多いんでね。
たまには暗がりで生きてる人間の有様を見て安心してくれって感じの気持ちで書いてます。

んじゃ「どんなことができるか・どんなことをやってきたか・どんなことを知ってるか」
みたいな話をゆる~く書いていきます。

PC/SPサイト、レスポンシブサイトの納品

書かずもがな。
PSDファイルから切り出し→文言もらう→コーディング→
確認&検証→公開という一連の流れです。
コーポレートサイトとかお堅いところの仕事が多めですねー。
たまに破天荒なオーダーにも対応したりはしますが。

なんと今や絶滅危惧種のガラケー用ページの改修に携わったこともあります。
まあもう関わりたくはないですけども・・・。

HTML5/CSS3の知識

これも書かずもがなですね。
五年前ならまだしも今や必須事項ですね。
当然HTML4とかXHTMLも書けますが時代遅れなのでやりたくないです。

この項ではHTML/CSS3関連でも噂になりがちなアイツら(?)を
ピックアップしてちょっと掘り下げて書いてみます。

Flexbox

逆に聞くけど今これ使ってない人いるん?
IE10以前の悪しき時代のことは忘れましょう。
サポート終了してるOSやブラウザなんぞ使ってんじゃねー

Grid Layout

実案件での導入は見送ってましたがぼちぼち時代が追いついてきたので最近は使います。
使えるだけマシですが凝ったことをやろうとするとEdgeとIE11がウザいです。
巷では「Grid Layoutの登場でFlexboxが使われなくなる!」
うんぬん言われてますけど競合せず併存しうるかなと思ってます。
使い勝手に優れるFlexboxに対して自由度で勝るGrid Layoutかなーっていうのが個人的見解です。

SVG

ブラウザの対応が進んでないなー、っていうのが一番強く思うところです。

<object type=”image/svg+xml” data=”~~~~.svg” width=”100″ height=”100″></object>

って書き方がブラウザでも使えるようになると素晴らしいんですけどねー
(JSで操作ができるようになるので)。
<img>タグやらCSSやらで表示させるんだったら
ぶっちゃけPNGファイルでもよくねって話でして
(この方法だと手軽ではあるもののJSでの操作は効かない)。

なに? インラインSVGならJSで制御できるしどのブラウザでも動くって? 正気ですか?
セマンティック・ウェブとはなんだったのか。

Canvas

よくSVGとCanvasは同列に語られがちですが、
細かくあれこれ描画しなければならない場合はこっちを使います。
で、まあ仕事で扱う機会があったんで触ってみた所感ですが……うーん。

Flashに変わる夢の新技術!みたいに喧伝されてることもありますけど、
ゴリゴリにJS書ける人じゃないとしんどいです(やりたいことのレベルにもよりますが)。

デバイスやブラウザによって描画され方とかが変わったりすることがあるんで検証も注意です。
そんなにお気軽にあれこれできるもんではないなーと使ってみて思いました。

各種デバイス/ブラウザ対応

上記でも書いてますがブラウザやデバイスによって色々と挙動が変わるもんです。
9割方IE(およびEdge)とSafariが悪さするだけなんですけど。
大体の地雷は踏み越えてるので経験知が無駄に豊富にあります。
でもIEの10以前にはもう関わりたくないです。えんがちょ。

あとAndroidの標準ブラウザにも関わりたくないですねー。あいつはワルです。
Android OS 4.3(Jelly Bean)以前の端末にプリインストールされてたやつの話です。もうシェア数的にも考慮する必要はありませんが。
Googleからもサポートされてませんし。

IE(およびEdge)は未だにしょーもないやつですが
それでも昔に比べたら丸くなったと思います(?)。
Safariもなかなか聞かん坊の困ったちゃんなんでたまに手を焼きますね~……。

CMSの導入・設定

正直WordPressを仕事で触る機会はあんまりないんですけど、
プライベートな頼まれ事とかで少し覚えました。
っていうかこのブログ自体WordPressでサクッと作ったもんですし。
使用テーマはLION BLOGってやつです。ただ、PHPがあんまり書けないって弱点があるので
そこら辺は最近ちょこちょこ勉強しています。
PHPが難しいっていうよりSQLと絡めてあれこれやるのがねー。

実はWordPressよりも自分と縁深いCMSがあるんですけど・・・。
コンプラ的に名前出せないんですよね。ʕ•͓͡•ʔ
核心的な部分を知りすぎてしまったがために
ここでベラベラ喋ってしまうと闇に葬られる恐れがありまして(!?)
CMSの中では(他のと比較しても)
かなりイケてる部類じゃないかと密かに思ってるんですがね~。

他はカラーミーショップを触ったことあるぐらいですかね(最近悪い意味で話題ですが)。
あとすっっっげえアレなやつも結構弄ったことあるんすけど、
名前を出してしまうとネガキャンになってしまうのでやめときます。
iから始まるアイツなんですけども~(コラ!)

ECサイトはあんまり触りませんが、やる時はやります。

JavaScriptでああだこうだ

元々プログラミングとかあんまよく分からなかったんでほぼ独学でしたが、
結構トリッキーなことをやってきたので大体のことはできるようになりました。

  • サーバー側から吐き出されるきったねえタグをソートした後に整形し、
    お知らせ一覧的なものを作ったことはありますか? ぼくはあります。
  • 『PHPを使わずに』遷移してきたページに応じて
    遷移後ページのフォーム上で文言やデータを出し分けたことはありますか? ぼくはあります。
  • 元々Flashで作られていたものを無理矢理JSで再現したことはありますか? ぼくはあります。

大体そんな感じです(血涙)。


jQueryオワコン説が流れていますが
(というかそういう流れに持っていきたい勢力が一定数いる)、
自分はラクなのでまだ使うことが多いです。
バニラにも書こうと思えば書けますけどね。

外注の納品物とかでも普通に使われてますしー。
CMSによってはデフォルトで入ってたりしますしねー。
だいたい「〇〇はオワコン! これからは△△の時代!」とか
言い出すやつなんか信用ならねーんじゃ(なんてこと言うんだ)。

……と妙にjQueryの肩を持つような言い方をするのは、
Ajaxを使った実装をやったことがなかったためでして。
Ajaxであれこれする時にjQueryだとダサい、っていうのが本旨っぽい(?)ので
Vue.jsとかと一緒に勉強しようと思います。₍₍ (ง ˘ω˘ )ว ⁾⁾

メタ言語/フレームワーク

書かずもがなですがSassは†神†。Compassくんは……R.I.P.
業務の都合上HTMLはメタ言語で書く必要性があんまなかったんで
勉強してこなかったんですけど、Pug(Jade)は覚えたいなあと思ってます。( ᐛ )و

フレームワークはあんま触ったことないです。
実務で弄ったことあるのはBootstrapぐらいですがあれももう下火感漂ってますね。
ま~便利っちゃ便利なんすけど、
わざわざ使うほどのもんでもないっていうかね(特に実務では)。

他人様の作ったものに乗っかるぐらいなら
車輪の再発明してでも自力で作った方が早いじゃんと思っちゃう派です。

開発環境とか

エディタはSublime Textを使ってます。
試用じゃないぞ! ちゃんとライセンス買ってるからな!
まさかフロントエンドエンジニアを名乗っていながら
2~3年ぐらいずっと試用のまま使い倒してたやつとか居ないだろうな!?
ブーメランを投げてみる

さておき、最近ではSublime TextよりもBracketsとかAtomとかの
波が来てるようなんでそっちの方も触ってみようかなと思ってます。
Sublime Textと違って無料なんで場合によっては完全に乗り換えちゃうのもアリですね。
どのエディタを使うにしてもEmmetは†神プラグイン†なんで導入しておきましょう。

なに? 「Emacsだ!」「いやVimだ!」?
Visual StudioみたいなIDEで書いてるからそんなエディタなんぞ要らん?
ああそう……好きにして


タスクランナーはGulpをちょこっと使ったことがあるぐらいですね。
地味に導入がめんどいんであんまり使うことはありません(案件によりけりですが)。
今だと「タスクランナーとかダルいからnpm-scriptsで全部どうにかすればいいんじゃね」
という考えが主流っぽいすね。
まあその辺は必要になったら勉強すればいいかなって感じです。

ソロ活動(?)が多いので使用頻度は低いですがGitも一応最低限ぐらいは扱えます。
あんま自信がないので一緒に仕事する機会があったら教えてください誰か詳しい人。
Git繋がりでGithubはアカウントだけ持ってますが
イケてるエンジニアじゃないので作ったまま放置してます(えー)。

おわりに(後編へ続きます)

長くなりすぎたんで記事を分けます。
「自分がフロントエンドエンジニアとして向き合わなければならない課題について」
後編では触れていきます。

ああだこうだ訳知り顔で書き連ねていると
自分のスキルを勲章のように見せびらかしているようですが、意図はむしろ逆です。
そのへんは後編を読んでもらえたら分かるかと。
これの逆版みたいな記事なんで
「4年かかってもこんな程度か~」と安心していただけると幸いです。

ちなみにサムネイル画像のサイトはKnow it allというものです。
どのぐらいWEBの関連技術について知っているかを調べられるチェックシートです。
know-it-allの和訳は「知ったかぶり」。なかなかエッジの効いたネーミングセンスですね