だれよりもやる

ころちゃんの雑記

Amazon S3へのセキュアなファイルアップロード方法まとめ

連休はAWSでセキュアにサーバーレスする方法勉強するぞー!と思い、 手始めにセキュアにS3へファイルをアップロードする方法を整理したかったのでまとめた。 サーバーレスとそうでない場合の比較である。

次の3種類を紹介する。

  1. アプリケーションサーバー経由
  2. アプリケーションサーバー + 署名付きURL
  3. サーバーレス(API Gateway + カスタムオーソライザ)

1. アプリケーションサーバ経由

f:id:corocn:20180428215902p:plain

非常に一般的な方法。画像には分かりやすさのためにRailsを載せているが、 RailsでなくてLaravelでもDjangoでも同様だしそもそもフレームワークを使わなくても良い。

認証はセッション認証やトークン認証をアプリケーションサーバで解決し、 サーバーが保有するS3のアクセスキーを使ってアップロードを行う。 アクセスキーはユーザーには露出していない。シンプル。

2. アプリケーションサーバー + 署名付きURL

f:id:corocn:20180428220354p:plain

署名付きURLは、S3へ期限付きでアップロードやダウンロードを可能にする仕組み。 S3だけでなくてGoogle Cloud StorageやAzure Storageにも同様の機能は存在するようだ。

署名付き URL を使用したオブジェクトのアップロード - Amazon Simple Storage Service

1.同様に認証はアプリケーションサーバで解決した上で、アップロード要求に対して、署名付きURLを返す。 クライアントは署名付きURLに対してファイルをアップロードする。

この方法の利点は、ファイルが直接S3に投げ込まれるため、アプリケーションサーバー側での負荷が減る。 フロー見ると分かるけど、そこまで複雑な仕組みではないはず。

Rails 5.2で導入されたActiveStorageのDirect Uploadsがこの仕組みを採用している。 Active Storage Overview — Ruby on Rails Guides

3. サーバーレス(API Gateway + Custom Authorizer)

f:id:corocn:20180428221400p:plain

API Gatewayにはカスタムオーソライザーという機能が存在し、APIに認証機能を組み込むことができる。 カスタムオーソライザーの中で、CognitoやAuth0のような外部IdP(Identity Provider)から発行されたTokenの検証を行えば良い。 カスタムオーソライザーって言ってるけど実態はLambda Functionなので、サービスロジックの前段でLambdaでTokenの検証を行うような感じ。

API Gatewayの認証さえ潜り抜けてしまえば、後はLambdaを経由してS3に保存するなり、S3プロキシとして直接アップロードするなりなんでもできる。 また、これはファイルのアップロードに限定する話ではなく、API Gatewayを使う場合の一般的な認証の仕組み・・のはず。

その他

API Gateway + Lambdaで署名付きURLを発行する方法を思いついたが、 署名付きURLを発行するAPIに対する認証を考慮すると、回りくどいし先ほど紹介した3でいいのでは?という気持ちになった。 この方法をやろうとしている人を見かけるけど、何か利点があるんだろうか?良くわからない。

感想

図だけ見るとサーバーレスが過度に複雑のように見えるが、 認証の仕組みがAWSに寄ってるだけで、基本を理解すればそう難しくないと思った。 (モノリシックフレームワークの認証機能をそのまま使うのは、それはそれで楽なんだけど)

AWS強い人間違ってたら指摘下さい!

by @corocn

技術書典4へ応募して完売するまでの軌跡

技術書典4 お疲れ様でした! 初めてサークル出展して、ありがたいことに完売御礼することができたので、その軌跡を思い出しながら書こうと思います。

f:id:corocn:20180424002536j:plain

実は当日はアイコンと同じ服だったんですよ。

TL;DR

  • Auth0の本を書いたよ
  • アウトプットのために書いたよ
  • 出版に関する知識がなかったけどなんとかなったよ
  • Re:VIEWで書いたよ
  • 価格設定に一番悩んだよ
  • ちゃんと宣伝したら被チェック数が245まで到達したよ
  • 完売したよ
  • BOOTHで電子版を販売しているよ
  • 自分の今を書くのだ

どんな本を書いたか

IDaaS(Identity as a Service)の Auth0 (オースゼロ)で遊ぶ本を書きました。

techbookfest.org

