世界を旅して人生を楽しもう。コメントを書くWebpack時代の終焉か?設定ファイルゼロのビルドツールParcelクイック入門Webアプリケーションのビルドツールと言えば、2018年度はWebpackの独壇場でした。時代が進むにつれてあらゆるツールは進化しています。今回は設定ファイルゼロの次世代ビルドツールParcelを紹介します。関連記事はじめにWebpackはとても素晴らしいビルドツールです。JavaScriptのビルドに留まらず、CSSや画像などを全てJavaScriptの世界に取り込んだ発想はとても新しいものでした。今Webアプリケーションの開発を始める場合、特にフロントエンドの開発ではWebpackを使わないという選択肢は無いでしょう。流行りのプラグイン方式をとっていることも大きいです。多くのデベロッパーがWebpackのプラグインを開発してWebpackのコミュニティーに間接的に貢献しています。私もプラグインを開発した一人です。Webpackには大きな問題があります。それは、プロダクションレベルの設定ファイルを書くと、設定ファイルが複雑化してしまう点です。Webpackに限った話ではありませんが、設定ファイル地獄は誰もが経験し、うんざりしているのは事実です。そこに目をつけてだと思いますが、「設定ファイルゼロ」を掲げて開発された次世代ビルドツールが「Parcel」です。設定ファイルがゼロでWebpackでできることを全て実現できるのであれば、Webpackを使う理由はありません。設定ファイルが無いほうが良いに決まっているからです。それを実現できるかどうかがParcelへの期待であり、おそらく2019年には答えが出ることでしょう。今回は、そんな注目のParcelをささっと入門してみましょう。Webサイトのビルドまずは、一番ベーシックなHTMLとCSSで構成されたWebサイトをビルドしてみましょう。ベースを作るベースとなるフォルダとファイルを作り、Parcelをインストールします。.postcssrc実装する非常に簡単なサイトを作ってみましょう。Modulesを使ってJavaScriptから読み込むことにしましょう。Modulesを使用するので、PostCSSの設定ファイルを準備しましょう。true}この状態でParcelを起動するだけでpostcss-modulesのパッケージが自動的にインストールされます。package.json開発用とプロダクションビルド用のコマンドを追加します。}}デフォルトのままでもよいのですが、せっかくなのでオプションで2箇所に変更を加えています。1つ目は、ParcelでWebサイトを動かす場合はデフォルトのポートは1234ですが、オプションで8080に変更しています。2つ目は、ParcelでWebサイトをビルドした場合のデフォルトのディレクトリはdistですが、オプションでbuildに変更しています。動作確認それでは実際に動かしてみましょう。Replacement)が有効な状態でWebサイトを表示します。1.64s.ブラウザから「http://localhost:8080」にアクセスすると。この状態で、HTML、CSS、JavaScriptを変更すると、自動的にリロードされます。次に、このWebサイトをプロダクション用にビルドしてみます。js.af1e5064.cssしっかりとビルドできていますね。SASSのビルド次に、CSSで書いていた部分をSASSで書き直してみましょう。ベースを修正するCSSファイルとPostCSSの設定ファイルおよび依存モジュールを削除して、SCSSファイルを追加します。src/css/index.scssソースコードを修正するindex.scss簡単なSCSSファイルを書きます。oblique;}index.jsCSSファイルを読み込んでいた箇所をSCSSで読み込むように修正¥します。${currentYear}.`);この状態でParcelを起動するだけでsassのパッケージが自動的にインストールされます。先ほどと同じくParcelを起動します。2ms.ブラウザで「localhost:8080」を表示します。正しくSCSSが読み込まれています。モダンJavaScriptの構文のビルド(Babelプラグイン)BabelプラグインでモダンなJavaScriptの構文を追加してみましょう。ベースを修正するBabelを使うので、設定ファイルを追加します。.babelrcソースコードを修正する.babelrc今回はBebelプラグイン「@babel/plugin-proposal-class-properties」を追加して使います。]}index.jsを修正するBabelプラグインで追加したクラスのプロパティを使った形にファイルを修正します。Greeting();greeting.display(currentYear);動作確認Parcelを起動してみましょう。56ms.ブラウザで「localhost:8080」を表示します。BabelでモダンなJavaScript構文が使用できました。Reactアプリケーションのビルド最後に、少しだけ実践的な話題として、簡単なReactアプリケーションをビルドしてみましょう。Reactをセットアップするまずは、必要なフォルダとファイルを作り、ParcelとReactのモジュールをインストールします。src/App.css実装するpackage.json先程と同じく開発用とプロダクションビルド用のコマンドを追加します。}}index.htmlシングルページの起点となるHTMLファイルを作成します。src="./index.js"></script></body></html>Reactの起点となるrootクラスと、Reactの起点となるindex.jsスクリプトの読み込みを書きます。index.jsReactの起点となるJavaScriptを書きます。document.getElementById('root'));index.cssページ全体に適用するCSSを書きます。0;}App.js簡単なJSXを書きます。App;App.cssReactっぽい色のスタイルを書きます。white;}動作確認それでは、Parcelを起動してReactプロジェクトが動くか見てみましょう。5.31s.ブラウザで「localhost:1234」を表示します。プロダクション用にビルドもしてみましょう。src.c71201e7.css完璧ですね。ここまでで設定ファイルは完全にゼロです。最後にいかがでしたか?設定ファイルゼロのParcelの凄さが分かったでしょうか?Webpackに完全に入れ替わるかどうかはまだわかりませんが、JavaScript界隈は高速で古いツールを捨てていくので、可能性は高いでしょう。2019年のParcelの進化に期待ですね。最新の記事KD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。Tumblrでソースコードをシンタックスハイライトする方法プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ...Springプロジェクトをマルチモジュールで構成する方法(Maven編)マルチモジュール化は機能のまとまりを明確化し、プロジェクト再利用性やメンテナンス性を高める良い方法です。)フルスタックエンジニアの需要はスタートアップであればあるほど強いものです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。AuthorKD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。最新の記事KD世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。Tumblrでソースコードをシンタックスハイライトする方法プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ...Springプロジェクトをマルチモジュールで構成する方法(Maven編)マルチモジュール化は機能のまとまりを明確化し、プロジェクト再利用性やメンテナンス性を高める良い方法です。)フルスタックエンジニアの需要はスタートアップであればあるほど強いものです。