ミニマムなwebpack loader
webpack loaderを自作したいと思っていろいろ試してみた。以下では、ミニマムにwebpack loaderを自作する手順をまとめてみた。 1. webpackのセットアップ webpackとCLIをインストールする。 $ npm install -D webpack webpack-cli エントリーポイントと依存するアセットをdist/bundle.jsにまとめるように設定する。 // webpack.config.js module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" }, mode: "development" }; 適当なエントリーポイントを用意する。あとでここからMarkdownをimport
TypeScript のルックアップ型と keyof キーワード - 30歳からのプログラミング
TypeScript のルックアップ型を使うと、定義済みの型の一部分を取り出すことができる。 keyofキーワードと組み合わせることで、オブジェクトの各キーの型を取り出すこともできる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 ルックアップ型の使い方 定義済みの型["キー"]と書くことで、指定したキーに対応する型を取り出すことができる。 これをルックアップ型という。 type Foo = { a: number; b: string; c?: boolean; }; type X = Foo["a"]; // type X = number type Y = Foo["b"]; // type Y = string type Z = Foo["c"]; // type Z = boolean | undefined 存在しないキーにアクセスしようとすると、
エッセンシャル モブプログラミング 〜実践者が考えるモブの価値,原則,プラクティス〜 / Essential Mob Programming
ScrumFestOsaka 2020 発表資料です。
省ビルドサイズ要求環境でモダンフロントエンドをやる (主に preact の話)
モダンフロントエンド = 宣言的 UI = 仮想 DOM ターゲット npm ツールチェインが使えない環境で、パフォーマンスを悪化させずにモダンフロントエンドをやりたい人 サードパーティスクリプトを提供する人 方向性 省ビルドサイズを目指す とくに外部から読み込まれる 3rd party script は、サイズ要求が厳しい lighthouse で 100 点の環境の点数を落とさないためには、おそらく 3rd は 20~30kb 未満を目指す必要がある 今後パフォーマンスが SEO に関わってくるので、このへんは重要 Google、ウェブサイトの UX 健全性を示す Web Vitals を導入。3 つの重要指標は LCP/FID/CLS | 海外 SEO 情報ブログ 実行時パフォーマンス要求 よほど複雑なアルゴリズムを実行するので無い限り、省ビルドサイズ制限を満たせば十分 モバイルで重
css-loader と style-loaderを間違えない ~css-loaderを使わずにcssを使ってみる~
css-loader と style-loaderを間違えない ~css-loaderを使わずにcssを使ってみる~2020-06-26 css-loader と style-loader どっちがどっちかってたまになるので、そうならないための備忘です。 これらは webpack の loader であり、JS で構築されるアプリケーション内で CSS を扱うために利用されます。 最近は CSS in JS の利用も増え、CSS ファイルを読み込む機会は減ってはきているものの、reset.css を読み込んだり、UI ライブラリが提供するグローバルな CSS を読み込んだりと CSS を直接 JS に import する機会はまだまだ多いと思います。 そして 1 ファイルでも CSS を読み込むなら loader にその設定が必要となるので、まだまだお世話になり続けるでしょう。 そんな利用
Announcing TypeScript 4.0 Beta - TypeScript
Today we’re excited to release the beta of the next major milestone in the TypeScript programming language: TypeScript 4.0. This beta takes us on our first step into TypeScript 4.0, and while it brings a new major version, don’t fret – there are no substantially larger breaking changes than usual. Our philosophy in evolving TypeScript has always been to provide an upgrade path that minimizes disru
styled-componentsへの最近の感想 - saneyuki_s log
今の職場で既に組まれたシステムが既にstyled-componentsにべったり依存していて、別に積極的に入れ替える理由もないので普通に使っているけれども、やっぱりこれ微妙だなと思った話。 そもそもとして、ビルドシステムへの介入が多くて不必要にロックインになったり、提示されてる手法がだいたいイマイチで普通にCSSとかSCSSを書く以上の意義が見出せないので、僕は基本的に「JS中にCSSを書いたり、ES Moduleのimportを使ってCSSを読み込むタイプのアプローチ（以下CSS-in-JS）」がそんなに好きではない・大人しくCSS書く方が好きではあるんだけど。色々あった理由はこちら: https://saneyukis.hatenablog.com/entry/2019/02/28/022750 https://saneyukis.hatenablog.com/entry/2019/0
【連載】世界一わかりみが深いコンテナ & Docker入門 〜 その1:コンテナってなに？ 〜 | SIOS Tech. Lab
こんにちは、サイオステクノロジー技術部 武井(Twitter:@noriyukitakei)です。タイトルが少々長いのですが、今回はこれからコンテナ、Docker、Kubernetesを始める人のための、入り口的なブログを書こうと思っております。 本記事の対象としては、コンテナとかDockerとかKubernetesって言葉は聞いたあるけど、なんとなくぼんやりとしたイメージを持っている人を想定しております。このブログを読んで頂くことで、少しでもそのイメージがクリアになればいいなと思っております。ちなみに、本ブログではコンテナ、Dockerの細かいオペレーションには触れません。 7回シリーズでお届けする予定で、今回は第1回目となります。 今回はこちら → その1：コンテナってなに？ その2：Dockerってなに？ その3：Dockerfileってなに？ その4：docker-composeっ
Reduxを用いる時にオススメしたい3つのTips - aptpod Tech Blog
はじめまして！WEBチームの黒川と申します！昨年7月にaptpodに入りましてもうすぐaptpod歴1年になります！ aptpodでは主にフロントエンドエンジニアとしてReact/TypeScriptを用いて、お客様向けアプリケーションのUI部分を実装しております。 ご存じの方も多いように、Reactの状態管理にはいくつか方法があり、何を用いるべきかなどでしばしば議論が起こりがちです。代表的なものだけでも、標準APIを用いるuseStateとContextやデファクトスタンダードとなってきているRedux、そして新興のRecoilがあります。 弊社のWEBチームではReduxを採用するケースが多いです。私もReduxについては一通りの知識と経験は持っていたつもりだったのですが、先日担当させていただいたプロジェクトで初めてReduxの設計に取り組んだところ、自分がReduxの思想や勘所につい
よく聴いてるポッドキャスト
はじめに 自分が fukabori.fm を配信しているのもあるけど、インプットソースとしてポッドキャストをよく聴いている。この記事では、聴いてるポッドキャストをサクサク紹介していきたいと思う。 基本はTech系ポッドキャスト。たまに、違ったのをちょいちょいぐらい。 実際に以下で書いてないポッドキャストもあるけど、少なくとも5エピソードは聴いたかな、ってものを紹介していく。 ポッドキャスト列挙、コメントつけて 以降は A-Z 順で、自分のPodcastクライアント(Podcast Addict)でSubscribeしているものを順番に。 ajito.fm suzukenさんが主宰しているポッドキャスト。VOYAGE CTOの makoga さんがよく登場する。技術的に濃いネタから、組織的なネタまで幅広い。 すごく印象に残っているepは ajitofm 29: Chiki Chiki Mon
Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note
Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） Svelteは何が良いのか？ Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。 そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所（実際のDOMと仮想DOMの差分）もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。 Svelteの公式ブログ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apple、ChromeやFirefoxなどの機能拡張をSafari機能拡張へ変換できるコマンドラインツール「Web Extension Converter」を提供。