webpack4系から5系にアップデートした際の対応事項とかメモ - Madogiwa Blog
個人で開発しているサービスでフロントエンドのbuildにwebpackを利用しているのですが、4系から5系にアップデートしたので、そのあたりで対応したことをメモしておきます📝 利用していたwebpackのビルド構成 webpackアップデート時の対応事項メモ modeを明示的に指定するようにした デフォルトでinstallされなくなったNode.js系のpolyfilをinstallした [hash]ではなく[contenthash]を利用するようにした その他の対応事項 webpack-assets-manifestのデフォルトのファイルパスが変わる おわりに 利用していたwebpackのビルド構成 基本的には以下のようなライブラリを利用したBabel + TypeScript + Vueで、 mini-css-extract-pluginでcssを別ファイルで生成するようにして、we
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
アメブロでReactやIsomorphic Web Applicationを採用した理由――その成果と構成技術
アメブロでReactやIsomorphic Web Applicationを採用した理由――その成果と構成技術：大規模ブログサイト表示速度改善 大解剖（1）（1/2 ページ） 2004年から続くブログサービス「アメブロ」が2016年9月にシステムをリニューアル。本連載では、そこで取り入れた主要な技術や、その効果を紹介していく。初回は、Isomorphic Web Applicationについて。 2004年から続くブログサービスである「アメブロ」は、2016年9月にシステムをリニューアルしました。本連載「大規模ブログサイト表示速度改善 大解剖」では、そこで取り入れた主要な技術や、その効果を紹介していきます。連載第1回では、Isomorphic Web Applicationについてお伝えします。 Amebaでは、これまでリッチなユーザー体験を実現するために、さまざまな取り組みをしてきました
アメブロ2016 ~ Isomorphic JavaScriptの詳しい話 | CyberAgent Developers Blog
問題点はIsomorphic実装難易度です。では、アメブロのIsomorphicの実装方法と実装する際にあった問題及びその解決策をお伝えします。 ちなみに、Michael Jackson氏はIsomorphic JavaScript ではなく、 Universal JavaScript と呼ぶべきだと主張しています。私たちはIsomorphic JavaScriptという名前で使うのに慣れたので、ここでは*Isomorphic JavaScriptと記述します。 AmebloのIsomorphic 技術選定 先に結論をあげます：React + Redux 技術選定の基準は下記となります。 安定さ。基本的にプロダクト環境で使える正式版があること。 アクティブな開発。 よいコミュニティ。技術の周りに大きいコミュニティが育っていること。 実績がある。 まずView層のライブラリの選定です。このプ
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
意外と知らない？ JavaScript トレンド 2015 - Gaiax Engineers' Blog
Gaiax Advent Calendar 2015 18日目担当の @hoto17296 です。 昨今の JavaScript は状況がめまぐるしく変化していて、それほど関心がない人にとっては追随するだけでも一苦労なのではないでしょうか。そこで今回は最近の JavaScript がわからない人向けに「昨今の JavaScript トレンド」について書きます。 トレンドっぽいキーワード一覧 ひとまずパっと思いつくキーワードを列挙してみます。 Node.js v4.2 "Argon" (LTS) npm v3 ES2015 / ES2016 Class Arrow Function let, const Promise Generator Async/Await co Observable 開発環境 Babel Gulp Browserify Webpack TypeScript アーキテク
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
2015年のWebクライアントサイドの温度感 - Tetsuharu OHZEKI - Medium
この3~4年間でJavaScriptとかWebクライアントサイドを取り巻く温度感も大きく変わった。これからはHTML5だぜイエーイと騒いでいたのも随分過去の話になったように思う。だけど、このあたりの温度感はそんなに掴みやすいものでは無い。別に放っておいてもいいんだけど、放っておくと10年20年経たないと誰も書かなんてのも割とよくある話。でも、そこまで待ちたくは無い。なにとなしに説明してみようと思う。 だいたい2011~13年ぐらいはHTML5がバブルっていた。今からすると「バブルだった」というのが一番説明しやすい。Node.jsあたりが世の中に認知を拡大していたのもこの時期だし、スマートフォンのシェアの伸びに合わせて、クロスプラットフォームで出せるWebにみんな夢を見ていた。MVCだの設計だの何だの言い出したのも、だいたいこのくらいの時期だし、Single Page Application
仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita
なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的はおおよそ果たされたと言ってもいいでしょう。ご協力ありがとうございました。 僕自身はKobito for Windows でReactを使ってみて、そのノウハウを公開したり、今年前半は色々とアウトプットをしていましたが、後半はSpecificなアプリケーションドメインを記述することが多くて、あまりアウトプットする内容がなくなってました。 取り敢えずは、新規のプロダクトなら採用してもよい、という雰囲
gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
モダンJavaScriptアプリケーション開発 in Salesforce - Qiita
はじめに HTML5でのアプリケーション開発は、エンタープライズ向けアプリケーションでも当たり前のようになってきました。これはSalesforceにおけるアプリケーション開発でも同じです。 Salesforceでのアプリケーション開発はVisualforce/Apexで行うというのが数年ほど続いてきたので、HTML5つまりJavaScriptを主体とするアプリケーション開発にはなれていないベンダーも多数あるかと思います。自分は創業当時からJavaScriptでのSPA(Single Page Application)をメインプロダクトに据えた会社を運営しており、Salesforceのパートナーとしても長いことやっていますので、このあたりのノウハウは比較的多い方です。そのためこのエントリはそれなりに説得力を持ってお届けできるとは思います。 真っ先に行うべきこと もしあなたがSalesforc
React.jsとserver-side rendering - Qiita
今回はReact.jsの大きな特徴の1つで、これが出来るから使うという人もいるserver-side renderingについて書きたいと思います。 server-side renderingとは文字どおりサーバーサイドでHTMLを生成してrendering出来るようにするものです。SinglePageApplicationのようなJavaScriptでDOMを組み立てるようなアプリケーションの場合、サーバーから返されるHTMLには空のdivだけがあってそこからJavaScriptを読み込んでtemplateを描画することになり、これには2点の問題点があります。 初期のロード時間 HTMLが返されてJavaScriptを評価してそこからtemplateの表示になるので、サーバーサイドからHTMLが返される場合と比べて当然時間が掛かります。なので別途ローディングを見せるなどの工夫が必要になり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpack 4.0リリースにより、シンプルな設定、WebAssemblyサポート、大幅なパフォーマンス向上を実現
TwitterによるReactベースのモバイルWebスタックはネイティブのパフォーマンスに匹敵する