taisablog

taisa's engineer blog

「 webpack 」 一覧

node-nightlyを使ってwebpackをデバッグする

webpackに限らずだけどnode-nightlyを使うと簡単にデバッグすることができる Debugging When contributing to the core repo, writing a loader/plugin, or even just working on complex project, debugging tools can be central to your workflow. Whether the problem is slow performance on a large project or an unhelpful traceback, the following utilities can make figuring it out less painful. node-nightlyをインストールする インストール後一度初期化を行う npm i -g node-nightly // 初期化 node-nightly webpackの実行環境をつくる デバッグする為にwebpackの実行環境をつくる npm initしてwebpackをディレクトリ配下にインストールする npm init npm i -D webpack //バージョンは4.12.1 npx webpack –version 4.12.1 webpack-cliをインストールする。ここではグローバルインストールとしている。 npm i -g webpack-cli //バージョンは3.0.8 webpack-cli –version 3.0.8 webpack.[prod].jsをコマンドラインから作成する webpack-cli init 以下のように聞かれるので好みの設定をする(今回はデフォルトを利用) ℹ INFO For more information and a detailed description of each question, have …

「はじめてのフロントエンド開発」という共著本を出版しました

『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 Amazonより 自分はこの中の第3章の環境構築を担当しています。お陰様で現在まで売れ行きは好調ですが、一方で誤植もいくつか見つかっていますので誤植情報についてもこの投稿でお知らせします。また、表紙をパッと見ただけでは分からない本書の内容についてや去年最新JavaScriptフロントエンドをキャッチアップした経緯などを書いていきます。 どんな本か 「どんな本か」については共著者である新井正貴の投稿にまとめられているので確認してみてください。 「はじめてのフロントエンド開発」という本を書きました – massa142’s blog 共著者として参加していた書籍『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に 技術評論社 さまより発売となりました。 React、Angular、Vue.js、React Nativeそれぞれが、同じサーバの APIを参照し、同様の機能を持ったアプリケーションとして作成します。 どんな本か こんな方におすすめ 書いたきっかけ パンダの由来 サポートリポジトリ 本書の内容について 書籍タイトルは『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』ですが、タイトルに出てくるワードの他にも『フロントエンドの最新動向』『環境構築』『ES2015』『TypeScript』『Firebase』についても書かれています。 表紙をパット見ただけでは内容が分からないところもあると思うので、本書がどのような内容かを簡単にまとめてみます。 アウトライン Part1:JavaScriptフロントエンドフレームワーク最新動向 第1章:JavaScriptフロントフレームワークの興隆 第2章:SPA、PWA – フロントエンド実装技術の最新トピック Part2:フロントエンドJavaScript開発のための基礎知識と環境構築 第3章:フロントエンドJavaScript開発のための環境構築 第4章:フロントエンドJavaScript開発のための基礎知識 第5章:フロントエンドJavaScript開発のためのサーバ構築 Part3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js 第6章:React入門 & 徹底活用 第7章:Angular入門 & 徹底活用 第8章:Vue.js入門 & 徹底活用 Part4:Slackライクなサンプルで学ぶ React Native 第9章:React Native 入門 & 徹底活用 大きな流れ まずPart1で「JavaScriptフロントエンドの最新動向」を解説し、Part2で「環境構築」「ES2015」「TypeScript」「FirebaseによるAPIサーバの構築」などフロントエンド開発の事前準備をします。 Part3、4では「React」「Angular」「Vue.js」「React Native」それぞれの章の最初の入門で基礎知識を解説した後、同一のAPIを利用しSlackライクなサンプルアプリを作ります。それぞれが同一APIを使って同じアプリケーションをつくることでそれぞれの特徴を掴めるような構成になっています。 各Partについて Part 1:JavaScriptフロントエンドフレームワーク最新動向 第1章では「React」「Angular」「Vue.js」「React Native」に関する解説や比較をしています。また本書で扱うフレームワーク/ライブラリ以外(Polymer、Ember.js、Riot.js、Vanilla.js、Native Script、Weex、A-Frame、React VR)についてもそれぞれジャンル分けしながら取り上げて解説しています。 第2章では「SPA」「PWA」に関連する技術的な内容(クライアントサイドルーティング、CSS in JS、コンポーネント指向、SSRとプリレンダリング、バーチャルDOM、MVCとMVPとMVVM、Flux、PWA、Electron など)を取り上げて解説しています。 Part1を読むことで最新のJavaScriptフレームワークの動向を掴みつつ、フロントエンドに関する技術的な面を把握することができると思います。 Part 2:フロントエンドJavaScript開発のための基礎知識と環境構築 第3章では「node.jsのインストール」から「npm」「package.json」「webpack」「IDE(VS Code)」まで、開発に必要な環境構築について取り上げて解説しています。既に環境がある人にとっては飛ばしても良い内容ですが、一方で環境構築周りで躓く人も一定数いると思うので、その場合はこの章を進めていけば開発環境を構築することができます。 第4章では「ES2015」「TypeScript」について解説しています。第5章では「Firebase」を使って以降の章で利用するAPIサーバの立ち上げについて解説しています。 Part 3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js、Part 4:Slackライクなサンプルで学ぶ React Native 第6、7、8、9章では、それぞれの章において各フレームワーク/ライブラリへの入門をした後サンプルアプリを作るという流れになります。 本書は(特にPart 3とPart 4)は、ただ読み進めるよりも実際にコードを書いて動かしてみてほしいというのが思いとしてあります。 中には「はじめての」というタイトルの割には敷居が高いと感じる人もいるかもしれませんが、とにかく書いて動かしてみて比較してみてほしいです。 誤植情報 誤植情報については以下のページにまとめていて、随時更新していますので何かあったらTweetしたりissuesにあげたりしてもらえると助かります。 okachijs/jsframeworkbook Contribute to jsframeworkbook development …