Auth0はWebアプリケーションに認証機能を組み込みたいけど難しい・・・を解決してくれるサービスです。 もともとアプリケーションの認証・認可周りを素早く実装することに興味があって、 Firebase AuthenticationだとかAWS Cognito, AWS Amplifyあたりを試してウゴウゴしていたときに、このサービスに出会いました。 認証機能を組み込んだアプリをフロントからバックエンドまで一貫して作るような情報が少かったり、 そもそもAuth0自体の日本語の情報も少ない状態だったので、せっかくだし本にしようと思って書きました。

技術書典に出そうと思ったきっかけ

  • 同人活動に興味があった。
  • 会社の同僚が技術書典3に参加していて、とても楽しそうだった
  • 素振りを繰り返して、結果をまとめるのに良いタイミングだった。

あたりが大きな理由です。

Misocaという会社に勤めているのですが、 社内から技術書典3は2サークル、技術書典4では4サークルの出展がありました。 田舎.fmでもちょっと話題になってましたね。 みんなそれぞれのサークルで、好きな本を書いて出しています。

本として書く目的

とにかくアウトプットが目的で書きました。 実際、落ちたらどっかのサークルに拾ってもらおうと思って、当選発表前から執筆を初めています。

アウトプットが目的ならブログでもいいんじゃないの?って話は実際あるんですけど、 前述したきっかけに加えて「同人誌として出す」ドキドキ感を味わいたかったのです。

また、岐阜のド田舎に住んでいるので、 東京でアウトプットするという機会を捻出したかったというのもあります。 なぜ東京か?と問われるとリアルで話を聞いてツッコミを入れてくれるエンジニアの多さでしょうかね。 実際にイベントを終えてみて、物理本を手渡しできる人の多さというのは、大きなモチベーションアップに繋がりました。

東京では連日沢山の勉強会が開催されていますが、5分のLTをするのに新幹線を使って平日片道4時間は正直辛いので、 壮大(?)なアウトプットの方法としての同人誌は良い手段でした。

このあたりは地方で働くエンジニアの苦しいところでしょうか。 技術で解決していきたい問題でもあります。

出版に関する知識はなかった

今回サークル初参加でしたが、応募時点で出版、DTPの知識が皆無でした。 卒論と修論LaTeXで書いた程度です。

そこで助けになったのがいわゆるワンストップ本でした。 この本にはノウハウが詰まってます。次回技術書典に出展したいと思ってる人は、とりあえずこれを読みましょう。 「技術同人誌を書く本」であって「技術書典のための本」ではないのは注意です。同人イベントはコミケとかもありますんで。

感想は以前にもブログで書きました。この記事を書いたのは当選発表前ですね。 技術書典4で同人誌を出すために「ワンストップ!技術同人誌を作ろう」を読んだ(良かった) - 今日のつちや

スケジュール感

当初、印刷所の締め切りから逆算しようとしていたんですが、 締切がある程度近づかないと分からないので諦めました。 直接搬入で5日前ぐらいまでに入稿すればOKそうだという感覚は掴んでいます。

実は自宅が携帯が圏外のド田舎なので、出版所から電話連絡が来ても出れない恐怖を抱えていまして、 いろいろ調べたんですがそんな情報どこにも無いんですよ(ここで問い合わせないところにコミュ力の低さを感じる)。 印刷所からの連絡は電話です(実際そうでしたし、外出中で良かった)。 電話取れないと怖いので、出来る限り前倒しで進めて、不測の事態に備えました。実際不測でしかなかったし。

実際の執筆作業ですが、次のようなスケジュール感で行いました。 最終的にねこのしっぽさんで印刷しました。

  • 1月頭:応募開始。応募してワンストップ本読んで書き始める。
  • 2月頭:当選発表。当選確定したので、イラストの依頼をした。
  • 2月末:自分の中でのざっくり書き終わりの締め切りだったが終わってない。
  • 3月中旬:ざっくり書き終わった。終わりが見えて安堵。名刺作ったことないので先に名刺を作って不安要素を潰しておいた。
  • 3月末:推敲が終わってレビューをお願いするなど。サークルカット用の画像だけ先に貰って、サークル情報を埋める。
  • 4/1:サークル情報の公開が始まる。
  • 4/8:表紙が完成。
  • 4/11:早期入稿完了。ダウンロードカードの制作を始める。
  • 4/18:通常入稿締切だがとくに何もしていない。本当に印刷されるかソワソワした結果問い合わせを投げる。
  • 4/19:キンコーズでおしながきを作る
  • 4/22:技術書典4当日 🎉

