webhint, the hinting engine for web best practices
Use webhint to improve your websitewebhint helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.
Use webhint to improve your websitewebhint helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.
ぼくのかんがえたNext.jsの構成
はじめに 普段開発している Next.js プロジェクトの構成がなかなかいけてるんじゃないかということで、その構成を公開しちゃおうというお話。ほんとはタイトルをぼくがかんがえたさいきょうのNext.jsの構成にしたかったけどひよりました (今回の記事を作るにあたり改めて一から Next.js のリポジトリ作ったら husky のバージョン上がってたり、eslint-config-prettier の v8 系になって config の書き方ちょっと変わってたり、時代は移り変わるのです・・) 意外と手順書いていくと長くなったので一部coming soonになっているものは確固たる意思を持って、随時追記します 更新履歴 2021/04/01 css modules が storybook で上手く呼べてなかったので修正、あと storybook のバージョンアップ 2021/03/31 なんと
Deno (ディノ) Advent Calendar 2020、25日目の記事です。今日は Deno が Node.js に依存しなくなった経緯の話をします。 Node.js に依存しながら始まった Deno の開発 Deno は、プロジェクトが始まって以来いくつかの点で Node.js に依存して開発が進められてきました。おもに Node.js に依存していたのは以下の3種類のプログラムです。 バンドラ parcel (のちに rollup に移行) フォーマッタ prettier リンタ tslint (のちに eslint に移行) この中でバンドラが最も最初に Deno 製のツールにリプレースされ、その後フォーマッター、リンターの順でリプレースされていきました。リンターがリプレースされたのはつい最近 (2020年11月) のことです。この記事ではそれぞれの経緯・手法について紹介して
@uhyo さんのTS本ということで読んでいます。 一応入門書という位置づけなので、社内での育成に活用したい目線。 とはいえ自分でも学べるところ多そう、特にTSのd.tsみたいなモジュールまわり理解弱いので… 全体的な感想 4章（関数）、6章（高度な型）が特によかった。 （5章が入ってないのは自分がクラス使わないからなので、使う人だったら5章も入ってると思う） 自分も何年かフロントエンドエンジニアとしてやっているのでさすがにだいたいは知っている内容のおさらいになったけど、それでもふわっとした理解が適切に言語化だったり、コーナーケースの知らない挙動など発見は沢山あった。 特に育成には有用だなと思った。6章の内容は理論と実践の話のバランスが良く、レベル的にもそれなりにTS書いてる人でも知らないこと全然ありそうな内容だったので、自分のチームのメンバーにも少なくとも6章は読んでもらいたい。勧めます
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
tsconfig.json 設定項目備忘録
型推論オプション 型推論の結果が変わるもの。 ⭐strict ... 以下のセット alwaysStrict strictNullChecks T | null や T | undefined が T に縮退しなくなる。 例 strictBindCallApply Function の各種メソッドが any に縮退しなくなる。 例 strictFunctionTypes コールバック関数の引数が共変でもunifyするようになる結果、型変数の推論優先度が変わることがある。 例 strictPropertyInitialization noImplicitAny 宣言型がない場合にflow typeが使われる機会が増える。 例 noImplicitThis thisの宣言型がない場合に文脈から型が決定される機会が増える。 例 useUnknownInCatchVariables catch (
【2024年1月】Next.js での新規アプリの構成 & Next.js ディレクトリ構成(features)
選定の方針 ログインしての利用がメインで、ユーザーがあまり多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリに集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 Next.js ライブラリ構成 メインで使っているライブラリです。Next.js + Vercelの開発体験が良すぎるので、できる限り活用して開発することを意識して作っています。 フレームワーク Next.js メインで使うライブラリ SWR tRPC React Hook Form Jotai Style/CSS に関して Vercelがリリースしたv0をいいなと思って、v0の出力で使われているTailwind CSS + shadcn/uiを使うようにしています。(v0活用は検証中です) よく使うインフラ系サービス Vercel: Gitにpus
複数リポジトリ間におけるeslint・prettierの設定共通化 - LIVESENSE ENGINEER BLOG
転職会議事業部の srkw です。 今期事業部内で利用する eslint および prettier の共通ルールを管理するパッケージを作成したので、その工程と成果物をご紹介したいと思います。 なお、今回紹介するパッケージの内容には多分に要修正箇所があり、今後他のプロジェクトとの優先順位を鑑みて、都度改善される可能性があります。その際はこちらの記事も併せて更新できればと考えています。 TL;DR 最終成果物は以下のリポジトリで公開しています。利用リポジトリ側での設定等は README に記載しております。 https://github.com/livesense-inc/eslint-config-template モチベーション 転職会議は現在ページごと・機能ごとにサーバーを別で管理するマイクロサービス構成で開発を行っています。その中で利用する静的コード分析やコードフォーマッタのルールは
PayPal Begins Rollout of MCP Servers to Accelerate Agentic Commerce
バグハンターのためのクライアントサイドJavaScriptの静的解析 - No1zy Web Security Blog
はじめに JavaScriptは、最新のWebブラウザで最も普及した技術の1つになっています。AngularJS、ReactJS、Vue.jsなどのクライアントサイドJavaScriptフレームワークを使用して構築されたアプリケーションは、多くの機能とロジックをフロントエンドに提供します。そしてロジック、機能の増加によってクライアントサイドのAttack Safaceも増加します。これらのAttack Safaceを理解し、脆弱性を発見する方法を身に着けることが必要です。 このブログ記事では、効率よくWebアプリケーションの脆弱性を発見するために、クライアントサイドJavaScriptの静的解析に注目して説明します。 今回は脆弱性を探す対象はOWASP Juice Shopです。Juice ShopはJavaScript製の意図的に脆弱に作られたアプリケーションです。 何を探すか? セキュ
VSCode + ESLint + Prettier + React + TypeScript （自分用メモ Fall, 2020） - Qiita
Help us understand the problem. What are the problem?
はじめに React の Docker 環境構築の記事ってよくありますよね(笑) この記事が特徴的なのは、vscode 拡張機能の dev containers によってリモート側で開発が可能になるという点です。 リモートコンテナをビルドすると、リモートコンテナ側に自動的に vscode 拡張機能がインストールされ、設定まで自動的に反映されます。 そして、ホスト側の vscode 拡張機能には全く影響しません。 また、拡張機能がリモートコンテナ側にインストールされるので、リモート側のリソースを使用して vscode 拡張機能が動作します。 つまり、ホスト側に nodejs をインストールしたりという面倒な作業から解放されるという利点があります。 バージョン サンプルリポジトリ docker 環境のサンプルです。 コピーしていただいても、fork して利用していただいても構いません。 （※都
SVG Logos
SVG logos for developers, designers, bloggers, geeks and more
もうprettierで消耗したくない人へのvueでのeslint設定 - クソ雑魚エンジニアのメモ帳
タイトル通り。vscodeとvuejsを使ってのlintの設定をprettierなしでやってみた。 tl;dr 環境 問題点 手順 .vueの構文チェックその１ vscode上での自動フォーマット .vueの構文チェックその２ rulesをカスタマイズ <template>のカスタマイズ <script>をカスタマイズ まとめ。 おまけ tl;dr 対象ファイルとpackage.jsonと.eslintrc.jsの対応表👇 構文チェック・自動フォーマット 対象ファイル npmライブラリ(package.json) .eslintrc.jsでのextends .vue(<template>) eslint-plugin-vue plugin:vue/recommended .vue(<script>) eslint eslint:recommended . js eslint eslint
人によって異なるJavaScriptの書き方もチーム開発では揃っていないと気持ちが悪いし、バグのもとに…。構文チェックツール「ESLint」を導入すれば、スタイルガイドに合わせたチーム開発が捗るそうですよ。 「リンティング（linting）」という言葉に聞き覚えはありますか？ コードの潜在的問題を自動的に確認するためのツール（リンター）を使ったプロセスのことです。このようなツールを使用することで生まれる、重要なメリットがいくつかあります。 コードスタイルの一貫性を保つ：スペース、インデント、ブレース（波括弧）の配置などのコードスタイルの問題をリンターで確認できる。チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば自動的に確認できる 潜在的エラーや良くないパターンを見分けられる：リンターは、重複変数、到達不能コード、無効な正規表現の可能性があるエラーを発見するため、より高度
Linux財団傘下に「JS Foundation」が発足、ESLint、Appium、jQueryなどをホスト。Node.js Foundationとの協力で標準策定に関与も
The Linux Foundationは、JavaScriptにおけるオープンなエコシステムの発展や関連ツールの普及促進などを目的とした「JS Foundation」の発足を発表しました。 JS Foundationは、Appium、Dojo Toolkit、ESLint、Grunt、jQuery、jQuery Mobile、Node-Red、QUnitをはじめとするさまざまなプロジェクトをホストすると説明されています。 発表は米オライリー主催のイベントOSCON London 2016のセッション「Evolving the JavaScript ecosystem」で、JS Foundation エグゼクティブディレクターのKris Borchersによって行われました。 Bochers氏はJS Foundationの活動として、コミュニティのホームとなり、コラボレーションを促進し、継
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 GitHub 上で、Swagger の yaml | yml | json を Swagger-UI に変換できる Chrome 拡張機能を作った。 その紹介。 「Swagger とは？」という話は、下記等を参照のこと。 Swaggerの概要をまとめてみた。 - Qiita Demo クリックするだけ。簡単に変換できる。 全展開・全折り畳みができて便利。 インストール Chrome Web Store からインストールできる。 swagger-viewer - Chrome ウェブストア 特徴 簡単 1クリックで変換できる 依存な
ESLintはJavaScriptを静的に検証するツールです。 わかりやすく言えば、チームメンバー間で統一された美しいコードを生成するためのツールです。 設定ファイルを書いておけば自動で変換することも可能です。 ESLintを始めよう！ JavaScriptのLintツールにはjslint, jshint, JSCSなどがあります。 2016/11 時点で npm trendsで比較した結果が以下の画像です。 http://www.npmtrends.com/jslint-vs-jshint-vs-jscs-vs-eslint 半年前はjshintと並んでいましたが、わずか半年の間にダブルスコアをつけています。 jshintは開発が鈍化しています。 またJSCSの開発チームはESlintに移行することを決めました。 以下に記載した有名ライブラリは開発時にESLintを使っています。 jQu
GitBook – Build product documentation your users will love
The State of Docs Report 2025 is live! Dive in and see why docs matter more than ever: Read the report
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat
ESLintについて - Qiita
大本命。ESLint 2015年現在、JavaScriptのLinting toolといえばJSHintかJSLintみたいな風潮ありますが、もうESLintで行きましょう。 公式ページ github 大きな特徴 プラガブルな実装 全てのルールのON/OFFが可能 独自のルールの追加が可能 独自のフォーマッターでの出力が可能 ECMAScript 6 / React JSXをサポート Philosophy ESLintは下記のPhilosophyを掲げています。 全てはPluggableである。 Rule APIはバンドルされたものもカスタムもどっちも使える Formatterはバンドルされたものもカスタムもどっちも使える 追加のルールとフォーマッターは実行時に指定できる バンドルされたルールとフォーマットを使わなくても良い 全てのルールは 独立している 全てのルールはoffにもonにもで
前書き ESLint は JavaScript, TypeScript のための静的検証ツールです。 ESLint を活用することで、コーディング規約やベストプラクティスを機械的に強制することによりコードレビューの手間を省き、本番環境でのエラーやパフォーマンスの悪化を抑制することができます。 TypeScript を使っているプロジェクトでは、パーサーを適切に設定すれば型情報を用いたより精密な静的検証を行うこともできます。 eslint を使う際、 eslint:recommended, plugin:@typescript-eslint/eslint-recommended などの各 eslint plugin の推奨 config のみを使って済ませたり、 eslint-config-airbnb などの config のみに頼ることも多い印象ですが、 recommended conf
ContentsBasic project setupThe basic setup consists of four steps: Create the project and source directoriesCreate a package.jsonGet a .gitignore, tsconfig.json, .eslintrc.jsInstall TypeScript & dependenciesNote: This guide uses yarn, but if you prefer npm it has similar commands. # Create project folder mkdir my-project cd my-project # Create source folder and files mkdir src touch src/main.ts sr
The future of TypeScript on ESLint - ESLint - Pluggable JavaScript Linter
A couple of weeks ago, the TypeScript team shared their roadmap in which they described formally adopting ESLint in their repo and working to improve TypeScript compatibility for ESLint: Linting Semantic rules in ESLint Parity with TSLint Speed & scalability Editor integration for ESLint In a survey we ran in VS Code a few months back, the most frequent theme we heard from users was that the linti
JSのコードの自動整形に Prettier が便利だったので、�eslint とAtomから使えるように設定した - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
プラグイン機構を持っているので、Lintするルールを追加できる ESLint 本体のコードがシンプルに保たれる Mozilla JavaScript AST をベースとしているため、他のものと連携しやすい EsprimaでパースしたASTをLintする two-pass のツール つまりEsprimaでパースできないとLintはできない また、現段階だと巨大なjsファイルではJSHintより3倍程度遅い Rule performance などにまとめられている、速度については今後改善していくとのこと JSLint/JSHint互換のようなルールが作られている – ESLint Rules List Node.js で書かれているツール 将来的には Browserified されたバージョンも出す予定 ドキュメントがよく書かれている それぞれのルールごとにドキュメントが書かれている esli
Next.js 15
Next.js 15 is officially stable and ready for production. This release builds on the updates from both RC1 and RC2. We've focused heavily on stability while adding some exciting updates we think you'll love. Try Next.js 15 today: # Use the new automated upgrade CLI npx @next/codemod@canary upgrade latest # ...or upgrade manually npm install next@latest react@rc react-dom@rc We're also excited to s
2024-01-01 quick-lint-js is a JavaScript bug finder. Today, version 3.0 makes it also a TypeScript bug finder! quick-lint-js complements TypeScript with beginner-friendly messages and fast linting. install quick-lint-js 🌐 try in browser code on GitHub Example code used in this article has been adapted from various open source projects, including some Copyright Tiny Technologies, Inc. and Copyrigh
- SSL関連の障害がなぜ起きてしまうのか？ - 何で対応端末が変わるのか - 何をすれば障害を防げるのか？ - SSL対応するためにどういう体制を組んでいたらいいのか？ おことわり: 社内向け勉強会のスライドを再編集したものです。社外向けに割愛した結果、ちぐはぐになっている部分があります。
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
CLI用のコマンドを作ってみようと思いたったのですが、CLI開発フレームワークoclifを試してみたらとても簡単で環境構築もすんなりできたのでびっくりしたという話。 概要 ある用途で思いたってCLIのコマンド作ろうと思った oclifというCLI用のフレームワークがあったので試してみた 簡単すぎてびっくりした 追加でPrettierとJestも対応してみました 動機 誰しもCLIのコマンドをつくりたくなることがたまにある。僕はある。 今回はGUIを作るまでもなく、コマンドでシュッと実行したい作業があったので勉強と遊びを兼ねてコマンドを作ることにしました。CLIの開発ツールはいろいろありますが、今回はやりたいことを実現するのにすでに知見としてあるものを流用したい背景aからNode.jsでやることにしまた。 Node.jsにもCLI用を作るためのライブラリがさらにいくつかありますが、今回はoc
はじめに このエントリは全5回を予定する19卒新人ブログリレーの第4回目です。 はじめまして、リクルートテクノロジーズ新卒2年目の高橋 勇人です。 現在は不動産検索サービスSUUMOのフロントエンドエンジニアとして働いています。新卒入社してからの1年間、SUUMOの新機能開発に携わり、物件を地図から探す機能の開発を進めてきました。 SUUMOではこれまでJavaScript+jQueryで開発されてきましたが、SPサイト上で地図による物件探し機能を実現するために、React+Reduxという技術スタックが採用されました。 （※SP＝スマートフォン） 長期的な開発がされてきたプロダクトで、これまで使ってきていなかった技術スタックでの開発を推し進めるにあたり、継続的な保守性を向上するための取り組みの一環としてテストの整備が進められました。 本記事では、React+Reduxでの地図機能の開発に
HSEとは何か
Heterogeneous-Memory Storage Engineについて解説します これは2020年6月6日に行われた カーネル/VM探検隊 online part1での発表資料です 参考文献 Heterogeneous-Memory Storage Engine: https://w…
経緯 aタグにtarget="_blank"をつけると危険だよと言われたので、忘れないうちにメモメモ。 危険な理由 「リンクを開いた先のページでのJavaScriptによって、開いた元のページを操作できてしまう」 大抵のブラウザでは、 target=blank_によって"別タブで開かれたページ"が手前に表示され、 "元のページ"は裏に残る。 "別タブで開かれたページ"にて、 が実行されると、裏で"元のページ"が画面遷移される。 オリジンが違ったとしても、リンクをたどってきたユーザを任意のサイトに誘導することが可能。 ※ window.openerは、"別タブで開かれたページ"を開いた"元のページ"への参照を返すらしい。。。 window.opener フィッシング詐欺攻撃の例 リンクのへの rel=noopener 付与による Tabnabbing 対策 ESLint(eslint-plu
はじめに ESLint v8.21.0のリリースでこれまでとは異なるconfigシステム（flat config）が持ち込まれた。 以下の通り、新しいconfigシステムへの一歩というように言及があり、ESLintを利用する上で無視できない影響を受ける変更となりそうなので、どのようなものか確認しておきたい。 We took a big step toward ESLint’s new config system! The new FlatESLint class is now merged. Its API is not yet stable, and not all features are implemented yet, but it is accessible via the Node.js API for early testing. See RFC9 for the origi
Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 で発表させていただいたスライドです フラットコンフィグへの移行は最近新卒の方に一部やっていただ…
{ "name": "your-service", "version": "0.0.1", "dependencies": { "babel-polyfill": "^6.20.0", "babel-runtime": "^6.20.0", }, "devDependencies": { "babel-core": "^6.21.0", "babel-eslint": "^7.1.1", "babel-loader": "^6.2.10", "babel-plugin-transform-async-to-generator": "^6.16.0", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.18.0", "babel-preset-stage-0": "^6.16.0", "eslint
tsconfig/bases の紹介！
{ "extends": "@tsconfig/strictest/tsconfig.json", } 以上です！ tsconfig.json ってどんなふうに書いていますか？？ tsconfig.json をこんな感じで書いている人はいないでしょうか { "compilerOptions": { "strict": true, "allowUnusedLabels": false, "allowUnreachableCode": false, "exactOptionalPropertyTypes": true, "noFallthroughCasesInSwitch": true, "noImplicitOverride": true, "noImplicitReturns": true, "noPropertyAccessFromIndexSignature": true, "noU
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deno が Node.js に依存しなくなった - Qiita
「プロを目指す人のためのTypeScript入門」読書感想
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
The PayPal Technology Blog – Medium
React+Ts+Vite+ESLint+prettier Docker環境構築
JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう
GitHub上でSwaggerをプレビューできるChrome拡張機能を作った - Qiita
Step by Stepで始めるESLint - Qiita
2024年9月 俺の eslint.config.js
React×Firebaseでちゃんと開発するときの環境構築手順と解説
ESLint を使い倒す（おすすめルール紹介）
Starting a TypeScript Project in 2021
ESLint 0.1.0がリリースされたので、JSHintとの違いやプラグインの書き方について
TypeScript Clearly & Quickly
幅広い環境でSSL対応するために知っておくべきこと
「実装例から見る React のテストの書き方」をアップデートする
CLIツールを作るためにoclifを試してみたら簡単すぎて吃驚した | Trial and Spiral
React+Reduxアプリケーション テスト戦略 | Recruit Tech Blog
target="_blank"には気をつけよう - Qiita
ESLintのconfigがどのように変わり得るか（flat configとは何か）
ESLintのローカルルールで独自のコーディング規約を実装する
最近のAWS Lambda開発環境 - Qiita
npm package を実装するための自分専用テンプレートリポジトリを作った - mizdra's blog