webpack のコード分割の初歩 - 30歳からのプログラミング
JavaScript や TypeScript を使ってウェブアプリを提供する場合、開発時はimportやexportなどの ES Modules を使い、公開時はファイルをバンドルして公開することが多い。 以下の記事に書いたように、現在の主要なブラウザは ES Modules に対応してものの、バンドルせずに公開してしまうとパフォーマンスに悪影響を与える可能性がある。 numb86-tech.hatenablog.com ファイル数が増えれば増えるほど影響は深刻になるため、依存関係が深いライブラリを使っている場合などは、レイテンシが飛躍的に増加してしまう。 そのため、バンドルせずに公開するのは現実的ではない。 バンドルしてひとつのファイルにまとめてしまえば、JavaScript のダウンロードは一度で済む。 しかしそうすると今度は、バンドルファイルの肥大化という問題が発生する。 巨大なフ
2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試した
この記事は、Next.js Advent Calendar 2020 の6日目。 突然だが、2021年 は Fullstack Next.js 元年になる。 その理由として自分は以下のものがあると思っている。 ベストプラクティスとしての TypeScript のデファクト化 Next.js の Dynamic Routes による動的パス、 getStaticProps/getServerSideProps による使い勝手の向上 Vercel によるISRの発明 prisma の成熟 Vercel / Serverless / Cloudflare Workers / Cloudrun 等による Node.js サーバーの運用コスト減 参考: Frontend Study #1: 基調講演 - Frontend 領域を再定義する Blog - Next.js 9.3 | Next.js R
ブラウザとNode.jsで動く1kBのキーバリューストレージライブラリを書いた
azu/kvsというブラウザとNode.jsで動くファイルサイズが小さいキーバリューストレージを作りました。 モチベーション ファイルサイズが小さくIndexedDBを使っていて、Node.jsでも透過的に同じAPIで利用できるライブラリが必要となったため作りました。 textlint-editorというアプリを書いていて、キャッシュストレージとしてlocalstorage-ponyfillを使っていました。 しかし、localstorage-ponyfillはブラウザとNode.jsで透過的に動くストレージライブラリですが、LocalStorageベースとなっています。 textlint-editorでは、スクリプトをWeb Workerで動かすため同期的なAPIであるLocalStorageは利用できません。 そのため、IndexedDBベースでシンプルなキーバリューストレージを扱える
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け]TypeScriptFirebasecloudfunctionsFirestoreFirestore型付け係 8/18 更新 Custom Transformer を使用し、documentSchema<T>() の型引数 (T の部分) の AST 解析によって rules の文字列が自動生成できるようになったため、documentSchema() の引数が不要になりました スキーマレスな Firestore では、その気になれば一般ユーザーが予期しない構造のデータをセットできてしまうので、セキュリティルールで書き込み時のスキーマ検証を設定する必要があります。しかし、セキュリティルールはモデル定義に合わせて手動で書かなければならないのでミスが起きやすく、そのために
![[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/470856a8d7f01ac7fa91224f2b7499148075af95/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVFMlNUQlMjBGaXJlc3RvcmUlRTMlODIlOTIlRTUlOUUlOEIlRTUlQUUlODklRTUlODUlQTglRTMlODElQUIlRTMlODElOTklRTMlODIlOEIlRTMlODMlQTklRTMlODIlQTQlRTMlODMlOTYlRTMlODMlQTklRTMlODMlQUElMjBGaXJlc2NoZW1hJTIwJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJTlGJTIwJTVCcnVsZXMlRTglODclQUElRTUlOEIlOTUlRTclOTQlOUYlRTYlODglOTAlMkYlRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTglODclQUElRTUlOEIlOTUlRTUlOUUlOEIlRTQlQkIlOTglRTMlODElOTElNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTE2OWQxYjM5YTA1NDdlZDRmMDRlZjIwNjI5MDBhZDBl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YXJuYWltbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzhjNmUxNzhiZmViODQ2YTVlMzU0MzFhNTYzMTY0YjU%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3De1cd9f83ad2708613de33994c1d3bfc5)
仕事でPythonコンテナをデプロイする人向けのDockerfile (1): オールマイティ編 | フューチャー技術ブログ
BusterとかStretchという名前が見慣れない方もいるかもしれませんが、これはLinuxディストリビューションとしてシェアの大きなDebianのコードネームです。 Debianバージョンが少し古いStretchの方がちょびっとサイズが小さかったりはしますが、まあ実用的にはサポートが長い方がいいですよね。slimを使ってGCCとかのコンパイラを自前でダウンロードしている記事とかもたまに見かける気がしますが、マルチステージビルドであれば、そんなにケチケチしなくていいのと、パッケージダウンロードは逐次処理なので遅く、処理系が入ったイメージのダウンロードの方が高速です。並列で処理されるし、一度イメージをダウンロードしてしまえば、なんどもビルドして試すときに効率が良いです。また、多くのケースでネイティブのライブラリも最初から入っており、ビルドでトラブルに遭遇することはかなり減るでしょう。 Py
自粛で暇だから自宅でVJごっこしてみた - GMO Research & AI Tech Blog
こんにちは。 COVID-19（コロナ）禍の中、みなさん何事もなくおすごしでしょうか。 日本はじめ世界中のみなさんが平和に暮らせるよう祈っています。 とはいえ、自粛に疲れてきた方も多いと思うので、今日は自粛中でも家で遊べるプログミングの紹介をしたいと思います。 Processingというクリエイティブコーディング用のライブラリを使用して、自作のサウンドトラックを可視化してみます。 Processingはとてもシンプルで分かりやすく設計されているので、プログラミングに詳しくない人でもとっつきやすくておすすめです。 ダウンロードすると専用のエディタがあり、再生ボタンがついているので、コーディングして再生ボタンを押すとすぐに結果を確認できます。 言語もjava,javascript,pythonなどに対応しています。 自粛やリモートに少し飽きたり、疲れたりしてきた方も、Processingであら
TypeScript で複数のモジュールをまとめて export, import する
TypeScript を使って Node.js のアプリを開発していると、だんだんモジュールの数が増えていき、export, import 文が長くなったり冗長な感じになったりします。また、プロジェクト全体の共通機能をまとめてモジュール化する仕組みを考えたりと、モジュールの構成をどうするかについては常々悩ましいところがあります。 この記事では、モジュール構成のリファクタリングに使えるre-exportsとそれを import する方法について紹介します。元々は ES Modules の仕様なので、Interface など TypeScript の機能を除き JS でも同じく使える仕組みになります。 ※ただし、ES Modules の構文（JS）をそのまま Node.js 上で実行する場合は mjs 拡張子の使用・実験フラグ付きの起動が必要になり、詳細については割愛させていただきます。 ex
ライブラリ開発のための環境設定 — 仕事ですぐに使えるTypeScript ドキュメント
module.exports = { module: { rules: [ { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ } ] } }; なお、ライブラリの場合は特別な場合を除いてBabelもwebpackもいりません。CommonJS形式で出しておけば、Node.jsで実行するだけなら問題ありませんし、基本的にwebpackとかrollup.jsとかのバンドラーを使って1ファイルにまとめるのは、最終的なアプリケーション作成者の責務となります。特別な場合というのは、Babelプラグインで加工が必要なJSS in JSとかですが、ここでは一旦おいておきます。ただし、JSXはTypeScriptの処理系自身で処理できるので不要です。 TypeScriptユーザーがライブラリを使う場合、バンドルされていない場合は @
パッケージはBundleを配布しない · Webフロントエンド パフォーマンス改善ハンドブック
パッケージはBundleを配布しない ニコニコ生放送 PCのHTML5プレイヤーは、基本的にはTypeScriptで書かれていてビルドにはwebpack + tsloaderという構造になっています。 webpackでビルドされているのでWebpack Bundle Analyzerを使い、ビルドしたパッケージの依存をビジュアライズして調査しました。 Webpack Bundle Analyzer 実際の改善前のbundleしたファイル構造は次のような形でした。 @nicoliveから始まるものは社内のnpmレジストリに公開されている社内モジュールです。 この社内モジュールがlib/index.jsという大きな1つファイルしか持っていないことがわかります。 これは、各パッケージがbundle済みのファイルをlib/index.jsとして配布するようになっていたためです。また、そのbundl
オーディオファイルの扱いが簡単に！JavaScriptライブラリ「Howler.js」 | DevelopersIO
オーディオファイルの取り扱いを簡単にしてくれるJavaScriptライブラリ「Howler.js」を紹介します。 ウェブでオーディオファイルを扱うのは「正気の沙汰ではない（要出典）」と言われており、Web Audio APIやHTML5 Audio（HTMLMediaElement）を見ると、確かにそっ閉じしたくなる感じです。 そんなオーディオファイルの読み込みからブラウザごとの再生できるファイルの判定など、面倒な処理を任せてしまえるオーディオ関連のJavaScriptライブラリHowler.jsを紹介します。 公式サイト（サンプルあり）：howler.js - JavaScript audio library for the modern web リポジトリ：howler.js - GitHub 使い方 npmなら npm i howler -D CDNから読み込むなら <script
3Dアバターモデルを簡単にWebアプリケーション上で扱える 開発者向けライブラリ「pixiv three-vrm」をオープンソース化 ~3Dアバタープラットフォーム「VRoid Hub」で活用された技術を公開~ - ピクシブ株式会社
ピクシブ株式会社（本社：東京都渋谷区、代表取締役：國枝信吾、以下ピクシブ）は、3Dアバターモデルを用いたWebアプリケーションの開発をより簡単にするWeb開発者向けライブラリ「pixiv three-vrm」を、2019年9月12日（木）よりオープンソースとして公開します。 pixiv three-vrm: https://github.com/pixiv/three-vrm/ 「pixiv three-vrm」は、人型3Dアバターモデルのデータを扱うためのフォーマットである「VRM」を読み込み、Webブラウザに表示するためのライブラリです。 three-vrmが使用されている「VRoid Hub」(https://hub.vroid.com/) pixiv three-vrmは、3Dアバターモデルを扱うための専門的な技術知識を持たないWeb開発者が、VRMで記述されたモデルデータをより簡
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
今風の開発環境を整えるぞ！！github に CircleCI に Jira だ！？→それ VSTS でも出来るよ！ - かずきのBlog@hatena
タイトルのような組み合わせを構築して運用していい感じに回してる話しをよく聞きます。Jira のところが Redmine のケースや他のサービスを使ってるっていうパターンもありますね。Circle CI のところは自前 Jenkins とかみたいなケースもありますね！ 私は Jenkins は太古のバージョン（Hudson から名前が変わった直後くらい）と Redmine を一時期使ったことがあるくらいなので、これから書く、これらのツール類についてのことは正しいことを書いてない可能性が高いです。間違えてたらコメントなどで是非最近の〇〇はこういうところが凄くいい！！って教えてください。 とりあえず言いたいのは「それ Visual Studio Team Services(VSTS) でも出来るよ！？」ということです。 別に今時点で運用がうまく回ってるものを無理に VSTS にしてほしいわけでは
[JavaScript] ファイルのサイズを自動で取得して表示する | Blog | Development Reference
このエントリは ライブラリ へ移動しました。
PHPで画像のリサイズ等が簡単に行えるクラス:phpspot開発日誌
PHP Image Resizer Class : Milaju PHPで画像のリサイズ等が簡単に行えるクラスが公開されています。 こうしたライブラリは同様のものが存在するのですが、便利そうなので公開。 次のように実装時に分かりやすいコードでかつ簡単にリサイズが可能です。リサイズだけではなく、クオリティやmaxサイズといったオプション指定も出来るようになってます。 require_once('class.imgsizer.php'); $imgSizer = new imgSizer(); $imgSizer->type = "width"; $imgSizer->max = 100; $imgSizer->quality = 8; $imgSizer->square = true; $imgSizer->prefix = "sml_"; $imgSizer->folder = "_siz
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
普段使いから始めるNext.js
anoncom.net