60ページ程度の本でしたが、執筆に4ヶ月弱かかりました。 とにかく言えることは前倒しで執筆しろです。まあそれができたら苦労はしないんですが・・・。

どうやって書いたか

執筆環境としてはRe:VIEWを使いました。レイアウトにこだわってないので実際楽でした。(次回はこだわりたい。) レイアウトでTeXが必要そうな場合は、ワンストップ本のソースコードを参考に書いてました。

内容ですが、私の場合はアプリ作成のハンズオン的な要素が強い本だったので、 メモを残しつつ一通りコードを書いてから、ガッと本文を書きました。 コードを書いてる最中に(あとでここに図を入れる)的なメモを残して、画像は後から。

最初にまえがきを書いたのですが、書いてるうちに無限に書きたいことが増えて、 後で全て書き直すことになりますのでやめたほうが良いです。

価格設定

実際一番悩んだところです。 考慮すべきことが非常に多かった。

  • 当日のオペレーションを楽にするために500円か1000円で頒布したい。
  • 60ページ100部を500円で頒布すると印刷費用でトントン。
  • 刷れば刷るほど1冊あたりの費用は下がるが、爆死が怖いので100部程度の数にしたい。
  • そもそも500円で頒布すると新幹線代で赤字になってしまう。
  • もっと価格をあげるにしても、オペレーションを考えると1000円になる。気持ち高い。
  • 後に電子書籍版を500円で販売予定だったので、物理本を500円で頒布するのが微妙。

最終的に物理本にダウンロードカードを付けて1000円で頒布しました。商品はセットのみです。 自分の中では物理本800円、DL版500円として、両方セットで1000円ぐらいの感覚でした。

セットにして商品を1点にしたのは初参加で当日オペレーションをとにかく楽にしたかったからです。実際楽でした。

終わってからちゃんと計算したんですが、 イラスト費や売り子さんへの報酬、岐阜からの交通費・宿泊費、名刺等の雑費などなどを計算したらギリギリでした。 赤字覚悟で初めたんですが、黒字だと執筆自体続けやすいので、大変ありがたいです。

購入していただいた方には頭があがりません。本当にありがとうございます。

宣伝戦略と被チェック数

当日必要なものを作る度に、宣伝も兼ねてツイートしてました。 露骨に宣伝しまくるのも嫌だったので、だいたい1週間に1回程度で、次のタイミングで行いました。

  • サークル情報ページの公開後
  • ダウンロードカード作成時
  • おしながき作成時
  • 開催直前

被チェック数の推移はこんな感じでした。 早期入稿時に50だったのでx3で150部印刷しましたが、最終的な被チェック数は245でした

f:id:corocn:20180424024228p:plain

毎日データ取ってません。過去のツイッターの発言から分かる日だけ引っ張り出して、間は適当に補間した結果ですが、 前日にぐんぐん伸びて当日もぐんぐん伸びました。

全然数足りなくて、売り切れちゃってごめんなさいってずっと言ってました。

完売したよ

2時間で物理本150部、完売しました。 ありがとうございました。

つらかったこと

地方に住んでいるともくもく執筆会や宣伝LTイベントに参加できないのが歯がゆい感じでした。 その分Twitterでの拡散を頑張りましたが。 あとは新幹線往復交通費はやっぱり手痛いですね。

やっておくべきこと

名刺を作りましょう。 私は調子に乗ってシール名刺を作って遊んでましたが、そんなに凝らなくていいと思います。 アイコンとプロフィールだけでもシンプルで十分サマになります。

リハーサルしましょう。 リハーサルというのは、当日のブースを模して売り子の真似事を行うことです。 実際配置してみると分かるのですが、めっちゃ狭いのが分かります。

当日はポスターやら名刺やらそもそも頒布する本を机の上に置いたので、この限りではなかったのですが、 狭さを実感できたのは良かったです。

宣伝しよう。 本を執筆したり、名刺やおしながきを作るのも技術書典の活動の一部(後日譚書くまでが技術書典だよ!的な)ですし、 その活動をアウトプットするのは大きな宣伝になります。ちゃんと宣伝すればみんな見てくれます。宣伝をするのです。

良かったこと・嬉しかったこと

アンバサダーになった

