Web制作のセカイに入りたての方へ 〜まだしがないマークアップエンジニアより〜
この記事は 、ジーズアカデミー Advent Calendar 2015の14日目の記事です。
卒業制作期間まっただ中なジーズアカデミー2期生でありながら、3期生の方々のチューターとして毎週土曜日に授業のサポートをしています、
マークアップエンジニア歴3年と少しを経たITOです。
3期が始まって1ヶ月ほど経ち、HTMLもJavaScriptもほぼ0から始めた方々も立派に成長され、間もなくPHPの授業編スタート。
僕が自信を持って教えられることはほぼ無くなってきたのでそろそろ自分の事だけに集中しようと考えていますが、チューターの序盤に感じた、Web制作の世界入りたてな方向けに、知っておくと良いだろうなという事をまとめました。
マークアップエンジニアがよく使うChromeとFirefoxのショートカットキー2選
command + alt + C（WindowsはCtrl + Shift + C）
開発ツールを開き、ついでにインスペクタ（虫眼鏡）が選択された状態になる。スピーディーな検証ができます。
command + shift + R（WindowsはCtrl + Shift + R）
キャッシュを上書いてリロード。本番やテストサーバーへのアップ後はこれをよく連打しています。
おまけ
Alt + Tab（ウィンドウ切り替え）
エディタとブラウザなど、行ったり来たりするのに必須なショートカット。
意外と知らない人もいるようなので……。
Google検索のアレンジ
いろんな検索オプションがあるのでうまく使いこなしましょう。
特によく使うのは期間絞り。
あまり古い情報がヒットしてももう有効なものではない場合があるので、「検索ツール」を押して期間を絞っちゃいます。
その他、検索オプションはいろいろあるので、LIGさんの記事もご覧くださいー！
技術系の本について
技術書買うとそれだけで成長出来た気になって安心したりします。
買って序盤〜中盤まで読んで積ん読、買って序盤〜中盤まで読んで積ん読、買って序盤〜中盤まで読んで積ん読、、、すると、このような高さの積ん読状態になってしまうことも…！
※僕の机の横の積ん読。（他の場所にも積まれているのであと3、4倍あります）
実際に買う本はちゃんと選定して、しっかり頭に入れていきましょう。
それと、jQueryとかSassとかCakePHPとか、なにかの言語を拡張したような技術は進化が早いので、せっかく本を買ってもそこに載っているコードが利用できない or 現在はバッドプラクティスになっている事も…。
現行バージョンと本で扱っているバージョンをしっかり確認して購入しましょう。
購入以外にも技術書を読む方法もいろいろあるのでお知らせします。
図書館の本、ネットから簡単に予約できる（かも）よ！
僕が住んでいる杉並区はネット予約＆最寄りの図書館にお届けというのをやっています。
CakePHPとか、ブームに乗っていない本なら簡単に借りる事が出来ます＾ー＾；
Twitter社のBootstrapが流行り始めた頃に出たBootstrapの本を予約したら、回ってきたのが3ヶ月後だったりしたので、ご利用はケースバイケースで……。
まずはお住まい地域の図書館情報をチェック！
東京都立中央図書館すごいよ！
最寄りは広尾駅という、個人的にはやや行きにくい場所にありますが、
最新の技術書が潤沢に揃っている&電源付きPC席多数。無線ＬＡＮも一応飛んでます。
この図書館の本は全て図書館内の閲覧に限定されている（館外貸出が無い）ので、読みたい本が読める率が高いです。
丸一日暇な時はぜひぜひ。
スニペットの利用
JavaScriptにしろPHPにしろ、ある程度コードの固まりが決まっていて使いまわせるものってありますよね。
僕はGithubが提供しているGistを綺麗に管理出来るGistBoxというツールで管理しています。
ネットさえあればどこからでも見る事が出来るのでオススメです。
Githubと違ってGistは無料で非公開にできます。
↓さらに詳しくはこちらのブログをご覧くださいませー！
CSSについて
簡単そうで実は奥が深いCSS。
ちゃんと理解していないとページ数やパーツが増えていった時にあっという間に破綻します。
クラスの命名を工夫するとか、無闇にセレクタにIDを使うのを控えるとか、タグに直接スタイル当てるのを控えるとかコツがいろいろあるのですが、
↓こちらの本に良くまとまっているのでオススメです！
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (5件) を見る
エラーはダメ！！
HTMLのエラー回避
W3Cのバリデーター、エラー：0、警告：0はマークアップエンジニアの義務です。
ここで間違いがあるとJavaScriptが組み込まれた時にエラーが出る可能性が高まります。
実際の所、システムの都合で埋め込まれたコードが混ぜ込まれて完全な0、0は難しかったりしますが、最低限に抑えるように頑張っています。
Firefoxにはさくっとエラーを調べられる良いアドオンがありますので紹介します。（Chromeはコレというのが見当たりません……）
JavaScriptのエラー回避
ESLintがトレンドだと聞いています…！（聞いています！）
JSLintは使っていますが、書いているそばからミスを教えてくれるので、いずれかのLinterの導入は必須でしょう！
JSオジサン as a Service.pdf - Google ドライブ
各ブラウザの検証
各ブラウザの差、侮ると大変な事になります。
僕が現在働いている場所ではIE7がいまだに対象ブラウザに入っています＾＾；
古いブラウザの話は置いておいて、各ブラウザの最新バージョンでもそれなりに仕様の差はあるものです。
検証環境をしっかり揃えたいところですが、個人で揃えるのは大変です。
VirtualBoxで信頼度が非常に高い検証環境が出来ますのでおすすめします。
下記のブログは綺麗にまとまっているので紹介します。
実際に現場で導入していますが、IEはそれぞれ5GB〜10GB、
Androidはそれぞれ1GB程の容量が必要になるので、HDD（もしくはSSD）の空き容量確認の上導入してみてください。
まとめ
以上、マークアップエンジニアの現場レベルの事をざっくりまとめてみました。
他に、アクセシビリティの事とか、アクセシビリティの事とか、タスクランナーの事とか、伝えられていないこともいくつかありますが、これは！！というものがあればまた記事にしたいと思います。
最初に
このブログの主について
福島県出身、東京都在住。28歳までベーシストとして音楽活動（バンド）をしたのち、現在は都内のWEB制作会社でマークアップエンジニアとして働いている30代前半の男です。
G's ACADEMYの2期生としてお勉強中です。
このブログについて
G's ACADEMYというスクールをご存知でしょうか？
『セカイを変えるGEEKになろう。』というテーマで今年の4月に誕生したエンジニア養成学校です。
7月開講の2期生として入学し、つい先日授業のフェーズは終わりました。
ただいまメンター付き卒業制作期間に入った所です。
2016年1月末に卒業制作物（なんらかのWebサービス）の提出、その後、2月に卒業制作の発表会があります。
この卒業制作発表会、ただの発表会ではありません。
企業の採用担当の方や出資者の方を招いての発表会で、即進路が決まるかもしれないという大事なものです。
このブログは、
- 卒業制作物の制作課程の記録
- G's ACADEMYに興味がある方への情報提供
- Web制作されている方への情報提供
- 逃げ道の封鎖モチベーションの維持
等など、僕への好影響はもちろん、このブログを読んでいる方にも良い事があればよいなぁと思いながら書いていきます。
G's ACADEMY卒業後もこのブログは継続していくつもりです。
卒業制作でつくるもの
作るものはもちろんすでに決まっていますが、何を作るのかは今のところブログ上では秘密です。
HTMLとCSSはもちろん、JavaScript、PHP（CakePHP2系）を使用して作成していきます。
卒業後になりたいもの
現在はマークアップエンジニアとしてHTMLとCSSばかりを相手にして働いていますが、来年の春にはフロントエンド（とバックエンドもいける）エンジニアとして行動範囲を広げて暮らしていきたいと思っています。（起業は今のところ考えていません）
