BLOG

ブログ

programming

Nuxt.jsについて社内研修会を行いました。

こんにちは、ティウェブ藤園です。

先月、数日間に渡って、外部講師をお招きし「Nuxt.js」を利用したWebサイトの構築方法について社内研修会を行いました。

Webサイトに動きをつけるのに必須となっているJavaScriptの概要から、Node.jsのパッケージ管理ツールであるnpmを使用したNuxt.jsの環境構築、そしてNuxt.jsを活用したWebサイト構築方法を学びました。

目次

研修会のきっかけ

①CMSのデメリットを解消したかった

最近のWebサイトの制作にあたって「簡易な部分は自分たちで更新ができるように作ってほしい」という要望が多く、クライアント側で更新ができる形で構築するために、 CMSの導入がかなり増えています。

📌CMSとは
HTMLやCSSといったサイト制作の専門知識を必要とせずにサイト構築を自動的に行うことができるシステムです。

2018年の段階で、世界のWebサイトは半分近くがCMSで構築されていると言われており、その割合は年々増え続けている状態です。

▼参考
https://news.mynavi.jp/article/20190507-817761/

CMSはある面では非常に便利ですがデメリットもいくつかあり、ケースによってCMSのデメリットを回避できるように、そのための技術を準備しておきたかったのです。

②Webサイトに動きをつけるにあたって、jQueryよりよいものを知りたかった

最近は、閲覧者側の環境（OSやブラウザの機能）の向上もあって、スクロール時やボタンのホバー時のエフェクトなどこまごましたところから、背景に動画を入れてインパクトをつけたりするなど、動きのあるWebサイトが多くなっています。

会社やサービスの顔でもあるWebサイトに、オリジナリティを出したり、利用して心地いいと感じていただけるようにしたりと、色々な工夫がされています。

この流れは今後もっと進み、より複雑な動きを求められるようになると思われます。

ティウェブではそういった動きを実装するにあたって、主にjQueryを使用してきました。

💡jQueryとは
ウェブブラウザ側で処理を行う言語であるJavaScriptを、より容易に記述できるようにするために設計されたJavaScriptライブラリのことです。

もちろん、現状でjQueryで特別困ることが多いわけではありません。

ただjQueryにも弱点があるため、ケースによって柔軟に対応できるように代替手段を学んでおきたかったのです。

③Webサイトは表示速度が最重要項目

「Webサイトの表示時間が0.1秒遅くなるごとに、ECの売り上げば1%下がる」と言われているほど、Webサイトには表示速度が求められています。

そこで、CMSとjQueryに共通するデメリットである表示速度の問題を解決するためにも、それが実現できそうな「Nuxt.js」について学ぶ場を設けました。

Nuxt.jsとは

Vue.jsというJavaScriptのフレームワークのフレームワークのことです。

同系統のフレームワークとしてGatsby.js（React.js）も候補のひとつでしたが、Vue.jsやNuxt.jsは公式ドキュメントが日本語対応されており、とにかく充実しているので、今後困ったときにドキュメントを見れば対応できそうというのが大きな利点でした。

研修会にした理由

Nuxt.jsやVue.jsは、jQueryに比べて学習コストが高く、npm（node.js）などから学ぶ必要があります。

先述の通り公式ドキュメントは日本語対応しており、充実していますが、やはりJavaScriptの基礎を理解している必要があり、HTMLやCSSなどがメインのマークアップエンジニア、コーダーには難しい部分がありました。

そのため、今回の研修会では外部のエンジニアを講師としてお招きし、JavaScriptの基礎からお教えいただきました。

研修会で学んだこと

具体的な研修内容は下記の通りです。

  • Javascriptについての基本的なこと、ES2015という新しい書き方について
  • npm（node.js）の使い方や概念について
  • Nuxt.js（Vue.js）での環境の作り方について
  • ワークショップ

まとめ

今回の研修会では、Nuxt.jsの学習を通じて、Webサイトの軽量化・CMSのセキュリティ対策方法のひとつも学ぶことができました。

次々に新しい技術が出てくるWebの世界、大変ですがやりがいもあります。何よりお客様によりよいWebサイトを提供できるよう、これからも研究や工夫を重ねていきます。

CATEGORY