Node.js
npm
vue.js
webpack

WEBフロントエンド技術の定番をざっくり

はじめに

WEBフロントエンドテクノロジ

WEBフロントエンドの世界は流行り廃りが早くカオスです。
そのうえで、幾つかの技術を組み合わせてプロジェクトにあたるのが通常です。
次に示すのは、定番となっている組み合わせの一種です。

  • Node.js & npm (js開発環境)
  • webpack (js開発環境)
  • Vue.js (フロントエンドフレームワーク)

それでは次から、それぞれについて解説をしていきたいと思います。

Node.js & npm

Node.jsとは

Node.jsはjs実行環境です。
こいつがいるおかげでjsは「ブラウザの挙動をちょっといじる」ための言語から、
「なんでもガッツリ開発できる言語」へと化けます。
次に説明するnpmはNode.js上で動きます。

npmとは

jsのパッケージ管理システムです。
npmには大量のモジュールが登録されており、
npmのコマンドを使用することで手軽にこれらを自分のプロジェクトに導入することができます。
現代的なjs開発では必須です。

後述するwebpackやVue.jsも基本的にはこのnpmを使ってプロジェクトに取り入れていきます。

参考リンク

webpack

webpackとは

jsはhtmlに直接ちょろっと書くもの。これは過去の話です。
今では大量のjsファイルが複雑な依存関係を構成するのが当たり前になってしまいました。
これら大量のjsファイル全てをひとつずつhtmlに読み込むのは現実的ではありません。
そこで

「全てのjsファイルを単一のjsファイルにまとめなおしたうえで取り込む」

というやり方がとられます。
このような「jsをまとめる」ことを実現するツールをモジュールバンドラーなどと呼びます。(その名の通り、モジュールをバンドルしますから)

実はwebpackはjsだけでなく画像やcssもバンドルが可能で、
それが人気となっている理由のひとつでもあります

リンク

Vue.js

Vue.jsとは

jsによるWEBフロントエンドフレームワークです。
後発ながら今もっとも勢いがあります。

何ができるの?

表示内容を動的に操作できます。
同様の目的をもったフレームワークとして

  • Angular
  • React

などなど。

学び方

Vue.jsはコアメンバーに日本人がいる関係で日本語ドキュメントが充実しています。
公式ドキュメントを読めばほとんどのことはできます。
Vue.jsは公式ドキュメントが最強です。

リンク