私は Auth0 という日本であまり知られてないニッチなサービスに関する本を書いたのですが、 Auth0の中の人の目にとまり、本家公認のアンバサダーということで活動できることになりました。 あまりの変化で目が回っていますが、めっちゃうれしいですね。頑張ってやっていきます。

繋がりが増えた

技術書典の執筆活動中にお世話になった人がたくさんいて、 同じサークル出展者の人の間と繋がりが持てたので良かったです。 みんなで「書くぞ!」って言ってるのは励みになりました。 Twitterのフォロワーもめっちゃ増えたし。

経験値が増えた

自分の中の知識を体系立ててまとめて発信できる力が養われたと思います。 あと本を書いて売るということハードルが下がりました。 DTPの知識一切なかった半年前比べたら大きな進捗です。

今後

技術書典5に当選できるか分かりませんが、既にネタを数個考えています。

BOOTH

遠方の方で技術書典に行けないから是非電子書籍で売って欲しいとの声がありました。 さっそくBOOTHにて販売をしてますので、どうぞお買い求め下さい。

booth.pm

最後に言いたいこと

本当に自分の本出して大丈夫なんだろうか?という不安で書いていましたが、 結城氏のTwitterでの発言にだいぶ元気付けられました。

携帯の電波が来てなくたって技術書典で自分の本が出せる世の中です。みんなも怖がらずどしどし書くのだ。

技術書典4のフロントエンド関連の本

宣伝も兼ねてまとめてみました。

フロントエンド本は入り口右側の「お」「か」のエリアに集まっているようです。

f:id:corocn:20180407204022p:plain

私自身は、お-06 ころころぶっくす で「Auth0でつくる認証付きSPA」という本を頒布します。近隣の皆様よろしくお願いいたします。

f:id:corocn:20180407202910p:plain:w200

どんな本が頒布される予定なの?

頒布内容が不明なサークルは載せませんでした。 本のタイトルが不明なサークルは、カッコ付きにしています。 一番気になってるのはpotato4dさんのNUXT TECH BOOKです。

お02 IE11以上対応できもちよく書くCSS 吉川雅彦

お03 (hyperappとウェブフォントの本らしい) 犬テトラ+

お06 Auth0でつくる! 認証付SPA ころころぶっくす

か17 jQueryであと10年戦うための本 カウプラン機関極東支部

か18 形態素解析器kuromoji.jsで遊ぶ、他JS本が何点か るてんのお部屋

か19 テストで作ろう初めてのAzureアプリ(JSでTDDする本らしい) Fluorite

