【JS】フロントエンド界隈で話題のparcelことはじめ

JavaScript

最近のフロントエンドは、様々なツールやフレームワーク、ライブラリ等を利用し、

いろいろなものを組み合わせてコーディングしているようです。

こうなってくると、細かいファイルが沢山生成されていきますね。

それぞれの管理をどうするのか、というと細かいファイルをガッチャンコとまとめてくれるツールを利用するわけですね。

 

今回触るparcelもがっちゃんこしてくれるツールの一つです。

公式サイト

https://parceljs.org

特徴といえば、設定ファイルがないこと。

Webpackは便利で情報も多く、導入している方も多いかと思いますが、設定ファイルを作るのが、なんとも面倒。

parcelさんは、そんな面倒さをなんとかしてくれるかもしれない救世主となるのか。

 

ということで、今回はparcelを導入し実際に実行してみて便利さを味わっていきます。

 

 

導入

まずは導入。

yarnやnpmなどのパッケージ管理ツールを利用してインストールします。

yarn add parcel

 

これだけでいいのは楽ちんで便利。

他に使いたいものがあれば適宜追加してください。

 

後ほど、Reactも一緒に入れて行きます。

 

ことはじめ

parcelさんは、最終的に一塊になっているものを指定すると、ソレに関するJS/CSS/Image等々をひとまとめにしてくれます。

そこで、まずはJSファイルとHTMLファイルを作りましょう。

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
　　<meta charset="utf-8">
　　<title></title>
</head>
<body>
　　Hello parcel!
 
　　<script type="text/javascript" src="./js/hoge.js">
　　</script>
</body>
</html>
window.onload = function() {
  console.log("hoge");
}

ファイル構成はこんな感じ。

parce_first/
   ├── js/
   │    └── hoge.js
   └── index.html

 

さて、ここまでのファイルを見てみると

「index.html」は「hoge.js」を呼び出していますね。

これをもとに、parcelさんはいい感じにまとめてガッチャンコしてくれます。

ターミナルから、以下のコマンドを実行します。

yarn run parcel index.html

すると、ファイルを監視し、結果をローカルサーバを通して確認することができます。

デフォルトでは、ブラウザから「localhost:1234」にアクセスすると確認できます。

 

ちっちゃいですが、とりあえず表示できています。

そして、コンソールにも表示があるはずです。

 

さて、このままだとあまり嬉しさはありませんね。

そこで、ライブラリやフレームワークを使ったものを見てみましょう。

 

ライブラリ・フレームワークを追加

今回はフレームワークとして、Reactを利用します。

hoge.jsを変更します。

// Reactを読み込む
import React from 'react';
import ReactDOM from 'react-dom';
 
// 作成したコンポーネントを読み込み
import Hoge from './component/Hoge';
 
window.onload = function() {
  console.log("hoge");
  // 以下を追加。
  ReactDOM.render(<Hoge />, document.querySelector('.hoge_area'));
}

ReactコンポーネントとしてHogeを作っていきます。

import React from 'react';
 
const Hoge = function() {
  return (
    <div>
      hogehoge
    </div>
  );
}

export default Hoge;

シンプルな、div要素を作るコンポーネントを定義してみました。

ファイルは以下のように配置。

 parce_first/
    ├── js/
    │   └── hoge.js
    │   └── component/
    │          └── server.rb
    └── index.html

 

これも、localhost:1234にて確認してみましょう。

consoleにはhogeと表示されているのと、画面にはHTMLのテキスト以外にもhogehogeとコンポーネントの内容も表示されている事がわかります。

素晴らしい。

 

後は、コンポーネントを入れ子にしたり、他のライブラリや自作のスクリプトなどを追加しても、同じように特に指定をしなくても

いい感じにガッチャンコしてくれます。

 

 

まとめ

特段、設定をしなくてもいい感じにフロントエンド周りのものをひとまとめにしてくれるのは便利ですね。

あまり複雑な場合はわかりませんが、シンプルな場合はWebpackよりも手軽でいいかもしれません。

 

 

今回はここまで。

おわり。

Posted by しきゆら