manmanrai’s diary

新米フロントエンジニアの勉強記録ブログ

現在の仕事に合わせた開発環境(2017/06時点)

現在の仕事

記録のために、この記事を書きたいと思います。
今は(採用、広告)制作会社に勤めています。仕事は、大体静的なページが多いです。
例えば会社のコーポレートサイトや新卒採用サイトなど、広告寄りのサイトはランディングページなど単発なお仕事がメインです。

更新する部分が少ないため、ほぼフロントエンド側で完結できるな案件です。 ページ数もそんなに多くありません。多いときはせいぜい10ページから20ページぐらいです。

フロントエンドを極めたいなら、恐らくほとんどの方正確性や効率化を追求し始めるでしょう。 もう単純なhtml,css,javascriptを書くのは効率が悪く感じられるではないかなと思うでしょう。

そこでコンパイル必要な環境を構築し始まります。 codepenでpug,scss,sass,perl,typescriptなど便利なもの使ってらっしゃる方々よく見かけますね。

SASS

公式サイト:

Sass: Syntactically Awesome Style Sheets

最初に注目したのはsassでした。 cssって、ファイル長くなりがちなので、デザイナーさんから貰ったデザインデータたまにフォントサイズが違ったりしますので、 それで同じサイトなのに、そこでバラツキなったの個人的に気持ち悪くて、品質管理のところでも力なれたらいいなと思いまして、sassも使い始めました。

変数が使えるのがとても便利です。
extendやmixiなど機能も使えます。同じサイトで細かい色やサイズ揃えたい時(統一感)すごく助かります。
そして、一気にコードを圧縮してくれるの、そのままファイルサイズも軽くなれるのかなり良いかなと思いました。

PUG

公式サイト:

Getting Started – Pug

次はpugです。 例えば納品前の段階で全htmlファイルにある部分変更したら、いちいち手作業で変更しなければなりません。 そこでミスしたら、よく見落としたりして、本番にアップされても気づくまで結構時間経つし、 後でクレームなりやすい、リスク背負うことになるじゃないかなと思います。

もちろん、解決方法色々あると思うですが、 例えばssiとか、良いサーバーで使えるなか助かるのですが、結局お客さん側のサーバーに頼ることになって、必ずできるの保証がありません。
pugのincludeとかほぼssiと同じ感覚で、変数など使った、if elseなど使ってページよって違うもの入れるこのもできます。 すごく便利だと思います。

まとめ

多分、ここまで来たら、どうしてglupなど全自動化なもの使わないだどう疑問持ったりするかもしれません。 確かにglup使ったら画像圧縮やjs圧縮など面倒なこと一気にやってくれるだと思いますが、ただ、最初にも申し上げましたが、うちの会社の案件本当にページ数少なすぎて、そこまで開発環境を整ってから、開発スタートするのも時間もったいないと思っております。

現状はpug,scss,javascript/typejavascriptさえあれば、すぐコーディング始める手軽バージョンが今の自分んにとってのベストかもしれません。 今使ってるパソコンは一応glupの環境も作れますが、未だに出番がなかったです。 自分には必要がないと判断しましたが、10ページのサイトでもglupを導入する方社内には二人にもいます。どっちが正解、不正解なんかないから、コーディングする自体って、結構各自のスタイルありますし、もしかして、自分はただglupなど全自動コンバイラーの良さ分かってないだけかもしれないですね。

そういう機会あったら、大型案件と出会ったら、使ってみたいと思います。
これからも技術と共に一緒に進化し続けたいと思っております。