Electron & React & Redux & TypeScript アプリ作成ワークショップ 5日目 - Qiita
1 日目 2 日目 3 日目 4 日目 5 日目（この記事） 6 日目 7 日目 8日目 9日目 前回は、TODO アプリの Store、Action、Reducer まで作成しました。 今回は、Component を作っていきますが、その前に styled-components の話をします。 styled-components 概要 今回は CSS を使って装飾をするのですが、CSS ファイルを作成するのではなく、SASS などの AltCSS を使うわけでもなく、CSS in JavaScript を使って見たいと思います。 従来の CSS や AltCSS を別ファイルとして管理する場合、定義したクラス名と JavaScript での実装と離れているので、下記のような問題があります。 どこで何が使われているのかわかりにくい。未使用のものの検出が困難。 スペルミスした場合に実行時にし
firebaseのRealtimeDatabaseをtypescriptでいじりたい（webpack + typescript + firebase_admin） - Qiita
firebaseのRealtimeDatabaseをtypescriptでいじりたい（webpack + typescript + firebase_admin）JavaScriptTypeScriptFirebasewebpack RealtimeDatabaseのデータをmigrationとかでいじりたいときあるっすよね。 想定してないデータができないようにルールを使うと思うんですが、 自分はtypescriptでルール通りに型をつくってデータを作成するようにすると安心できるので気に入ってます。 typescriptのコンパイルでwebpackを使ったんですが構成は下記みたいな感じ↓ https://github.com/chucker34/firebase_admin_pack ちょっと詰まったところはwebpack.config.jsのresolve.mainFieldsでmain
SPAからconsole.error() でBugsnagにエラー情報を送信する。 - Qiita
課題 目下、ReactによるSPA(Single Page Application)の開発に関わっており、その途上で以下の課題 console.error() にErrorオブジェクトを渡すことで、 Bugsnag にエラー情報が送られるようにしたい。 が発生したので取り急ぎ以下のように解決した。 解決策 console.error()の先頭パラメーターがErrorオブジェクトの場合、そのError情報がBugsnagに送信され、それ以外はデフォルトと同じ動作をするようにした。概略は以下。 import bugsnag from 'bugsnag-js'; const origConsoleError = console.error; console.error = (...args) => { if (args.length > 0 && /Error$/.test(args[0].co
Vue CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる - Qiita
この記事について ついに Vue CLI 3.0 がリリースされました Vue CLI 3.0 is here! – The Vue Point – Medium Vue CLI 3.0 で Vue.js in TypeScript なプロジェクトをさくっとつくってみたので、その記録です。 3.0 では、プロジェクト作成時に TypeScript を選べるようになっており、Vue.js in TypeScript での開発に必要な諸々をまるっと入れてくれるので、新規開発で TypeScript を導入するハードルがグッと下がってるんじゃないか、と期待が膨らみます。 概要 Vue CLI: 3.0.0 TypeScript: 3.0.0 webpack: 4.16.5 Vue CLI 3.0 でプロジェクト作成すると TypeScript と webpack は上記のバージョンがインストール
Webpack4 と Typescript で Vuejs の環境を作る - Qiita
vue-cli を利用して作った環境を webpack4 と Typescript で動くようにしてから Vue.js の勉強をしてみようと思い立ってから 2時間くらい Vue.js と関係ないとこで費やして疲れたメモです。 Versions webpack: 4.5.0 typescript: 2.8.1 vue-cli: 2.9.3 vue-cli を使って環境を構築する
ちゃんと理解するCode Splitting - Qiita
Code Splitting、サボってきたのですが、必要になりそうだったので真面目に調べてみました。 これからCode Splittingやりたい方の入口的な役割になれれば幸いです。 Code Splittingとはなにか Code Splittingはその名の通り「コードを分割すること」を指します。分割されたコードはユーザのアクションに応じて非同期に読み込まれます。 ちなみにWebpackでentry point分けることとかもCode Splittingと言えばそうなのですが、本記事では触れません。また、別にSPAでなくともCode Splittingはパフォーマンス向上に利用できますが、これ以降はSPAを前提に話します。 Code Splittingの目的 Code Splittingの目的は初期表示にかかる時間、及びユーザがインタラクションできるようになるまでの時間の削減です。 S
新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳）｜TechRacho by BPS株式会社
新しいRailsフロントエンド開発（1）Asset PipelineからWebpackへ（翻訳） 新しいRailsフロントエンド開発（2）コンポーネントベースでアプリを書く（翻訳） 新しいRailsフロントエンド開発（3）Webpackの詳細、ActionCableの実装とHerokuへのデプロイ（翻訳） 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Evil Front Part 1: Modern Front-end in Rails 原文公開日: 2017/12/05 著者: Andy Barnov、Alexey Plutalov サイト: Evil Martians 前書き 本記事は、フロントエンドのフレームワークに依存しないRailsプレゼンテーションロジックを現代的かつモジュール単位かつコンポーネントベースで扱う方法を独断に基いて解説するガイドです。3部構成のチュ
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
Command Line Interface | webpack
For proper usage and easier distribution of this configuration, webpack can be configured with webpack.config.js. Any parameters sent to the CLI will map to a corresponding parameter in the configuration file. Read the installation guide if you don't already have webpack and CLI installed. Commands webpack-cli offers a variety of commands to make working with webpack easier. By default webpack shi
RailsでLaravel Mix(webpack)を使って15分でES6を書きはじめる - Qiita
What・Why? Laravel Mixとは？ https://laravel-mix.com https://github.com/JeffreyWay/laravel-mix webpackのWrapper API LaravelのAssets Compileの機能 Node.js のライブラリ、PHPを必要としない RailsでもSinatraでもHanamiでもDjangoでもEchoでもWordpressでも、もちろんLaravelでも使える なぜ Laravel Mixなのか? RailsのSprockets、AssetsPipelineを使いたくない Too fu*kin' outdated CoffeeScript....? Turbolinksハマる webpacker使いたくない RubyのRuntimeで動いてるのがダサい 設定がなぞ ディレクトリがなぞ .js.e
SHOWROOMの新規開発にHyperappを採用した話 - SHOWROOM Tech Blog
こんにちわ、エンジニアのきむらです。現在は主にフロントエンドを担当しています。 今回は、SHOWROOMの新規機能開発にHyperappというJavaScriptフレームワークを採用したので、そのお話をします。 はじめに SHOWROOMは、ターゲットのプラットフォームをPC / iOS / Androidとしていますが、 iOS / Androidではアプリ内でWebViewコンポーネントを利用しWebページを表示している画面がまだ数多くあります。 既存のページは以下のJavaScriptフレームワーク / ライブラリを使用しています。 JQuery（https://jquery.com/） Underscore.js（https://underscorejs.org/） Backbone.js（http://backbonejs.org/） Marionette.js（https://
Reduce JavaScript payloads with tree shaking | Articles | web.dev
Reduce JavaScript payloads with tree shaking Stay organized with collections Save and categorize content based on your preferences. Today's web applications can get pretty big, especially the JavaScript part of them. As of mid-2018, HTTP Archive puts the median transfer size of JavaScript on mobile devices at approximately 350 KB. And this is just transfer size! JavaScript is often compressed when
Webpack2のTree Shakingを試す - Qiita
社内勉強用資料。 Tree Shakingとは？ ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
七転八起 - wordpress + vue.js + bootstrapでブログをSPA化しました。
得意：Laravel, vue.js, react, ReactNative。 趣味：音楽・ドラム・作曲・歴史。 本ブログをSPA化しました。 元々フロントエンドの開発や技術に興味があって、ブログのデザインもやってみたかったので、 勉強がてら作りました。 ブログはwordpressを使っており、 フロントエンドはvue.js, jquery, デザインやcssフレームワークはbootstrap, fontawesomeを使いました。 ブログに関する情報はwordpressのREST APIを使って、axiosで取得するようにしました。 javascriptは最近流行りのwebpackでコンパイルする形で作成してます。 昨日リリースすることができましたが、 ノウハウや悩んだことなどを書いていこうと思います。 どうやって勉強したか Vue.js 公式 まずは公式の「学ぶ」から、使い方を勉強して
TypeScript + TSLint + Prettier + Webpack環境を作成したときのメモ - Qiita
babelでいう.babelrcであるところのtsconfig.jsonで、コンパイルオプションを指定できます。 使っているTypeScriptのバージョンは2.8.3ですが、以下の記事がとても参考になりました。 tsconfig.json で指定できる全 compilerOptions をまとめた (TypeScript v2.5 版) 最終的に、tsconfig.jsonは以下のように設定しました。 { "compilerOptions": { "outDir": "./public/", "module": "commonjs", "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "allowUnreachableCode": false, "a
大規模Vue.jsアプリを開発するときのディレクトリ構成考えた - Qiita
vue-cliのwebpackテンプレートをベースにしてます。 https://github.com/vuejs-templates/webpack/tree/develop/template srcディレクトリ以下は構成をいじっていますが、ルートディレクトリは基本的に webpackテンプレートのままです。 Root:: ├─build ├─config ├─dist ├─static ├─test ├─src │ ├─assets │ ├─components │ │ ├─mixin │ │ ├─partial │ │ │ ├─modal │ │ │ └─plugin │ │ └─pages │ │ ├─member │ │ ├─register │ │ └─.....(etc) │ ├─lib │ │ ├─lang │ │ │ ├─en │ │ │ ├─ja │ │ │ ├─ch │
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue CLI 3 + DockerでHMRが動かない時の解決策 - Qiita
Plugins | webpack
webpack.config.js 最小設定 - Qiita
GitHub - microsoft/license-checker-webpack-plugin: Webpack plugin that verifies licenses of all external dependencies in a compilation, and outputs them to a file.
