昨今のウェブサイト制作事情（フロントエンドエンジニア）

2019年8月5日

皆さんこんにちは末ちゃんです。
自分のMacBook Proがバッテリー膨張により、ついにお亡くなりになりました。

買った当初ぐらいからだったんですが、外部ディスプレイを使用すると熱暴走するんですよね。
ちゃんとTDPに沿った冷却設備を設けてるのか甚だ疑問です。

次はMac Mini買います多分。

昨今のウェブサイト制作事情

さて、今日は昨今のウェブサイト制作事情について書いていこうと思います。
ディレクターの皆さんも、是非読んでください。全社的に知っている必要があります。

従来のウェブサイトの制作方法

従来のウェブサイトの制作は、HTMLとCSSと、だいたいがjQueryを用いてウェブサイトを制作していました。
これは2015年頃までのことですね。

<html>
<head>
<title>ウェブサイト</title>
</head>
<body>
<nav>
<ul><li><a href="/">トップ</a></li></ul>
<h1>ウェブサイト</h1>
<p>ウェブサイトの本文</p>
<div class="ajax"></div>
</body>
</html>
nav {
  margin-bottom: 12px;
}
h1 {
  margin: 24px auto;
  font-size: 48px;
  color: #333;
}
$(function() {
  $.ajax({
    url: 'hogehoge',
    type: 'POST',
    ...略
  })
  .done((res) => {
    $('.ajax').html(res);
  })
  .fail((res) => {
    console.log(res);
  });
});

みたいなことを書いていました。
共通部分があったとしても、それらを一個一個丁寧にコピーしたり、同じことを何度も書いたりして使用していました。

非常に生産効率が悪いです。

ちょっと前のウェブサイト制作事情

最近はそんな非効率なことはせず、もっとプログラムを書くように効率的なものがでてきました。JST、JavaScripte Templates Engine です。

恐らく現在多く使われている有名な物では、pug があります。
pug は変数を定義したり、別のファイルを継承したり呼びだしたり、mixinを定義することなどができるため、コンポーネント的な設計ができます。

extends _layout
include _package
block title
    title= package.title
block body
  include inc_nav
  h1 ウェブサイト
  p.
    ウェブサイトの本文
  .ajax
-
  var package = {
    title: 'ウェブサイト'
  };

 

またCSSも直書きすることはほとんど無くなりました。現在主流は恐らくSassでしょう。（Sass記法とScss記法がありますが、Scss記法のが主流のようです。個人的にはSass記法のが好きです。）

$spacing-normal: 12px
$spacing-lg: 24px
$font-size-lg: 48px;
$font-color: #333;
nav
  margin-bottom: $spacing-normal

h1
  margin: $spacing-lg auto;
  font-size: $font-size-lg
  color: $font-color

 

Ajax処理なんかは、jQueryを使うよりVue.jsを使うことのが多くなってきているのではないでしょうか。
jQueryではViewとMethodを分離した設計ができないため、修正がいちいち大規模になります。Vue.jsはViewとMethodは別々に扱えるため、ソースの可読性も高く、修正しやすく、バグも発生しにくくなっています。

var app = new Vue({
  el: '.ajax',
  data: {
    ajax: []
  },
  mounted() {
    axios
      .get()
      .then((res) => {
        this.ajax = res;
      }
      .catch();
  },
});

最近のウェブサイト制作事情

そして新時代、Nuxt.jsやGatsbyJSといったフレームワークを使用し、コンテンツはHeadless CMSなどを使用することが流行ってきました。

これらを使用すると、やっておくべき基本的なコード圧縮等のベストプラクティスを勝手に実装してくれるので、開発環境の構築に時間がかからず、素早くウェブサイトを制作することができます。

また、APIベースでコンテンツを扱うということは他システムにデータを流用しやすくなるため、リニューアル時などの工数が劇的に減少します。

コンテンツデータは、ContentfulやPrismicなどのサービスを使用したり、最近開発中のstrapiなど、自前のサーバー上でHeadless CMSを構築できる物を使用したり、またGoogle Spreadsheetを利用してシートをJSON化、APIとして配信するといったことができます。

ということは、ソース上ではコンテンツデータを一切扱うことがなくなるため、誰でもウェブサイトを更新することができるようになるため更新コストが下がったり、ソースの流用が容易になり、制作コストを下げることもできます。

Nuxt.js でのソース例を書いてみます。

<template>
  <nav-vue :data="documents.nav" />
  <title-vue :data="documents.title" />
  <paragraph-vue :data="documents.paragraph" />
</template>

<script>
export default {
  async asyncData({}) {
    return axios.get('API URL')
    .then((documents) => {
      return { documents }
    })
  }
}
</script>

<style>
body {
  margin: 0;
}
</style>

こんな感じになります。

従来みたいに、ソース上に原稿が書いてあればぱっと見なんのことが書いてあるのかわかるのですが、こうなるとある程度の練度が必要になります。

学習コストが高くなってしまっていますが、逆に言うと今後はこういう構築の仕方がスタンダードになってくるのではないでしょうか。

まとめ

5年前、10年前とは随分様子が変わってきたウェブサイト制作事情。
個人的に普段からよく言うんですが、今後はウェブサイトとアプリに垣根がなくなると思っています。

これからはユーザーに対して一方的に情報を提供するのではなく、ユーザーが欲しい情報をリアクティブに提供できるウェブサイトがメインとなってくると思います。

いずれにしても、ひとつのウェブサイトのソースを書くだけでもおおよそ何千行から何万行のソースコードを書きます。
なかなか大変な仕事ですが、これもまた楽しいのでやっていけますね。

それではまたお会いしましょう。

Share Button