か20 (現代WEBフロントエンドデザインパターン愛宕文庫

か21 わかる仮想dom ukyoweb

か22 Libraries of React 底なし沼の魔女

か23 現場で使えるVue.js tips集 ねこの手@福岡

か24 (Nuxt.jsでWebアプリ) 楽描帳

か25 VuetifyでもっとわかるVue(仮) ぴよ10

か26 (フロントエンドの環境構築) Monochrome

か27 NUXT TECH BOOK 帝都研究所

か30 CSS Stylus あいさつチンパン!

抜けあったらすいません

技術書典4で「Auth0でつくる認証付きSPA」本を頒布します

こんにちは、@corocn です。

技術書典4の公式でもサークルチェックができるようになったので、改めて告知いたします。

弊サークル「ころころぶっくす」は "Auth0"でつくる認証付きSPA本を頒布します。 techbookfest.org

場所は お06です。入口入ってすぐ右側の壁。Wantedly執筆部さんの隣です。

f:id:corocn:20180401230910p:plain

これは何の本ですか?

  • Auth0っていう認証サービスを使って
  • SPAにログインフォームを組み込んで
  • Googleアカウントでログインして
  • 発行されたトークンでセキュアなAPIサーバーにアクセスする

までを実装してみる本です。 フロントからサーバーサイドまで触るのでちょっと大変かもしれませんが、 とても簡単に組み込めることを体験してください。

Auth0って?

クラウド認証プラットフォームです。

Single Sign On & Token Based Authentication - Auth0

面倒な認証やユーザーを管理してくれます。 OpenID Connectに対応し、JSON Web Token(JWT)を用いた認証の仕組みを提供してくれます。

フロントエンドは何で書くの?

SPA、フロントエンドのアーキテクチャの1つですね。 今回はSPAの作り方を解説する本ではないので、 そのへんをすっ飛ばすためにNuxt.jsを使います。

Nuxt.js - ユニバーサル Vue.js アプリケーション

めっちゃ便利なんでオススメ。 Auth0本だ!と言いながら、Nuxt.jsの良さも伝えたかったよくばりおじさんです。

他サークルでもNuxt本が出てるはずなので要チェック。私も買いに行く。

バックエンドは何で書くの?

サーバーレスが流行っている今日このごろですが、 本書ではRuby on RailsAPIモードを使います。 認証と聞くとDeviseやSorceryを思い浮かべる方も多いと思いますが、今回は使いません。 KnockってGem使います。DBがシンプルになります。最高。

nsarno/knock: Seamless JWT authentication for Rails API

まとめ

ぜひブースに立ち寄ってください! 初参加でどれだけ刷ればいいかも分かってないので、 購入予定の方はサークルチェックして頂けると助かります!

技術書典4に向けて個人名刺兼ステッカーを作った

技術書典で個人名刺を用意しておきたくて作りました。

シールも作りたいなぁと思っていたよくばり者なので、シールベースで名刺サイズ(91x55)にしてみました。 Design&Adobeスキルゼロの私でもなんとか作れたので紹介。

きっかけ

f:id:corocn:20180325202719p:plain:w500

おすすめされたので!

印刷所

印刷所によってテンプレートが異なるので、先に印刷所を決めてます。 今回は教えてもらったアドプリントさんのマルチタイプシールを使ってます。

http://www.adprint.jp/Product/Intro/ss.aspx?Code=SS

コート 77kg ラミネート有(55 X 91mm) で注文しました。

切り抜き1箇所で100枚での注文で、3860円+送料500円 = 4360円です。 2箇所だと4300円+送料になりますね。 全印刷所比較してないんですけど、他のところはもっと高かったですね。

注文から到着までですが、1週間もかからず届きました。

使ったツール

Adobe Illustrator CC

印刷所のテンプレートはAI形式が多いんですよね。 技術書典の表紙作成とクソコラ作るためにフォトショを買ったんですが、 常用しないし、そこそこのお値段なので、1週間トライアルで全てすませちゃいました。

後述の理由により追加発注したんですが、トライアル期間で完結してます。なんかごめん。 次作成が必要なったら課金します。

Vectorizer

Online Image Vectorizer

普段使ってるアイコンがラスター画像しかなくて粗さが心配だったので、 上記ツールでラスター→ベクター変換しました。(よくよく考えたらイラレでできたのでは・・・?)

f:id:corocn:20180325203341p:plain

そこそこ綺麗になったから細かいことはいいや。

気をつけること

入稿前にチェックを読んでおくといいです。

スペルミス等もチェックしておきましょう。

http://www.adprint.jp/dataintro/basic.aspx

やっちまったこと

f:id:corocn:20180325203721p:plain

Engineerだったわ・・・。 醜態を晒す前に見つかってよかった(もう晒したけど)

これが理由で再入稿しました。 ついでに名前の部分も切り取れるようにした。

f:id:corocn:20180325222426p:plain:w200

こんな感じになっとります。

まとめ

普通の名刺より値段がはりますが、個別に作らなくていいのは楽でした。

f:id:corocn:20180325222128p:plain:w300

岐阜市近郊のうまい飯 (2018/03/23 更新)

食べたいもの別、再訪したいうまい飯情報(自分用メモ)です。 お高い店はピックアップしてませんし、車の移動が前提です。インスタ映えよりうまさ重視。

美味しいお店があったら、@corocn までこっそり教えてください。

麻婆豆腐

中華楼 - 岐阜市その他/中華料理 [食べログ]

  • マジ絶品。辛めなので注意。
  • そのへんの台湾料理やの麻婆豆腐とは違って本格的。
  • 担々麺も美味かった。

台湾まぜそば

台湾ラーメン大吉 - 西岐阜/ラーメン [食べログ]

  • 有名店。並ぶ。
  • 台湾ラーメンのほうが有名だけど、台湾まぜそばのほうが美味いと思う。
  • こちらも辛めなので注意。

味噌ラーメン

壱正 岐阜店 (イチマサ) - 岐阜/ラーメン [食べログ]

  • 普通のラーメン屋だけど、みその種類が選べて楽しい。
  • 味もいい。たまに無性に食いたくなる。
  • 店内で待てるし、スペース広くて良い。

もつ鍋

やっぱりラーメン黒野 - 名鉄岐阜/ラーメン [食べログ]

  • ラーメン屋みたいな名前だけど、もつ鍋が有名。
  • 安くて美味い。ドテ煮もおすすめ。
  • 夜しかやってない。

大衆中華

サンコック - 東大垣/中華料理 [食べログ]

  • ファミリー向け中華料理。安定している。
  • セットメニューの組み合わせが豊富。

カレー

カレーの文化屋食堂 - 名鉄岐阜/インドカレー [食べログ]

  • 日本風カレーともインドカレーとも言えない分類のカレー。
  • ガラムガラムガラム(キーマ風)が美味い。ファイナルカレーに近い。
  • 覚醒カシミールは人を選びそう。

ちゃんぽん

大光楼 墨俣店 - 東大垣/ちゃんぽん [食べログ]

  • にんにくたっぷりのベストちゃんぽん(旧:ベトコンちゃんぽん)がオススメ。
  • うまい。量も多い。

カジュアルフレンチ

Restaurant Venus & Mars (レストラン ビーナス&マーズ) - 西岐阜/フレンチ [食べログ]

  • 昼にランチで行くのがオススメ。かしこまらなくていいから楽。
  • キッシュがめちゃめちゃ美味い。追加で課金しても食べるべき。持ち帰りもできる。
  • シェフのおっちゃんが楽しい。

回転寿司

あみもとの里 かがしま - 西岐阜/回転寿司 [食べログ]

  • 穴子が絶品。ネタがでかく、450円で2本ついてくる。神か。
  • 下手に100円寿司いくならこっちのほうが良い。
  • コスパ最強。

とんかつ、味噌カツ

嬉しや - 西岐阜/とんかつ [食べログ]

  • 肉厚のみそかつが美味かった。
  • 豚の角煮もGOOD

洋食全般

キッチン 光陽亭 (KITCHEN Kouyoutei) - 岐阜市その他/洋食 [食べログ]

  • カジュアルイタリアン
  • ハンバーグドリアが美味かった

創作居酒屋

ビストロマルコ - 田神/居酒屋 [食べログ]

  • こじんまりとしたおしゃれな居酒屋。
  • こだわりの日本酒が置いてある。
  • 2人?でやってるので、最初にすべての料理から注文を組み立てなきゃいけないのが難しい。
  • しかしうまい。

ピザ

ダ ジェンナーロ (DA GENNARO) - 田神/ピザ [食べログ]

  • ピザ専門店だけあってピザは激ウマ。
  • オシャレな店なので気軽に行けない。入り口がどこか分からなくて毎回戸惑う。

パスタ

教えて!

そば

更科が有名だけど、そうじゃない、そうじゃないんだ。という気持ち。 美味いんだけどね。

教えて!

焼肉

美味いところはあるけどお高いし、 車走らせて養老まで行ったほうが楽しい。

教えて!

餃子

教えて!

ステーキ

今度21号沿いにいきなりステーキができる。

教えて!

Webpack 4.0.0 の Zero Configuration を試す

Webpack4.0.0が出てました。

github.com

さっそくZero Configurationを試してみます。 ウェブパック詳しくないマンなので、これでいいのか良く分からんですが・・・。

install

webpackとwebpack-cliを入れる

yarn add webpack webpack-cli

mode

modeオプションでdevelopmentとproductionを切り替えることができる

それぞれいい感じに設定してくれるみたい

package.jsonにscriptsを足す

  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

srcとdist

デフォルトでは src/index.js に置くと、dist/main.jsに吐き出されるようになってる

src/index.jsに以下のように書いて

const test = () => console.log("Hello");
test();

ビルドする

yarn dev

dist/main.js見るとアローがそのまんまだった。 この時点ではbabel-loaderは適用されていないらしい。

バベる

.babelrc が 必要らしい

babelを入れる

yarn add babel-core babel-loader babel-preset-env

.babelrcを作る

{
    "presets": ["env"]
}

--module-bindオプションによって、*.jsはbabel-loaderを使用するよう指定できる

  "scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  },

もっかいビルドする

yarn dev

無事バベれたことを確認。

感想

  • デフォルトでバベって欲しい!
  • 速さは良く分からない!

参考

https://www.valentinog.com/blog/webpack-4-tutorial/