くーへいです。
まったくの異業種、つまり「未経験」から「フロントエンドエンジニア」に転職して、2014年3月末で1年になろうとしています。
転職するまでは、趣味程度にサイトを作ったことがある程度でしたが、転職後は50以上のサイト構築に携わり、”プロ”の「フロントエンドエンジニア」になれたかな、と思っています。
それもこれも、勤務先（カタツムリデザイン）の代表が丁寧に教えてくれたからですね！
さて、今回は私が”プロ”になれた！と感じられるようになるまでに心掛けていたことをまとめたいと思います。
「やる気」と「1年という時間」と「この心得」があれば、”プロ”の「フロントエンドエンジニア」になることができるはずです。
（※あくまで、私が考えることであって、”プロ”になれることを保証するものではありません。）
なお、「フロントエンドエンジニア」とは、「HTML」や「CSS」のコーディングをはじめ、「WordPress」など「CMS」の実装やカスタマイズ、「jQuery」の設置や作成する人を想定しています。
目次
- デザインをコード化する前に頭で考える
- 適度にツールを用いる
- 要素や関数などの意味を理解して使う
- 適度にコーディングルールを作る
- ハマったら完成を優先させ、完成後に考察する
- 難しいと思ったことはメモを残したり、他人と議論したりする
- 使う人の目線になって考える
- 過去に作ったサイトを見返す
- 他人の作ったサイトを見る
- きちんと休む
1.デザインをコード化する前に頭で考える
是非コード化する前にもう一度、デザインデータを「コーディング」目線で見てみて下さい。
「こんなデザインはコーディングしにくいな・・・」
「もっと簡単なデザインにしてくれればいいのに・・・」
等々が頭をめぐるでしょうが、どんなデザインでも必ずコード化できるはずです。
“プロ”の「フロントエンドエンジニア」としては、簡単にデザインを変えてくれと言うのは良くありません。
コードの良い悪いを抜きにして、難しいと思える箇所のコーディングの方法を何パターンか考えてみてください。
そうすることで、自分のスキルアップにもなり、今後同じようなデザインが来てもすぐに対処が思いつきます。
次に、最善と思う方法で、ざっくりと頭の中でコード化し、どれくらいの時間がかかるかを計算してください。
もちろん、誤差は出ますので、多めに考えることをお勧めします。
そのうえで、納期に間に合いそうにないなら、別の方法を考えるか、良い方法が1つも思いつかないならデザインを修正します。
この作業を行うことで、ディレクションもスムーズになりますし、慣れれば時間の計算も正確になってきますので、心の余裕が生まれます。
2.適度にツールを用いる
いよいよコーディング！・・・の前に、自分の使うべきツールをチェックしましょう。
コーディングするために必要なものはいろいろありますが、私の環境は以下の通りです。
- エディタは「Sublime Text 2」
- 「Emmet」は必須
- 画像の書き出しには「Photoshop」もしくは「Fireworks」（基本的にデザイナーに合わせる）
- アップロードには「FileZilla」
- 画像の圧縮に「PNGGauntlet」、「Caesium」
新しいツールを導入する前に、「本当に必要か」、「メリットとデメリットは何か」を考えたうえで導入することをお勧めします。
ウェブ業界は移り変わりも激しいですので、新しすぎる技術を実務に取り入れる前にはよく考えましょう。
そうでないと、ツールに翻弄されて、作業が進みません。
3.要素や関数などの意味を理解して使う
どうやって構築すればいいか迷うと、「Google検索」で情報を探して、これだ！と思ったものをコピペする・・・。
これは、悪いことではありませんが、単にコピペする前に、“どういう理屈でそうなるのか”を理解し、構築中のサイトに合わせた変更を行うようにしてください。
単純に知識を深めるため、という理由だけではなく、どの部分にどういう記述を追加したのかが把握しやすくなり、意図した表示にならなかった時の修正もスムーズになります。
4.適度にコーディングルールを作る
会社によってはすでにある場合も多いと思いますが、ある程度のコーディングルールは必要です。
しかし、ルールを決めすぎるのもよくありません。
更新する際に誰が見ても分かるコードというのは、作業を楽にさせます。
しかし、「こういう時はどう書くんだっけ・・・」と悩んでしまうほど複雑なルールは逆に作業を遅くさせます。
5.ハマったら完成を優先させ、完成後に考察する
コーディングをしていると、「思った通りにならない・・・」と悩むこともあります。
そういったときは、その部分にばかり固執していると、作業が一向に進みません。
とりあえずサイトを完成（リリースという意味ではなく、一度最後まで作業を行うという意味）させることが大切です。
これは個人差ですが、ハマった部分にこだわっていると、「できない」という気持ちが次第に焦りに変わり、さらなるドツボにはまる可能性が高いです。
何事も「ずっと考える」よりは「一度ほかのことをしてから考える」ほうが、うまくいくものです。
しかし、忘れてはいけないのは、「分からない」をそのままにしないことです。
結局デザインを変更してもらって解決したにせよ、画像にして対応したにせよ、分からなかった部分は「どうすればできたのか」を時間があるときに考察してください。
時間がたって突然解決策が思いつくこともあります。
そうなれば、次に同じようなデザインが来た時も、安心して構築できますよね。
6.難しいと思ったことはメモを残したり、他人と議論したりする
前項のようにハマった時、そのことについてメモを残したり、他人と議論をしてみたりしてください。
これは、コーディングに精通している人である必要はありません。
聞いれくれるならば、パソコンが出来ない人でも問題無いと思います。
大切なのは、「ことば」にすること。
メモを書いたり、話をしたりしているうちに、パッとアイデアが浮かぶこともあります。
7.使う人の目線になって考える
常にパソコンに向かって行う作業ですので、特にお客さんと接することが無かったりすると、使う人の目線を忘れがちです。
ウェブサイトは「優秀な営業マン」という人もいますし、私は「商品やブランドの価値を高めるもの」と考えています。
商品をただ売るだけの営業マンと、お客さんの要望や困ったことに合わせて適切な商品提案をする営業マンでは、営業を受ける方の感じ方が変わってきますよね。
たとえ、その時は商品を買わなくても、適切な商品提案をする営業マンは強く印象に残りますし、その会社の印象も良いものになります。
そう考えると、自ずと「このウェブサイトを見ている人はどう考えるだろう」という視点が大事に思えるはずです。
HTMLのコーディングでは、デザインの時点でその視点を持っていないと修正は難しいのですが、「WordPress」のカスタマイズや「jQuery」の実装などでは、使う人の目線が大切です。
- サイトの表示が遅くなっていないか？
- どのブラウザで表示しても、文字を拡大しても、表示を拡大してもデザインの崩れはないか？
- お問い合わせフォームは入力しやすいか？
- サイト内検索をしたときの動きはわかりやすいか？
- クライアントが更新しやすいシステムになっているか？
「ユーザビリティ」の良し悪しはデザイナーによっても左右されますが、「フロントエンドエンジニア」が担う部分も大きいはずです。
「要件を満たしているか？」だけではなく、「気持ちよく使えるか？」と考えることを、忘れてはいけません。
8.過去に作ったサイトを見返す
あなたは、過去に自分が作ったサイト（コード）を見返したことはあるでしょうか？
更新まで担当することがあれば、その機会は多いと思います。
過去の自分が作ったサイト（コード）を見返すことで、どういった部分のコードを、どのように変えていったかがわかります。
「この部分は成長したなあ」と思うこともあれば、「最近ここまで頑張れていないな・・・」と思うこともあるかもしれません。
どちらにせよ、「成長した自分」や「怠けている自分」、「ぶれている自分」を再認識するには最も良い手段です。
定期的に過去のサイトを見返してみることをお勧めします。
9.他人の作ったサイトを見る
自分が作ったサイトを見返すことに合わせて、他人の作ったサイト（コード）も見てみて下さい。
それが、「質が悪いコード」であっても、「質が良いコード」であっても、勉強になるはずです。
「質が悪いコード」を見たときは、「なぜ、それを悪いと思ったか」をきちんと考えてください。
場合によっては、そのデザインを実現するには、そのコードしか不可能である可能性もあります。
しかし、「こういう書き方もできるのにな」と思えたなら、また1つコーディングの幅が広がるはずです。
10.きちんと休む
コーディングやプログラムをしていると、体は疲れにくいですが、頭がすごく疲れます。
特に、上記の1～9をきちんとこなしていると、尚更だと思います。
ウェブ業界は大変忙しく、帰宅は毎日終電・・・という人もいると思いますが、それはとても悪循環だと思っています。
短時間に、集中して、質の高いコードを書くことで、休む時間もしっかりと作りましょう。
まとめ
今回、初めて自分の想いを記事にしてみましたが、いかがでしたでしょうか。
たかが「コーディング」と思われるかもしれませんが、いろいろなことを考えてやっているつもりです。
見えない部分であるからこそ、質の高いコードが求められると思います。
みなさんの「こだわり」も教えて頂けると嬉しいです！