COLUMN コラム

基本のコーディングに慣れてきたところで次のステップとして効率の良い開発環境を模索する方、仕事で使われていて習得する必要のある方、新たな手法に興味津々な方、とアプローチは何であれ、

耳慣れない用語に対して、何となくそのままにしてしまってはいませんか。理解への最初のステップとして、よく使用される用語の概念をざっくりと整理してみました。

webデザイナーという職種には明確な定義がなく、どこまで業務を受け持つかは会社によるところも多いのではないでしょうか。そのため個々人のスキルセットも多様化しているように感じます。

デザイン専門のwebデザイナーもいれば、ディレクション〜デザイン〜構築まで幅広く担当するwebデザイナーや、プログラマー並みに実装が得意なwebデザイナーなど様々存在すると思います。

マルチスキルでいくのか、何かに特化したいのか、目指す方向性によっても変わってきますよね。

2.進むのが早いwebの世界

そうした少しずつ異なるスキルセットのwebデザイナーがいるなかで、サイト制作というのは一つの共通した作業目的です。（例え自分で構築はしないというタイプであっても、一連の工程を理解し、用語を把握しておくことは大事ですよね。）

webの世界は進むのが早いとよく言われるように、日々進歩する開発環境においても、gulpやnpmなど、デザイナーにとっては馴染みのない単語が増えてきました。

作業を効率化すべく日々使用&取り入れているエンジニア、一方でデザイナーにとっては確認・編集ベースでの作業や業務上の連携で知っておかねばならない程度がほとんどで、デザイナー（非エンジニア）にとっては学習のハードルが高くなっているのではないでしょうか。

馴染みのない事柄へは誰しも少しは抵抗を感じてしまうかもしれませんが、web業界へ身を置く人は特に、未知への抵抗感を減らし積極的に取り込んでいく姿勢を身につけることがメリットになると思います。

こうしたwebのフロントエンド環境について、どのようなものがあるのか、一部を紹介しなから整理していければと思います。

・拡張機能Pug, Sassの登場

webサイト制作において、基本的にはHTML, CSSのファイルがあれば、見た目のしっかり整ったものが作成できますよね。

ところがページ数の多い大規模サイトだったり複雑な技術を使用するサイト構築では、より効率の良いやり方が必要となってきます。

そこでよく使用されるのがPugとSassではないでしょうか。

Pug　 →　HTMLの拡張(HTMLを効率よく書くためのテンプレートエンジン)

Sass　→　CSSの拡張(CSSを効率よく書くための言語)

HTML,CSSと違ってPugとSassがどう便利なのか？例えば、従来のCSS記述では「この色を変えたい！」となった際に対象カラーのCSSコードをファイルから抽出し、逐一変更しなければなりませんでした。

一方で変数を用いるSass記法では変数の値を変更するだけで事足ります。これだけでも凄い作業効率の良さを感じられることと思います。

・拡張機能の問題点

しかしPugやSassにも問題点がありました。

それはそのままの記述ではブラウザが認識してくれない、というものです。

開発環境を整えてせっかく効率よくコードを書いたのに、最後は基本のHTML,CSSの記述に変換しなくてはならないのです。

・問題点を解決するgulp, npm

そこで登場するのがgulp、npmです。

gulp　→　SassをCSSへ、PugをHTMLへコンパイルする

npm　→　gulpを管理・操作する

※コンパイルとはプログラミング言語で書かれたソースコードをコンピュータが理解できるコード（実行可能な形式）へ変換すること

PugやSassで書いたコードをHTML,CSSへ変換してくれるのがgulp、そのgulpを操作できるのがnpmということですね。

また、gulpはNode.jsをベースとしたタスクランナー(自動処理ツール)の一つなので、使用するにはまずNode.jsをインストールするところから始めねばならないですが長くなるので今回は割愛します。

3.おわりに

効率化させるための手法→問題点→改善手法という形でどんどん洗練されたやり方が確立されていく様を追うことで体系が見えてきました。ですが頭で理解することと実際に使いこなせるかどうかは別物で、実際に使いこなせて初めて理解に近づくということもあります。日頃から触れるよう心がけ、実践へと活かしていきましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。