coffeescriptとwebpackと

フロントエンド開発の色模様

自己紹介

まろC

株式会社LIG

フロントエンドエンジニア

 

略歴

3年前バックエンドエンジニアとして

web業界に殴り込み、昨年9月から

LIGにフロントエンドエンジニアとして

ジョイン。

好きなAWSはS3

本日は、

フロントエンド開発で効率化を追い求めて色々やった結果、

coffeescriptと出会い、

webpackと出会ったお話

 

gulp等のタスクランナーを使用していて

もう一歩踏み込んだフロントエンド開発をしたい方へ

 

 

 

Text

coffeescript

記述量の少ないただひとつのaltjs

出会いその1

色々記述が省略できて楽できそう。

rubyっぽいぞ

・コンパイル

・デバッグ

・伝わらない

$ coffee [options] path/to/script.coffee

コンパイル後のjsの行数で言われても。。

レビュー提出時、coffeeとコンパイル後のjsを2画面に出すという最悪な状態

結果

webpack

node.js的に書いたりjsの依存関係を解決して一つにするツール

出会いその2

module.exportsして

全部一つにすれば

リクエスト数も減っていい感じになるぞ。

・日本語情報少ない

・目的にあってないんじゃないか

機能が多く、loaderもフルに使わないし。。

バックエンドならすんなり入れるrequire的考え方がなかなか伝わりづらい

ググっても基本的なことしか出てこない。

結果

・伝わらない

ちょっと、めんどくさいですね

使うのやめようかな。。

でももう少し見てみよう。いいところ見つけよう。

node.jsなら、coffeeそのまま動くやん

gulp-coffeeでタスク化できるやん

classな記述方法でprototype意識しなくていいやん

hubotもcoffeeやん

jsと比べた時の記述量めっちゃいいやん

jqueryやそのプラグインも全部ぶち込めるやん

bower使えばその辺もっと楽になるやん

htmlもcssも画像もreruireできるやん

requireするパスが開発とプロダクションで違っても解決してくれるやん

jqueryとかグローバルに出す設定しとけばrequireせんでいいやん

ヒアドキュメントみたいに書けるやん

複数のapp.js的なものもいけるやん

gulp-webpackでタスク化できるやん

pc/spディレクトリ分ける開発の場合、

共通なモジュールは一箇所管理でrequireいけるやん

さよなら閉じカッコ

さよならfunction

僕はこれからもお互いを理解して付き合って行きたいと思います。

いいところ

たくさんあるじゃない

ご静聴ありがとうございました。

deck

By Daiki Nakamura

deck

  • 367