2024/8/24 フロントエンドカンファレンス北海道2024
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules(以後ESMと表記)がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
皆さんnpmパッケージのバージョンを上げるときにハマって依存地獄から抜けられなかったことはありませんか? 私はあります。 複雑怪奇な依存関係を調べてみようとnode_modulesを覗いてみて、そのカオスっぷりに臭いものに蓋をしたことはありませんか? 私はあります。 そこでnode_modules以下について調べてみたのですが、node_modulesにどんな問題点があって、npmやyarn, pnpmは何を目指していたのか時系列順に紐解いた方がわかりやすいことに気づきました。 ここでは初期のnpmが抱えていた問題から今に至るまでを順を追って説明します。 するとnode_modulesの仕組みの他に、各パッケージマネージャの方針の違いが見えてくるはずです。 初期の頃のnpm (~2015年以前) この頃はシンプルで、依存関係はそのままnode_modulesのディレクトリ構造に反映されてい
はじめにlink 実践Node.js入門という本が技術評論社さまより発売されます。人生初の単著です。 発売日は2023/01/26です。 電子書籍版はKindleとGihyo Digital Publishingから購入できます。 Amazon 技術評論社様のほうではPDFとEPUB形式で購読可能です。 https://gihyo.jp/book/2023/978-4-297-12956-9 内容link Node.jsの入門書です。実際にアプリケーションを作成、運用するためのノウハウを全て詰め込みました。 Node.jsの基礎知識、特徴や活かし方、アプリケーションの開発、設計の考え方、運用、テストの方法、パフォーマンスチューニングなどに触れながら解説していきます。 本書はNode.jsをほとんど知らなかった新卒のころ自分に、今の自分が全力で教えるというコンセプトで書き進めました。 当時の
※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 TL;DR Node.jsのエコシステムで最も人気のあるMySQLパッケージの一つである mysqljs/mysql (https://github.com/mysqljs/mysql)において、クエリのエスケープ関数の予期せぬ動作がSQLインジェクションを引き起こす可能性があることが判明しました。 通常、クエリのエスケープ関数やプレースホルダはSQLインジェクションを防ぐことが知られています。しかし、mysqljs/mysql は、値の種類によってエスケープ方法が異なることが知られており、攻撃者が異なる値の種類でパラメータを渡すと、最終的に予期せぬ動作を引き起こす可能性があります。予期せぬ動作とは、バグのような動作やSQLインジェクションなどです。 ほぼすべてのオンラ
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
September 14, 2022: Check out our new and improved cheat sheet for containerizing Node.js web applications with Docker! Are you looking for best practices on how to build Node.js Docker images for your web applications? Then you’ve come to the right place! The following article provides production-grade guidelines for building optimized and secure Node.js Docker images. You’ll find it helpful rega
NECサイバーセキュリティ戦略本部 セキュリティ技術センター インテリジェンスチームの郡司です。今週のセキュリティブログでは、プログラミング言語のパッケージ管理ツールに潜む危険性に関する話題をお届けします。 最近のプログラミング言語にはたいてい「パッケージ管理ツール(およびパッケージリポジトリサービス)」があります。自分が作成したライブラリをパッケージという形にまとめてリポジトリに公開したり、逆に他人が作成したライブラリをリポジトリからパッケージとして追加したりといったことが簡単にできるプラットフォームが提供されています。たとえばプログラミング言語PythonではPyPI[1] 、Node.jsではnpm [2]、RubyではRubyGems [3]などです。自分が欲しいと思っている機能を誰かがすでに実装してパッケージとして公開しているのであれば、機能を一から開発しなくても、誰かが作ったパ
2021年になってJavaScript、TypeScript、Node.jsの勉強を始めました。 この記事では、読んで良かった本、記事、公式ドキュメントなどをまとめていきます。 ※2021/03時点の情報です。 個人的なリンク集ですが、「これも読むと良いよ」というものがあればぜひ教えてください。 ECMAScript ECMAScriptの仕様は、EcmaのTC39で策定されている Ecma TC39 GitHub organization ep78 TC39 | mozaic.fm Node.jsの各バージョンでのECMAScriptサポート状況 JavaScript Misreading Chat - #86: JavaScript: the first 20 years JavaScript 二十年の歴史についての回 JavaScript チュートリアル | MDN JavaScri
カラーミーショップ サービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。 アプリケーションの構成 構成の概要 今回は例としてEC事業部で提供するカラーミーリピートをとりあげます。構成としては、Railsで作られたAPIサーバ1と、Vue.jsで作られたシングルページアプリケーション(SPA)からなります。また、SPAはExpressが動くフロントエンドサーバでサーバサイドレンダリング(SSR)します。APIサーバはSPAかフロントエンドサーバだけが呼び出します。各ロールはサブドメインが異なります。 APIサーバでセッションIDを持つCookieを発行し、Redisを用いてセッション管理します。また、APIサーバへのセッションが有効なリクエストはフロント
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. Security – the elephant in the room. Everyone agrees that it is very important but few takes it seriously. We at RisingStack want you to do it right – this is why we have put together this checklist to help you guide through the must have security checks before your application is enabled to thousands o
前提 Node.jsのプロトタイプ汚染について書いているのですが、プロトタイプの説明(prototype と __proto__ の関係とか)を定期的に見直さないと綺麗サッパリ忘れる程度にはNode.js触っていないので、何かおかしいところあればご指摘お願いします。 概要 Node.jsではここ数年プロトタイプ汚染攻撃が流行っています。概要は以下を見れば分かると思います。 jovi0608.hatenablog.com そもそもプロトタイプって何?という人は以下の記事が分かりやすいです。自分はお守りのように定期的に読んでます。 qiita.com 外部から送られてきたJSONなどをパースして変換し、そのオブジェクトをmergeやcloneする際に __proto__ を上書きすることで Object.prototype を汚染するというものです。このオブジェクトが書き換えられると、新しく作
こんにちは!小田島です。さくらのナレッジで初めて記事を書きます。よろしくお願いします! 先日5月13日、Deno 1.0がリリースされました。Denoについては後日記事を書きますが、今回はDenoが生まれるきっかけとなったNode.jsについて、いまさら聞けないことを色々書いていきます。 対象者 本記事は、Node.jsについて以下のような疑問を持っている人が対象です。 Node.jsって何? Node.jsを使うと何がうれしいの? Node.jsを使うときに何を注意すればいいの? なお、本記事はNode.jsのイメージを掴んでもらうのが目的であり、ハンズオンではありません。そのためコードは1行も出てきませんのでご了承ください。 そもそもNode.jsとは? 超ざっくり説明すると、JavaScriptの実行環境です。 それまではJavaScriptといえばウェブブラウザー上で動かすのが普通
DenoとNode.jsは両方ともV8をバックエンドにしたサーバーサイドJavaScriptランタイムだが、そこには大きな違いが存在するkeroxp.icon
Deno ver 1.0 5月13日、Deno v1.0の正式リリースが決定しました。 少し勉強してみましょう。 ↑ かわいい Denoってなに? DenoはNode.jsの製作者であるRyan Dahlによって作られました、新しいJS/TSランタイムです Denoはdefaultで安全です(許可なしではファイル・ネットワーク・環境にアクセスできません) DenoはTypeScriptがビルトインで入ってます 外部パッケージはurlでインポートできます(Goみたいに) ディーノって読むらしい(デノではない) Denoが作られた背景 一年前くらいにこの動画を見たことを思い出しました。 Node.jsの作者であるRyan Dahlが、Node.jsを開発した当時の仕様を後悔する旨の動画です。 https://www.youtube.com/watch?v=M3BM9TB-8yA&t=1319s
0.5 MongoDB injection 前回の記事でNode.js+MongoDBなら普通は脆弱性出ないから気にしなくていいですよね、等と書いたのですが、 僕自身が今までフツーに脆弱なコードを書いていました・・・。まずはその話から。 概要 Node.js+MongoDBでMongoDBのドライバを使った時、「SQL文」のように文字列でクエリを投げる事はありません。普通にJavaScriptの文法として、クエリを書く事ができます。 これはすなわち、エスケープ処理のようなものは必要なくなり、 たとえばある文字列で検索するようなクエリを投げるとき、外部からどんな変な文字列を受け取ろうとも、そのままその文字列で検索できる、ということです。 そう、文字列ならね……… 脆弱性のある状況 Node.jsはそれがそもそもWebサーバとして動くのですが、 普通は、最低でもExpressという薄いフレーム
この記事は npm へ公開可能なパッケージを TypeScript で作成しながら、JS/TS 開発で良く使われるツールを紹介する記事です。 typescript-npm-starter という名前の Hello, world! パッケージを公開するという体で話を進めます。
こんな感じでインストールすると、my_project/node_modules/の中にパッケージがインストールされます。 違い ローカルインストールの利点としては、プロジェクト毎にpackage.jsonで管理をするため、作ったプロジェクトを本番環境や他の人の環境に渡すことが簡単になります! そして、いろいろなプロジェクトに手を出す際に、バージョン管理が簡単になります! そしてグローバルインストールと違い、パソコンの環境を汚染しないため気持ち良いです! CLI系のパッケージはどうするの グローバルインストールをした場合のCLIパッケージの実行ファイルは皆さんがnode.jsをインストールした際にパスを通したディレクトリになります。 そして、ローカルインストールをした場合の実行ファイルのインストール先はmy_project/node_modules/.bin/ディレクトリになり、プロジェクト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く