今あえてTypeScriptのビルド＆バンドルツールを探してみる | フューチャー技術ブログ
ちょっとしたフロントエンドの開発で、TypeScriptに最初から対応していて、簡単に使えるものは何かないかな、と調べてみたメモです。React/Vue/Angularの場合はそれぞれの初期化コマンドで何から何まで用意してくれます。Next.js、Nuxt.js、Gatsbyなども、これらのビルドのステップを簡略化するコマンドを提供しています。基本的にこれらのウェブフロントエンドを開発するときには、小規模・中規模ぐらいならあんまり気にしなくておまかせでもいいと思います。 今回は、それらのフレームワーク固有のビルドツールとは別に環境を作りたい人で、TypeScriptの環境が欲しい、ウェブの開発がしたい、という前提でいろいろ探してみました。 今回試してみたのは次の4つです。 Parcel Fusebox ncc Rome.js JavaScriptのビルドツールとはJavaScriptでビル
Node.js にプロセスレベルの Permission が入りそうな話 - from scratch
この記事は LAPRAS アウトプットリレー の3/25の記事です！ こんにちは！LAPRAS エンジニアの @rockymanobi です！ 最近Node.jsでCLIを作る機会があり、その時に触ったEnquirerというライブラリが便利だったので、軽く紹介してみようというものです。ツールそのものについて軽くふれつつ、制作過程で出てきた「こんなことしたいけど、どう実現すれば良いんだろう」と試行錯誤して分かった使い方などを共有できればなと思います。 Enquirerとは Enquirerは CLIアプリケーションにおける対話的インターフェイスの実装を楽にしてくれるライブラリです。単純なテキスト入力の受付はもちろん、リストからの選択、チェックボックス、パスワード、入力補完、など、様々な入力方式を手軽に組み込むことができます。Node.js製です。JavaScript(TypeScript)万
Fast and type-safe full stack framework, for TypeScript | frourio
From installation to deployment in one command All you need is TypeScript
Node.jsアプリケーションのDockerイメージのサイズを削減する方法について調べた - The Third Law
Next.jsアプリケーションのDockerイメージのサイズが大きくて困っていたので調べていたところ、Next.jsの公式ドキュメントにDocker Imageというセクションがあり、おすすめ設定が記載されているのを見つけました。以前はここまで詳細な記述はなかったのですが、つい10日ほど前に追加されたようです。 ドキュメントには一番おすすめの方法だけ書かれているのですが、もともと「What is the best way to use NextJS with docker? · Discussion #16995 · vercel/next.js · GitHub」というdiscussionがあり、ドキュメントの記述はここでの議論が元になっているようです。Discussionではいくつか例が示されているのですが、それぞれさまざまな最適化テクニックが利用されており、どれくらいの容量になるか気
treeshake, DCE, terser mangling
Goyaという形態素解析器を Rust で作りました。本記事は利用者目線で Goya の紹介をします。技術的な詳細については別途記事を書きます。 形態素解析とは？ （このセクションは形態素解析の基礎の話なので知ってる方は読み飛ばしてください） 形態素解析（けいたいそかいせき、Morphological Analysis）とは、文法的な情報の注記の無い自然言語のテキストデータ（文）から、対象言語の文法や、辞書と呼ばれる単語の品詞等の情報にもとづき、形態素（Morpheme, おおまかにいえば、言語で意味を持つ最小単位）の列に分割し、それぞれの形態素の品詞等を判別する作業である。 — 形態素解析 - Wikipedia 例えば早口言葉の”すもももももももものうち”（スモモも桃も桃のうち）という言葉を形態素解析すると以下のような結果が得られます。スモモや桃が名詞、間にある”も・の”は助詞と解析さ
Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。 この記事では Fresh を使用して記事投稿サービスのチュートリアルを紹介します。 完成したサイトは以下のようになります。 ソースコードは以下のレポジトリから確認できます。 インストール Fresh を始めるには Deno の v1.22.3 バージョン以降が必要です。Deno をまだインストールしたことがないのならば、installation を参考に Deno をインストールしましょう。 # Shell (Mac, Linux) $ curl -fsSL https://deno.land/install.
Node.jsのNative ESM対応は夢の機能ですが、夢を詰め込みすぎたせいかCJSからの移行を難しくしているポイントが依然として存在します。そのひとつが拡張子問題で、Node.jsのNative ESMではモジュールの拡張子を明示しなければいけなくなりました。 (これはWebブラウザの挙動に近づけるための判断だと考えられます。) 特にTypeScriptと他のツール (JestやWebpack) と組み合わせて利用している状態でのNative ESM化は実質的に未解決の状態だと言えます。本稿ではこの現状についてできる範囲で状況説明を試みます。 Node.jsの拡張子の扱い Node.jsはCJSとESMの2つのモジュールフォーマットをサポートしていますが、これらは単にパーサーが異なるだけではなく、実質的には「2種類の異なるモジュールシステムがFFIで繋がっている」程度には隔たりがあり
WebContainer API Docs
Dev environments. In your web app.From interactive tutorials to full-blown IDEs, build instant, interactive coding experiences backed by WebContainers: the trusted, browser-based runtime from StackBlitz.
複数のモジュール形式(CommonJS, ES Modules, UMD)をサポートしたnpmパッケージの作り方 in TypeScript - dackdive's blog
Auth0をシングルページアプリケーションに組み込む方法がより簡単になりました！ #Auth0JP | DevelopersIO
Auth0のシングルページアプリケーション組み込み用モジュール「auth0-spa-js」がリリースされました。非常に簡単にAuth0を組み込むことができるようになりました。 auth0-spa-js が正式リリース！ 認証基盤サービス（IDaaS）であるAuth0。最近は国内でもかなり認知度が上がってきたように思います。 Auth0をシングルページアプリケーションに組み込む方法は、今まで auth0.js を使う方法が一般的でしたが、つい先日シングルページアプリケーションでの利用に特化したモジュール auth0-spa-js が正式リリースされました。 auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE どこが簡単になったの？ Auth0のReactサンプルアプリケーシ
Prisma is a next-generation ORM for Node.js and TypeScript. After more than two years of development, we are excited to share that all Prisma tools are ready for production! Contents A new paradigm for object-relational mapping Ready for production in mission-critical apps Prisma fits any stack Open-source, and beyond How can we help? Get started with Prisma Come for the ORM, stay for the communit
TypeScript + Node.jsプロジェクトにESLint + Prettierを導入する手順2020 - Qiita
TL;DR 完成形のソースコードはこちら↑ この記事の趣旨 TypeScript + Node.js プロジェクトのはじめかた2020 で作成したTypeScript + Node.jsのプロジェクトに ESLint / Pretiter / husky & lint-staged を導入する手順を紹介します。 今回導入するツールとバージョンは以下になります。 項目 バージョン
LernaとYarn WorkspacesでMonorepo管理 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 本記事では、Lerna と Yarn Workspaces を使った Monorepo 管理について解説します。 Monorepoとは 本記事では、単一のリポジトリで複数のモジュールやパッケージ（今回の場合は npm パッケージ）を管理する手法を Monorepo と呼んでいます。 有名なところだと、Babel や Jest、Create React App などが後述する Lerna を使い複数パッケージを単一のリポジトリで管理しています。 他にも React も Lerna は使っていませんが単一リポジトリで複数パッケージを管理しています。 また、上記のようなライブラリ以外にも企業で利用している npm パッケージを Monorepo として管理している例もあります。下記は Shopify の例です。 pack
Playwright
Playwright enables reliable end-to-end testing for modern web apps. Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed. Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. Test Mobile Web. Native mobile emulation of Google C
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
数か月前、ゲームのコミュニティなどで人気のチャットアプリ「Discord」のデスクトップ用アプリケーションに任意のコードを実行可能な問題を発見し、Bug Bounty Programを通じて報告しました。発見したRCEは、複数のバグを組み合わせることによって達成される面白いものだったので、この記事では、その詳細を共有したいと思います。なお、現在脆弱性は修正されています。 調査のきっかけElectronアプリの脆弱性を探したい気分だったので、Electronアプリで報奨金が出るアプリを探していたところ、Discordが候補にあがりました。Discordは自分自身が利用者で、自分が使うアプリが安全かどうかをチェックしたいという思いもあったので、調査をすることにしました。 発見した脆弱性私は主に次の3つのバグを組み合わせることでRCEを達成しました。 contextIsolationオプションの
npm package を作る度にイチから開発環境の構築をしていて大変だったので、自分専用のテンプレートリポジトリを作りました *1。 github.com せっかくなので、テンプレートの特徴とか、どういうこと考えながら作ったとか紹介してみます。 はじめに: 基本的な技術スタック npm TypeScript Node.js Native ESM Prettier ESLint Vitest Renovate GitHub Actions vscode 向けの各種設定ファイル (extensions.json, launch.json, settings.json) GitHub の「テンプレートリポジトリ」機能を使う GitHub にそれっぽい機能があったので使ってみました。 docs.github.com 「Use this template」というボタンが出て便利です。 「Use t
サイボウズのフロントエンドエキスパートチームの紹介 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームです。 今回は私たちフロントエンドエキスパートチームの紹介をします。 フロントエンドエキスパートチームとは サイボウズの技術領域とフロントエンドエキスパートチームの立ち位置 まずサイボウズのWebフロントエンドについて触れておくと、以下の特徴を持っています。 プロダクトにとって、Webフロントエンドが非常に重要 B2Bのプロダクトを開発しているので、WebおよびPCでのユーザー利用率が高い JavaScriptで製品をカスタマイズするためのAPIやSDKを提供している 継続的な開発が必要で、Webフロントエンドの変化に追従していく必要がある 大規模なWebアプリケーションが多く、プロダクトライフサイクルが非常に長い プロダクトチームにWebフロントエンドがいるわけではない プロダクトチームのエンジニアがWebフロントエンドからバックエンドまで一貫
セキュリティ診断のハンズオンなどの目的で、敢えて脆弱性を残しているいわゆる”やられアプリ”。 元旦から何やってんだという感じはありますが、折角時間があるので兼ねてから攻略したかった OWASP Serverless Goat をやっつけていきます。 OWASP Serverless Goat とは OWASP Serverless Goat はイスラエルのセキュリティスタートアップ PureSec が作成した The Ten Most Critical Risks for Serverless Applications v1.0 に基づいた、サーバーレスアプリケーション固有の脆弱性をわざと埋め込んだ Web アプリケーションです。 以下の教育目的で作成されたものであり、それ以外の目的で利用することは望ましくありません。 開発者とセキュリティ担当者に一般的なサーバーレスアプリケーションレイヤ
Node.js with TypeScript
Node.js with TypeScriptTABLE OF CONTENTSWhat is TypeScriptExamplesMore about TypeScriptTypeScript in the Node.js world What is TypeScriptTypeScript is a very popular open-source language maintained and developed by Microsoft, it's loved and used by a lot of software developers around the world. Basically, it's a superset of JavaScript that adds new capabilities to the language. Most notable additi
サーバー不要＆外部とのデータのやりとり無しで画像から背景を削除できるオープンソースな軽量npmライブラリ「background-removal-js」を使ってみた
「background-removal-js」はブラウザ内だけで動作が完結する背景削除ライブラリです。サーバーとデータをやりとりしないため、サーバーコストが不要だったりデータが流出してしまう心配がなかったりと利点がたくさんありますが、実際のところ「ちゃんと切り抜いてくれるのか」が気になるところ。今回はデモを使ってさまざまな画像の背景を削除してみます。 imgly/background-removal-js https://github.com/imgly/background-removal-js background-removal-jsはパッケージマネージャーのnpm上で提供されており、簡単にウェブアプリに組み込めるようになっていますが、今回はすぐに利用できるデモ版を使ってみます。 デモ版の画面はこんな感じ。自分の画像をアップロードできるほか、手早く確認したい人のためにいくつかのサンプ
ハンズオンNode.js
Node.jsの入門書。対象読者は、フロントエンド開発の知識はあってもサーバサイド開発は知らないエンジニアや、他言語の経験はあってもNode.jsは触ったことがないプログラマー。本書ではターミナルのプロンプトにコマンドを入力してその反応を確認したり、簡単なスクリプトをNode.js環境で実行したりしながら、Node.jsプログラミングの基本からWebアプリケーションの開発、テスト、デプロイまでをハンズオン形式で学びます。また、コードの背景にある設計思想や、プログラムの挙動の仕組みについてもしっかり掘り下げます。本書のゴールは、読者がNode.jsの全体像を掴み、業務レベルでのアプリケーション開発に対応可能な知識を身につけることです。 関連ファイル GitHubリポジトリ 正誤表 ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、
ユーザー入力として受け取ったテンプレートをコンパイル テンプレートレベルがProgramming Language Templateは安全にコンパイルするのが難しい 高度なテンプレートはプログラミング言語そのもの コンパイル時に任意のコードが実行できてしまう => ⚠Danger Programming Language Templateをコンパイルする危険例: ローカル メールでマクロ付きのWordファイルを開いて、ローカルで任意のプログラムが実行されてしまうケース マクロはプログラムそのもの 偽装メールが再び拡散、不正マクロを仕込んだ添付ファイルでマルウエア感染：マクロウイルスの再来？ - ＠IT デフォルトではマクロは無効化されており、オプトインで有効化になっている Office ドキュメントのマクロを有効または無効にする - Office サポート Programming Lang
えっ？Browser内でNode.jsアプリが動く？？ WebContainerAPIをTypeScriptで動かしてみた
GitHub - kysely-org/kysely: A type-safe typescript SQL query builder
Kysely (pronounce “Key-Seh-Lee”) is a type-safe and autocompletion-friendly TypeScript SQL query builder. Inspired by Knex.js. Mainly developed for Node.js but also runs on all other JavaScript environments like Deno, Bun, Cloudflare Workers and web browsers. Kysely makes sure you only refer to tables and columns that are visible to the part of the query you're writing. The result type only has th
Node.js Docker baseイメージには alpine < distroless < ubuntu+slim 構成がよさそう
Node.js Docker baseイメージには alpine < distroless < ubuntu+slim 構成がよさそう はじめに この記事は、DockerCon 2022 で発表された Bret Fisher の "Node.js Rocks in Docker, DockerCon 2022 Edition" を参考にしています。 base イメージの選択肢に関する話は、動画の前半一部分だけですが、他にも Node.js で Dockerfile を書く時のベストプラクティスが数多くまとまっているので、是非チェックしてみてください。 node:alpine イメージを使わない base イメージサイズを小さく保ちたい、という点で気軽に利用される事が多い alpine イメージですが、Official の README には下記の記載があります。 This variant
You don't need Node.js
AWSがソフトウェアパッケージのリポジトリサービス「AWS CodeArtifact」正式リリース。npmやMavenなどのパッケージを共有可能
Amazon Web Services（AWS）は、ソフトウェアパッケージなどのリポジトリをマネージドサービスとして提供する「AWS CodeArtifact」の正式リリースを発表しました。 アーティファクト（Artifact）とはここ数年、ソフトウェアの分野でよく目にするようになった言葉の1つでしょう。一般的には「人工物」や「工芸品」という意味ですが、ソフトウェアの分野ではなんらかの生成物、例えばソースコードのコンパイルやビルドによって生成されたバイナリやパッケージなどのことを指して「アーティファクト」と呼びます。 そして、ソースコードがGitHubのようなソースコードリポジトリに格納されることで、バージョン管理や共有などが行われるように、さまざまなアーティファクトもリポジトリに格納されて管理共有されるようになってきています。 例えばJavaScriptのパッケージマネージャnpmに対応
JavaScriptランタイム「Bun v0.3.0」リリース。メモリ消費量が3分の1以下に、npmパッケージの自動インストールなど
JavaScriptランタイム「Bun v0.3.0」リリース。メモリ消費量が3分の1以下に、npmパッケージの自動インストールなど サーバサイドで実行可能なJavaScriptランタイム「Bun」の最新バージョン「Bun v0.3.0」がリリースされました。 BunはJavaScriptランタイムとバンドラ、トランスパイラ、タスクランナーなどの機能が最初から統合されているソフトウェアです。 JavaScriptエンジンにはSafariに搭載されているJavaScriptCoreを採用。Node.jsの主要なAPIやNode.jsのモジュール依存関係解決アルゴリズムも実装し、内蔵するnpmクライアントにより高速にnpmパッケージを読み込んで利用できるなど、Bun単体でさまざまな機能が統合され、便利に使えます。 さらにTypeScript/JSXトランスパイラによってTypeScriptファ
Cloudflare WorkersがNode.js API互換の提供を発表。Bun、Denoなどに続く対応により、Node.js APIはサーバサイドJavaScriptの事実上の標準になるか
Google App EngineでRubyのスタンダード環境でのサポート開始。負荷がないときはゼロインスタンスまで縮退可能
Google App EngineでRubyのスタンダード環境でのサポート開始。負荷がないときはゼロインスタンスまで縮退可能 Google App Engineは、JavaやPython、PHP、Node.js、Goなどさまざまなプログラミング言語の実行環境を提供する、いわゆるPaaS型クラウドサービスです。 利用者はこれらのプログラミング言語で記述されたコードをデプロイするだけで実行可能。負荷に合わせたプロセスの増減などスケーラブルな処理や、万が一プロセスが異常終了したときのフェイルオーバーの処理などもクラウド側で行ってくれるため、運用の手間がかからないなどのメリットがあります。 Google App Engineは2016年から、ユーザーがGoogle App Engineにプログラミング言語の実行環境を持ち込んで実行できる「フレキシブル環境」においてRubyをサポートしていました。
ぐるなびエンジニアの愛用IDE or テキストエディタを調べてみた - ぐるなびをちょっと良くするエンジニアブログ
APIs for Building Secure and Reliable Microservices Dapr provides integrated APIs for communication, state, and workflow. Dapr leverages industry best practices for security, resiliency, and observability, so you can focus on your code.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CLIツールを作るためにoclifを試してみたら簡単すぎて吃驚した | Trial and Spiral
JavaScriptでちょっと複雑なcliを作るのに便利なEnquirer - Qiita
バンドル最適化マニアクス at tfconf
WebAssemblyの形態素解析器GoyaをRustで作った
Deno の Web フレームワーク Fresh チュートリアル
Native ESM + TypeScript 拡張子問題: 歯にものが挟まったようなスッキリしない書き流し
Prisma – The Complete ORM for Node.js & TypeScript
2020年: PuppeteerとPlaywrightの激動の１年。 - Qiita
Project dead? · Issue #3930 · axios/axios
Masato Kinugawa Security Blog: DiscordデスクトップアプリのRCE
npm package を実装するための自分専用テンプレートリポジトリを作った - mizdra's blog
サーバーレスやられアプリを使った脆弱性診断ハンズオン - Qiita
Promise のキャンセルについて - Qiita
クライアントサイドからサーバサイドまで破壊するテンプレートエンジンを利用した攻撃と対策
Reactの人気を超えたASP.NET Coreとは？ - Qiita
大規模サービスのBFFサーバーをKubernetesに移行した記事で書いていないこと
Dapr - Distributed Application Runtime