;)
お久しぶりです。だりあ(https://twitter.com/engineer_dahlia)です。
業界未経験からマークアップエンジニアに転職して、早いもので1年2ヶ月ほど経ち
担当した案件は大小合わせて60件を超えました。
今日の記事は、『未経験スタートのマークアップエンジニア 1年でどんなスキルが身についた？』をテーマに語ります(？)
業界未経験だけどコーダー/マークアップエンジニアに転職したい！
1年経ったらどれだけスキルアップできてるの？
2年目はどんな事にチャレンジする？
目次
未経験からマークアップエンジニアに転職して1年経った今の自分のスキル
html/css
言わずもがな、マークアップ担当なのでhtmlとcss(scss)は毎日書いています。
セマンティックなhtml構造を心がけ、後に更新する際にもわかりやすいcssを心がけています。
きちんと書けているかについてはまだ充分ではないです。でも、ちゃんと意識しながら書いています。
scssを使っています。
gulpでコンパイルしてcssにしています。
参考：【たった５分で完了】「gulp」の導入方法と使用例を紹介します
それからscssはBEM記法です。
参考：一番詳しいCSS設計規則BEMのマニュアル
jQuery
jQueryは標準で読み込んでいます。
なんだかんだでjQueryはすごい、めっちゃ便利(語彙力)
プラグインもたくさんあるし、JavaScriptと比べると記述が短くて済みます。
JavaScript(素のJs)
jQueryは使用が許されず、素のJavaScriptで書かなければならない案件もありました。
マークアップエンジニアになって1年も経てば、少なからずそういった条件のある案件にもぶち当たるでしょう。
まだまだ調べながらですが、少しずつ分かるようになってきました。
WordPress
そしてWordPress。
基本的にはゼロからオリジナルテーマを制作しています。
転職して3ヶ月目で、30ページを超す初めてのWordPress案件を取りました。
しんどかったですwww
その後もなんやかんやで工期が2〜3ヶ月の大型案件をいくつか担当してきました。
単価が良いので、1度で大きな収入源になりますが
要件定義やクライアントとの意識のすり合わせ、設計等をキッチリやらないとデスマーチ案件になってしまいます。
『既存のWordPressサイトを踏襲しつつリニューアル』もあります。部分的に(TOPページだけ、とか)新しくしたい、とかですね。
これもしんどかった。。。
【html/css(scss)】
デザインカンプが届いたらまずは設計ですが、詳しくは割愛します。
ブロック分けを可視化すると良いですよ。
設計が終わったら、一気にhtmlを書いていきます。セマンティックに。
｢セマンティック、セマンティック｣って、カタカナ語わからん！やめい！という方は【セマンティックウェブ】 HTML5をわかりやすくまとめてみる【初心者向け】を読んでみてください。
つまるところ、『htmlタグに正しく意味をもたせてコード書きましょうね』といったところでしょうか。違かったらご指摘お願します。
htmlはクラス名もガシガシつけながら書きます。
パーツ化を見越して、htmlのクラス名は固有名詞ではなく汎用的につけます。
<section class="section">
<h2 class="section__ttl">タイトルタイトル</h2>
<p class="section__txt">本文本文</p>
</section>
<!-- [/section] -->上記を例にすると、 section__ttlがもしnews__ttlだったら
newsという項目でしか使えないですよね。いや、厳密に言えば使えるんですが、後から見返した時混乱する元になっちゃいます。
一通りhtmlを書き終えたら、今度はcss(scss)でスタイルを当てていきます。
- Block
- Element
- Modifier
に分けて書きます。
パーツ化(コンポーネント化？モジュール化？)して、ブロックごと移植すれば他のページなどでも使うことができます。
html構造のチェックには【Nu Html Checker】(https://validator.w3.org/nu/)を使っています。無料です。
【jQuery】ほぼ毎回やる実装
アンカーリンクでスムーススクロール
メニューをクリックしたら、同じページ内の該当のコンテンツにしゅるしゅる〜と移動する、スムーススクロール。
ページの右下にある『ページトップボタン』も、標準でスムーススクロールさせます。
ほぼ100%の案件で実装します。
jQueryのanimate()メソッドを使うことが多いですかね。
スライダー/カルーセル
メインビジュアルや商品紹介など、複数の画像を自動再生(あるいはクリック、フリック等)で見せたいってやつですね。
これももう、めちゃくちゃやります。毎回じゃないかってくらい実装します。
後に紹介しますが、プラグインを使えば色んな種類のスライダーを比較的カンタンに実装できますね。
ただのオートプレイだけなら、cssのkeyframeでも作れたりします。
スクロールしたらふわっと出現
これも87%くらいの確率(適当)で実装します。
ページをスクロールしていくと、見出しや写真などのコンテンツがふわっと出てくるやつですね。
下からふわっと出現するパターンが一番多いです。jQueryで該当の要素にaddClassして、cssのtransformとopacityで調整することが多いですね。
【jQuery/JavaScript】よく使うプラグイン
よく使うプラグイン、何があるかなーって考えたのですが、あんまり出てこなかったですw
【スライダー/カルーセル その1】Swiper.js
まずは定番、Swiper.js。
公式：https://swiperjs.com/
言わずもがな、スライダーやカルーセルの定番ですね。
デモもたくさんの種類が用意されていて、なによりjQueryに依存していないのが良いところです。
はにわまんさん(https://twitter.com/haniwa008)の記事がオヌヌメ。
参考：【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介
【スライダー/カルーセル その2】slick
スライダーのプラグイン2つめは、これまた定番slick。
公式：http://kenwheeler.github.io/slick/
Swiper.jsとの使い分けは、『時と場合と案件による』です。曖昧ですみません。
Swiper.jsとslick、どちらかを覚えておけば基本的なスライダーやカルーセルの実装には困らないです。
でも、どっちも使えると尚良しです。
私はずっとSwiper.jsしか使っていなかったのですが、ある時slickの方が実装が楽だった仕様がありました。
…どんな仕様だったか…記憶が定かではないですごめんなさい…
カレントのスライダーを中央に表示させたいとか、そういう時はslick使っています。
他にも理由あったんだけど、、、思い出したら追記しますね、、、
【番外編】【Pjax】Barba.js
これは番外編。
よく、ではなく、たまに使います。
Pjax(非同期通信)でページ遷移を高速にできるやつです。
Barba.js、私の知識は全然深くないですが、willstyle 奥田さん(https://twitter.com/mine_nyaa)の記事にいつもお世話になっています。
(丁寧な記事、ありがとうございます！！)
参考：Barba.js v2でサイトを簡単に非同期遷移させる
｢ページ遷移のスピード早くしたいんだけど｣というクライアントの要望があれば、｢Pjaxどうですか？｣というご相談をして実装したりします。
【JavaScript】素のJs(vanilla jsとか呼ばれたりもする)
jQueryに頼りっきりの私ですが、先日担当した案件は
『素のJavaScriptでお願いします、jQuery禁止で』
という条件でした。
｢あとで他のフレームワークを乗せるので、jQuery使うと競合しちゃって動かないんやで｣
という事でした。
アプリモックやシステムが入る案件は、jQuery禁止令が出たりするみたいですね。
｢jQueryなら数行で書けるのに、vanillaは倍くらいの行書くんだな…｣
｢jQueryだとfor文使わなくていいけど、vanillaは使わないと動かないんだな…｣
と非常に勉強になりました。
jQueryの前に素のJavaScriptを勉強しておけば良かったと思っています。
その方が多分、『JavaScriptがどういう仕組で動いているのか』的なことを理解しやすいのではないでしょうか。
新しい書き方(ES6、ES2020とか)もどんどん取り入れていきたいです。
(未だにアロー関数を実案件で使ったこと無いです…)
【CMS】WordPress【オリジナルテーマ開発】
WordPressのオリジナルテーマ開発も担当しています。
コーポレートサイト、採用サイトなどが多いですね。
まずはデザインカンプから静的にモックを作成し、それからWordPressを組み込んでいきます。
ニュースやブログ、商品紹介など、クライアント様が定期的に更新したいコンテンツがある場合はWordPressを使うのが、現時点(2020年6月)で広く一般的なのかなと思います。
デフォルトの投稿は1つですが、カスタム投稿を増やせば『News』『ブログ』『商品情報』などなど、複数の投稿機能を使う事が可能です。
また、カスタムフィールドを追加すれば、デフォルトでは再現できない投稿の仕様をつけたりする事も可能です。
InstagramやTwitter、FacebookなどSNSの投稿を埋め込んだり、確認画面つきのお問合せフォームをつけたりも可能です。
既に販売されているテーマのカスタマイズは担当していません。
基本的に『ゼロからオリジナルテーマを作る』がメインです。
【余談】一部リニューアルはオススメしない
『TOPページだけリニューアルして、他のページは今のままで』
という案件を担当することもあります。
しかし、個人的にはこれはあまりオススメしません。
既存のサイトを制作した方が、リニューアルを担当する方と違う場合は特に。。。オススメしない理由の一部ですが、
- 既存のサイトがどの様にコードが書かれていて
- どういったプラグインを使っていて
- 記述の仕方はこうで
- etc…
下調べにかなりの工数(数日かかる場合も)を必要とします。
一部だけ新しくするのだから、一見簡単そうに思えるのですが、予期せぬ自体がちょくちょく起こります。
工数がかかる ＝ 費用が追加される
ということなので、結果的に『全リニューアルより費用がかかってしまった』なんて事がよく起こっちゃいます。
【余談2】初案件はちゃんと事前学習して望みましょう
冒頭で少し触れましたが、私は転職して3ヶ月目で初めてWordPressの案件を獲得しました。
いきなり30ページを超える大型サイト。カスタム投稿が5つ、カスタムフィールドは有料のものを全部使ったんじゃないかくらいの難易度の高い案件でした。
それをですよ。
事前学習もほとんどせずに(知識ほぼゼロで)担当しちゃったんです。
もう本当にハゲそうでした。
『固定ページ？カスタム投稿？カスタムフィールド？テンプレートタグ？』
全然知らない単語のオンパレードで、なんのこっちゃ！！全然わからん！！状態でした。
個人的にブログとしてWordPressを触ったことはありましたが、phpファイルを触ったことはありませんでしたし、書籍等で勉強していたわけでもありませんでした。
それはそれは、先輩に大変なご迷惑をお掛けしてしまいました…。
テンプレートタグやループ処理など、ほぼ全部先輩に書いていただいたという結果に。
先輩が書いてくださったコードを、後から調べて『これは何の処理？』というのを一つひとつ調べるという…恥ずかしかったです。
WordPressに限った話では無いですが、事前に勉強せずにいきなり実案件を担当するのは危険ですのでご注意くださいませ。。。
考察｜LPや基本的なWordPressサイトはまかせろ
こうやって『今の自分は何ができるのか』を改めて確認するの、良いですね。
定期的に振り返ることにします。
転職して1年で身についたスキルは
- htmlを構造を考えながら書く
- scssをBEM記法で書く
- 頻出するjQueryでの動きの実装
- 素のJavaScriptでフレームワークに干渉しない動きの実装
- カスタム投稿･カスタムフィールドを追加したWordPressサイト制作
でした。
LPと基本的なWordPressはお任せください。(強気)
そして今の課題は
- コーディング、WordPress組み込みのスピードをもっと爆速にする
ですね、とにかくスピードがまだ遅いんです。
スピードが早ければ、クライアント様からの信頼にも繋がるし、余裕を持ったスケジュールで納品できます。
心の余裕大事。心の余裕、本当に大事。
- 詰まったら調べる → それでも解決しなければ聞く
これももっともっと当たり前にできるようにならなければなぁ。
未だに、『聞く』のにブレーキをかけてしまいます。(相手の時間を奪ってしまうのでは？ってつい思ってしまい…)
結果的に、案件が進まないほうが大迷惑なので、どんどん聞かないと！
それから今後チャレンジしたいのは
- 素のJavaScriptの基本
- Vue.js
- shopify (ECサイト)
- デザインの基本知識
です。
勉強すること･チャレンジしたいことは山程あるので、楽しみながら2020年下半期も元気にやっていこうと思います。
ここまで読んでくださってありがとうございました。それではっ！
追記｜他の方の『転職して1年経ったよ』も知りたいな
2020年7月7日追記
私のこの記事を読んで、さえさん(https://twitter.com/despair_ya12)もご自分のスキル棚卸しの記事を書いてくださりました👇
さえさんも業界未経験からWeb制作会社に転職して2年目。コーダーとしてお仕事をなさっているそうです。
＿人人人人人人人＿
＞ もはや同期 ＜
￣Y^Y^Y^Y^Y^Y￣
パーフェクトピクセル、私も使ってます。
ぶっちゃけ入社当初は『ピクセルパーフェクトって実際そこまで見られてないでしょ』ってたかをくくってたのですが、まぁ指摘されるわされるわ…
なめてました。ごめんなさい。
今はパーフェクトピクセル(Chromeの拡張機能)使ってセルフチェックしています。
おかげで社内チェックの赤指摘(ここ違うやでっていう指摘)が減りました。
それからスクロールやアニメーションのjQueryプラグイン！
実は私使ったこと無いのですが、今度やってみよう〜☆
実装早くなるならプラグインに頼るのもありですね。なんで今までそう思わなかったんだろうw
Paizaやウェブ解析士取得など、さえさんめっちゃ勉強してる。。。
私もガンバラナケレバ！
他の(コーダー･マークアップエンジニアの)方が転職1年でどんなスキルセットをお持ちなのか、なかなか知ることができないので貴重な記事だと思いました。
さえさん、刺激をありがとうございますー！！
;)
