フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
前書き ESLint は JavaScript, TypeScript のための静的検証ツールです。 ESLint を活用することで、コーディング規約やベストプラクティスを機械的に強制することによりコードレビューの手間を省き、本番環境でのエラーやパフォーマンスの悪化を抑制することができます。 TypeScript を使っているプロジェクトでは、パーサーを適切に設定すれば型情報を用いたより精密な静的検証を行うこともできます。 eslint を使う際、 eslint:recommended, plugin:@typescript-eslint/eslint-recommended などの各 eslint plugin の推奨 config のみを使って済ませたり、 eslint-config-airbnb などの config のみに頼ることも多い印象ですが、 recommended conf
Svelte は記述量が少なくシンプルなコードで書けることが特徴の 1 つでした。しかし、アプリケーションの規模が大きくなるにつれて学習コストや認知負荷が増加していくという課題が浮上してきました。Svelte v5 で導入される Rune は今までの Svelte のコンセプトを覆し、よりシンプルになることを目指しています。このトークでは Svelte v5 の新機能を通じて Svelte の書き方がどのように変わるのかについて話します。
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
こういう事(これが本当にマルバタイジングだったのかサイト改ざんだったのかどうか等はITmediaから経緯説明があったわけでもないので知らない)があって こういうスタンスなのだけれど、モバイル環境に関しては最近はJavaScriptを無効化してブラウジングしてる。使っているスマホのバッテリーがへたりはじめているので少しでも消費電力を下げたいというのもある。 基本的にはChromeをデフォルトJavaScript無効、よく利用するサイトを例外ドメインとして設定して利用 例外ドメインに追加したくはないけどアドホックにJavaScript有効で見たいページは共有メニュー(インテント)からFirefox Focusで開いている。この運用で今のところ不便さは感じてない。ただデスクトップ環境に関しては今の所は何もしてない。 昔々IEコンポブラウザと呼ばれるものが流行っていた頃のkiller featur
BunとHono
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
文字数のカウントはどれが正解なのか?
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
14業界の主要戦略パターンを解説する『業界別マーケティングの地図』を出版します!!（→「はじめに」と「おわりに」と主要フレームを全公開）｜池田紀行@トライバル代表
14業界の主要戦略パターンを解説する『業界別マーケティングの地図』を出版します!!（→「はじめに」と「おわりに」と主要フレームを全公開） 『売上の地図』（日経BP）の続編となる本が出ます。 テーマは前著に続き「売上」ですが、今回の本は14業界のマーケティング特性の違いと、それぞれの業界ごとの戦略チューニングのポイントを解説するものです。 ありがたいことに、『売上の地図』はたくさんの方に読んでいただけ、多くの企業で「導入」が進んでいます。一方で、「これはマズイな……」と感じることも増えてしまいました。それが、カスタマイズやチューニングなき当てはめです。 自社商品が持つマーケティング特性、つまりカテゴリー関与度を無視し、「そのまま」使ってしまうのです。 これはいけません。むしろマズイことになります。この流れを断ち切るためには、自らその流れを正す追加情報を出すほかない。これが本書を書こうと思った
2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト | The WebStorm Blog
JetBrains は過去 7 年間にわたり、変化し続ける開発者の状況と使用されている主要テクノロジーを関連付けるために開発者エコシステムアンケートを実施してきました。 その結果は生データと分析レポートの両方の形式でコミュニティと共有され、すべての関係者がこのエコシステムの状況を把握できるようになっています。 本日は今年の調査結果を JavaScript と TypeScript に焦点を当てて確認したいと思います。 アンケートの概要 2023 年の開発者エコシステムアンケートでは、世界中の 26,348 人の開発者からインサイトを収集しました。 このアンケートの結果を自分で確認し、プログラミング言語やツール、テクノロジーから回答者に関する有用な情報や豆情報に至るまで広範なトピックを網羅した情報を入手できます。 私たちは開発者独特のライフスタイルにも注目し、その情熱や興味を明らかにする予定
Oxlintは、JavaScriptやTypeScriptのコードを調べ、エラーにつながりやすい書き方となっている部分や、必要のない部分を指摘する機能を持っている。この用途では「ESLint」が事実上の標準となっているが、100％JavaScriptで記述してあるため、実行速度が問題となっている。 Oxlintでは、プログラムを記述する言語にRustを選ぶことで処理速度を大きく引き上げた。さらに、並列処理に対応し、コンピュータのプロセッサが搭載するコアの数が増えるに従って性能が上がっていく設計になっている。さらに、テスト結果のメッセージをシンプルかつ分かりやすいものにした点も特徴として挙げられる。 正式版になる前からOxlintを試験的に使っていた米Shopifyの担当者は、ESLintを使っていた頃は自社開発のコードをテストするのに75分かかっていたが、Oxlintを使ったところ、10秒
chibivue
chibivueStep by Step, from just one line of "Hello, World". powered by VitePress
Bun でクロスプラットフォームなシェルスクリプト
Bun でクロスプラットフォームなシェルスクリプト 2024.01.20 Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違いを気にせずにシェルスクリプトを書ける、JavaScript オブジェクトとのやりとりが可能であることが特徴です。
Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜 で発表させていただいたスライドです フラットコンフィグへの移行は最近新卒の方に一部やっていただきました 新卒エンジニアがESLintのFlat Config移行と格闘した話 - ドワンゴ教育サービス開発者ブログ ドワンゴ教育事業採用サイト
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック 2024年6月3日 フロントエンドエンジニア うひょ TypeScriptとReactが得意なフロントエンドエンジニア。株式会社カオナビ所属。ウェブ上の技術記事や雑誌を通じて技術的な情報発信を続けている。実はJavaScript歴19年。 著書『プロを目指す人のためのTypeScript入門』（技術評論社） X（@uhyo_） 個人サイト（uhy.ooo） 皆さんこんにちは。前回は、私の技術発信の遍歴をご紹介するとともに、私の考える、技術発信に必要な能力や考え方をご紹介しました。 今回は、より具体的なテクニックやその背景をご紹介します。すでに技術発信をしている方や、これからやろうと思っている方はぜひ参考にしてみてください。文章のテクニックと、登壇（登壇資料）のテクニックをあわせてご紹介します。 keyb
E2Eテスト自動化変遷 〜ノーコードからCypress、そしてPlaywrightへ〜 - estie inside blog
Latest topics > JS開発のつらみ 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 「まんがでわかるLinux シス管系女子」から「ITエンジニア1年生のための まんがでわかるLinux」への改題の意図 Main 理解の不可能性と断絶について » JS開発のつらみ - Nov 20, 2023 JavaScript界隈はソフトウェアのトレンドの移り変わり・流行り廃りが激しい、とはよく聞く。 「だから辛い」とはどういうことなのか、について考えたことのあれこれをXに垂れ流したのを、再編集してまとめた。 流行り廃りの何が辛いのか きっとすでに誰か偉い人も言ってそうだけど、今のWeb技術、特にJavaScriptのつらみは、「プロダクトやサ
var / let / const と言う脈略のない三銃士ども · Ubugeeei/work-log · Discussion #136
序 ここ数日、for文の由来は何か? と言う話題が上がった。 シンタックスのキーワードの由来については自分も関心があって、好きなトピック。 中でも、いつも思っていたことがあって、JavaScriptの変数宣言に使われるキーワード選定が謎と言うのがある。 このことについてツイートしたところたくさんの方に反応をいただけたので備忘録として。 元ツイ: https://twitter.com/ubugeeei/status/1691491304428236800?s=20 お気持ち: https://twitter.com/ubugeeei/status/1691623230812123376?s=20 その他お気持ち: https://twitter.com/ubugeeei/status/1691519021957672961?s=20 https://twitter.com/ubugeeei
TL;DR 2024/06/26 実害が出ているようです、polyfill.ioを利用している場合は直ちに利用を止めましょう。 GIGAZINE: JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Codebook: Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 polyfill.ioから配信されるスクリプトが汚染される環境下にあり、危険な可能性があります。利用している方がいらっしゃいましたら外しておくことをおすすめします。または安全なバージョンのものがCloudflareとFastlyから利用できるので、ドメインをpolyfill-fastly.netやpolyfill-fastly.ioに変更して利用しましょう。 背景 自社で使用しているマーケティングプラットフォームサービスで作成したWebページをGo
JavaScriptは実行するコードそのものをユーザーに公開してしまう仕様のため、リバースエンジニアリング対策のために難読化されていたり、アンチデバッガーが搭載されていたりします。そうしたアンチデバッグへのシンプルで効果的な対抗策がJavaScriptの解析技術を掲載しているブログ「nullpt.rs」にまとめられています。 Evading JavaScript Anti-Debugging Techniques https://www.nullpt.rs/evading-anti-debugging-techniques JavaScriptの動作を解析するためのデバッグツールは多くのブラウザに搭載されており、例えばGoogle Chromeの場合は開発者ツールの「ソース」タブからアクセスすることが可能です。解析したいJavaScriptを開き、コードの左側の部分をクリックすることでブレ
GitHub - dotenvx/dotenvx: a better dotenv–from the creator of `dotenv`
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
HTMLソースコードから個人情報が筒抜け？ Chromeなどのブラウザ拡張機能の多くで脆弱性 米研究者らが発見
HTMLソースコードから個人情報が筒抜け？ Chromeなどのブラウザ拡張機能の多くで脆弱性 米研究者らが発見：Innovative Tech 米ウィスコンシン大学マディソン校に所属する研究者らは、HTMLソースコードからのパスワード、クレジットカード情報などのユーザーデータを抽出可能なブラウザ拡張機能について、多数の人気Webサイトが脆弱であることを明らかにした研究報告を発表した。
2023年はエッジコンピューティングとデータベース接続の分野において、Cloudflare Workers(以下CFWorkers)が中心となり多くの進歩が見られました。本記事では、この1年間の重要なトピックと、それがどのように開発体験を変えたかを振り返ります。特に、CFWorkersのエコシステムの成長、機能拡張、およびDB接続の課題と解決策に焦点を当てています。 エコシステムの進化とCFWorkers上からのDB接続需要の増加 2021年頃から2022年にかけて、いくつかのWebアプリケーションのフレームワークやエコシステムが、CFWorkers上での動作やデプロイをサポートしたことがきっかけとなり、エッジランタイム・コンピューティングの注目を集めるようになりました。 Remix Remixは、フロントエンドのフレームワークであり、エッジランタイムへのデプロイをサポートしています。 2
2. 機械学習・AIチートシート まずは機械学習やAI開発に関わるチートシートからです！ Machine Learning Cheat Sheet | DataCamp 主要な機械学習アルゴリズム、その利点と欠点、および使用ケースをガイドするものです。初心者からエキスパートまで、誰でも役立つリソースです。 機械学習アルゴリズム チートシート MicrosoftのAzureが提供している機械学習アルゴリズムに関するチートシートです。 TensorFlow Cheat Sheet https://zerotomastery.io/cheatsheets/tensorflow-cheat-sheet/ 機械学習と人工知能のためのオープンソースライブラリ、TensorFlowのチートシートです。基本的な概念やベストプラクティスがまとめられています。 （メールアドレスでサブスクライブするとPDFがダ
2023年11月24日紙版発売 株式会社ICS 池田泰延，西原翼，松本ゆき 著 A5判／344ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-13871-4 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Amazon Kindle この本の概要 フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
AWSを使用したアプリケーションのローカルテスト
AWSを使用したアプリケーションのテスト方法 AWSを使用しているアプリケーションの開発時に問題となるのは、どのようにテストを実施するかという問題が発生します。 この時の選択肢は次の通りとなります。 単体テスト時にAWSのモックを作成してテストを行う AWS上にテスト用の環境を用意してテスト時に接続してテストを行う LocalStackを使用してローカルにAWSサービスのエミュレーターを動かしてテストする 単体テスト時にAWSのモックを作成してテストを行う 単体テスト時にモックアップする方法はテストに都合のいいデータを返せるため容易にテストが行えます。 モックの作成に手間がかかりますし、思い込みでモックを作成してバグを作成する場合もありますが、Motoなどを用いることでこれらの問題は軽減できるでしょう。 ただし、あくまで単体テストでしか使用できません。例えば複数プロセスを連携するようなテス
cloudflare d1とhonoで5ch型掲示板を作ってみた - 作ったもので2年に一回くらいの更新を目指す
【JS】「ただの {}（ブロック文）」を使うと嬉しいこと
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
サーバサイドで実行可能なJavaScriptランタイム「Bun」が9月7日（日本時間9月8日）にバージョン1.0に到達することが分かりました。 公式サイトで「Bun 1.0」のローンチイベントへの申し込みが始まっています。 Node.js互換としたことで注目を集めたBun Bunは2022年7月に登場したソフトウェアです。 公式Webサイトで「Bun is a fast all-in-one JavaScript runtime」と紹介されているように、JavaScriptランタイムとバンドラ、トランスパイラなどが最初から統合され、タスクランナーとして実行できる機能も備えています。 なによりもBunが急速に注目を集めた理由は、Node.js互換をうたいNode.jsのnpmパッケージがそのままBunでも使えるとしたこと、そして高速性を強調したことでしょう。 JavaScriptエンジンには
CSSの:has疑似クラスとCSS Anchor Positioningを使用して、:hoverにマグネットのように追従するホバーエフェクトを実装するテクニックを紹介します。 一昔前なら、JavaScriptなどを使用し...記事の続きを読む
「2024年こそ使いこなす！GraphQL最前線」で発表した資料です。 ソニーのホームエンタテインメント領域では、TVやサウンドバー、ヘッドホンをはじめとする様々な製品、それらに付随するアプリケーションを取り扱っています。我々はホームエンタテインメント領域の横断組織として、それらの製品・アプリに対してクラウドサービスを提供しています。この領域において頻繁に要求される機能の一つに、データ配信があります。従来は製品・アプリの案件ごとにそれぞれ個別にサービスを開発しており、サービス間連携やリソースの共通化など横断組織ならではの利点をうまく発揮することができていませんでした。本セッションでは、この問題を解決すべく開発した共通データ配信プラットフォームについて、そこで活用されているGraphQLという技術との関係について、お話しします。
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
この記事はAlex Rattrayさんの A curious case of the ternaries を、本人の許可を得て翻訳したものです(タイトルは大幅に変えてしまっていますが)。 記事の最後にあるように Google Forms から新しい機能についてのフィードバックを求めています。私以外のメンテナーも読めるようにできるだけ英語で書いてほしいですが、「日本語でなら書いてもいいよ」という人がいたら日本語で書いてもらっても大丈夫です。 三項演算子のフォーマットは長年の課題でした。Prettier の v3.1.0 では新しいフォーマットのスタイルを導入することで、ついにこれを解決しました(訳注: 後述の通り、まだ experimental なので、--experimental-ternaries をつけたときのみ有効になります)。 このブログ記事では、これまでの経緯と背景、実際に触って
シンプルなUIライブラリを使おう2023 - Qiita
Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感 | MEDLEY Developer Portal
2024-07-23Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感こんにちは、医療プラットフォーム本部・プロダクト開発室・第1開発グループ所属の加藤です。 オンライン診療・オンライン服薬指導アプリ「CLINICS」の開発を担当しています。 今回は CLINICS で採用している Next.js と Server-side Rendering (SSR) についてお話ししたいと思います。 Next.js は昨今注目を集めている React ベースの Web フレームワークです。 これから Web フロントエンドの開発を始めるにあたって採用を検討している方も多いのではないでしょうか。 Next.js といえば React コンポーネントをサーバー上で実行して HTML を返す SSR に対応しているのが大きな特徴です。 SSR
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ESLint を使い倒す（おすすめルール紹介）
よりシンプルになる Svelte の世界
Remix vs Next.js - React Japan
最近はJavaScriptをデフォルト無効化してブラウジングしてる
Vue Language Server から生まれた Volar.js と、それが秘める可能性
ブラウザ上のJavaScriptでの非同期処理を、今までどのように実現してきたか 「コールバック地獄」なども乗り越えてきた歴史
ChatGPTで「業務アプリ」作成に挑戦 プログラミングの工数削減につながるか？ 新機能を使い倒してみた
TypeScript Clearly & Quickly
「実装例から見る React のテストの書き方」をアップデートする
JavaScript／TypeScript向け静的解析ツール「Oxlint」が正式に公開、Rustの採用で大幅に高速化
ESLintのローカルルールで独自のコーディング規約を実装する
【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック
Latest topics > JS開発のつらみ - outsider reflex
polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
JavaScriptのアンチデバッグ技術をシンプルな発想で回避する方法
2023年振返り: Cloudflare Workersとデータベース接続の進歩
2023年版！エンジニア必見のチートシート集 - Qiita
フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
JavaScriptランタイム「Bun」がバージョン1.0に到達へ、9月7日にローンチイベント開催
CSSのみで簡単に実装できる！ マグネットのようにくっついて追従するホバーエフェクトを実装するテクニック
ソニー: GraphQLを活用したデータ配信プラットフォームの事例紹介
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
【翻訳】Prettier の新しい三項演算子のフォーマットを試してみてください