Electron & React & Redux & TypeScript アプリ作成ワークショップ 4日目 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
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 での実装と離れているので、下記のような問題があります。 どこで何が使われているのかわかりにくい。未使用のものの検出が困難。 スペルミスした場合に実行時にし
ParcelでVueアプリケーションを作る環境 - Qiita
昨年12月に、この記事を見てWebpackからParcelに乗り換えることを決意、Vue派の私は、 「どうしてもParcelでVueを使いたい！」 しかし調べ始めてもネットには日本語どころか英語の知見もほとんど転がっていない状況。 (Reactは公式にもサンプルがあったはずですが) おそらくこの記事を読んでいるあなたも同じ悩みを抱えていることではないでしょうか。 Parcelとの出会いからかれこれ7ヶ月、試行錯誤の末たどり着いたビルド環境を貴重な(?)日本語の知見(?)として公開します。 テンプレ まずは手っ取り早く、私がいつも使うVue + Vuex + vue-routerをひとまとめにしたテンプレ環境と、サーバーも一気に開発したいんだ！！という方向けにサーバー付きテンプレを上げておきます。 サーバーフレームワークはKoaを使っています。 正直、私の好み全部載せ感否めませんが、参考にし
ParcelでPWA化する最速の方法 - Qiita
parcel-plugin-sw-precacheは、service-worker設定ファイルとHTMLからのリンクをいいカンジに生成してくれるプラグインです。 一応細かい設定もできますが、基本的にはこれを入れてParcelを動かすだけで大丈夫です。 parcel-plugin-sw-precache - npm 2. manifest.webmanifestの作成 GoogleによるManifest Documentでは、manifest.jsonというファイル名での記述を指定していますが、このファイル名ではParcelがファイル名を改変してしまい、上手く動作しません。 そこで、MDNが指定しているmanifest.webmanifestというファイル名で記述し、HTMLファイルから
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
ParcelのBuildでcssやjsのパスが思った通りじゃない時の対応 - Qiita
修正前 parcel build -d dist ./src/index.html 修正後 parcel build -d dist ./src/index.html --public-url ./ 以下でパスを指定するぽい --public-url ./ Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationWhat you can do with signing up
IE11でオブジェクトは 'from' プロパティまたはメソッドをサポートしていません。と言われたときは - Qiita
IE11でオブジェクトは 'from' プロパティまたはメソッドをサポートしていません。と言われたときはJavaScriptIE11babel
(Part 2. Config Webpack4) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnb - Qiita
(Part 2. Config Webpack4) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnbJavaScriptVue.jswebpackESLintbabel We will use three webpack configuration files. This way can make project maintenance easier and more flexible. webpack.common.js <-- Put the common settings. webpack.dev.js <-- Only put the develop period settings webpack.prod.js <-- Only Put th
ExtendScriptで書いたコードをビルドしたら日本語が文字化けした件 - Qiita
TL;DR extendscriptで書いたコードをparcelやwebpackでビルドしたら、alertの日本語が盛大に文字化けした。 ビルドツールを挟まなければ文字化けしなかった。 webpackのpluginでutf8-bomを付与したら文字化けしなくなった。 はじめに Adobe系ツール1を操作するスクリプト（ExtendScript）を書くなら、現代っ子らしく（？）やっぱり型定義は欲しい！ というわけで、TypeScriptでAdobe系ツールの開発をできるように環境を整えました。 せっかくなので、webpackじゃなくてparcelも使いました。 そうしたら、文字化けしました。 文字化けしましたが、その前段階までの環境構築で参考にしたのは以下の記事になります。 TypeScriptでAfterEffects等のAdobeアプリを操作したい - Qiita typescriptで
(Part 4. Config .eslintrc.json) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnb - Qiita
{ "root": true, "parserOptions": { "parser": "babel-eslint", "ecmaVersion": 2017 }, "env": { "browser": true, "node": true, "es6": true }, "extends": [ "airbnb-base", <-- We used airbnb coding style. "plugin:vue/essential" <-- This setting is for Vue2. ], "plugins": [ "vue" ], "settings": { "import/resolver": { "webpack": { "config": "webpack.common.js" <-- This let us can used "import foo from '@
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cloud9 で parcel serveされたコンテンツにアクセスする - Qiita
Vue CLI 3 + DockerでHMRが動かない時の解決策 - Qiita
babel-cliを使ってJavaScriptの練習環境を作る【コンパイル&実行の自動化】
You must pass the 'pipelineProposal' option to @babel/preset-stage-0 が出た時の対処法 - Qiita
JavaScript 勉強メモ - Qiita
Vue 2.5 + TypeScript 3.0 を Parcel でビルドする - Qiita
ES6 のシンタックスを含むコードをテストする - Qiita
Parcel ベースの極小 React 学習用プロジェクトを作った - Qiita
(Part 3. Config .babelrc) Startup JavaScript Project with Webpack4, Vue2, Vue-Router, Vuex, Axios, ESLint, Babel, AirBnb - Qiita
