webpack

モジュールバンドラーはなぜモダンなフロントエンドの開発に必要なのか?

本格的にフロントエンドの開発をしていくにあたりモジュールバンドラーの役割を理解しておくことは非常に重要です。
近年どんどん複雑になっていくフロントエンドの開発フローにおいて「コードを書く」というのと同じくらい「開発環境の設定をする」ということが重要だからです。
そこでこのノートではモジュールバンドラーがなぜ必要なのかという観点から解説していきたいと思います。
基本的には私が普段使用しているWebp

もっとみる

Angularでバンドルサイズを80%削減するのにやったことまとめ

結論

webpack-bundle-analyzer使おう

変更前の状態

Angular7(Renderer2)

$ npm run ng -- build --prodDate: 2019-10-03T05:28:34.446ZHash: 0b42e7afd2f0a984f511Time: 98170mschunk {0} runtime.26209474bfa8dc87a77c.js

もっとみる

webpackでCSS/Sass/img画像をコンパイルする方法

こんにちは。

りゅーそうです。

最近、1からHTML/CSSを用いてサイト模写や書籍などで静的なWebサイトを書いたりしております。

基本はやっぱり大事ですよね。いざ書いて見ると自分のCSSの書けなさにうんざりします。

今回は「HTML/CSSをもっと効率よくしっかりとした設計でかけるようになろう!」という記事です。

自分なりにWeb業界で求められている技術を調べていってまとめました。サ

もっとみる
ありがとうございます!また読んでください^_^
3

Introduction to React.js Part.5 (fixed)

こんにちは、ワタナベ(wtnb_dev)です。

前回の記事の続きです。今回で最終話になります。

Introduction to React.js Part.4

前回までで、画面を構成する各コンポーネントの土台ができましたので、今回は中身を実装していきます。

画面構成はこんな感じです。

中身を実装していく前に、React.jsの重要な機能である、ステートとpropsについて見ていきます。

もっとみる
ありがとうございます!!
1

Introduction to React.js Part.4

こんにちは、ワタナベ(wtnb_dev)です。

前回の記事の続きです。

Introduction to React.js Part.3

前回まででReact.jsの開発環境ができましたので、今回は実際にReact.jsによるヌメロンを実装していきます。

ヌメロンのルールが分からない方は、事前に、前回の記事を参照願います。

前回までのReact

まずは前回までに作ったHello Worl

もっとみる
ありがとうございます!!
1

Introduction to React.js Part.3

こんにちは、ワタナベ(wtnb_dev)です。

前回の記事の続きです。

Introduction to React.js Part.2

今回は、前回の最後でお話しした、トランスパイラについて見ていきます。また、併せてwebpackについても見ていこうと思います。

トランスパイラの使い方

トランスパイラの説明については、前回の記事を参照願います。

ここでは、実際の使い方について見ていきま

もっとみる
ありがとうございます!!
1

Introduction to React.js Part.2

こんにちは、ワタナベ(wtnb_dev)です。

前回の記事の続きです。

Introduction to React.js Part.1

前回は環境構築の一部をやりましたので、今回は実際にReact.jsを使ったコーディングをやっていきます。

初めてのReact.js

まずは定番のHello Worldを、React.jsで実装していきましょう。

Step.1 React.jsのコアパッ

もっとみる
ありがとうございます!!
3

Introduction to React.js Part.1

こんにちは、ワタナベ(wtnb_dev)です。

先日以下のnoteを書きました。

ヌメロンで学ぶJavaScriptの基本文法

JavaScriptを使って、ヌメロンと呼ばれるゲームの実装方法を解説しています。

本記事では、JavaScriptのフレームワークである「React.js」の基本的な使い方について解説していきます。

ただ基本文法をやっても面白くないので、題材として、ヌメロンを

もっとみる
ありがとうございます!!
1

Parcelからwebpackに乗り換えた話

こんにちは、ころちゃんです。最近焼き茄子のカレーを作ったんですがめっちゃ美味かったのでオススメです。ベイガンバルタというそうです。

直近はキャスターの社内ツールの改修を手伝っておりました。この社内ツールですが Rails + Vue + Parcel で動いてます。Parcelはzero configurationを謳ったフロントエンド向けのモジュールバンドラですね。今日はその話です。

昨今、

もっとみる
ありがとう〜〜〜!!!!
4

Rails に Webpack と Vue を導入しました!

こんにちは!最近は週3ペースでリモートワークをしつつ、業後に TypeScript の勉強をしている はっさん です。

さて、今回は Rails に Webpack と Vue を導入した記事です!

背景

CAMPFIRE ではユーザーのアクションに対して HTML を変更したい際は jQuery を用いていました。これまでは jQuery で十分でしたが「インタラクティブな機能を作成するぞ

もっとみる