"use server";を勘違いして使うと危ない
ムーザルちゃんねるのzaruです、こんにちは。今回はNext.js AppRouterのServer Actionsで "use server"; を勘違いして使うと危ないケースがあるよというのを紹介します。 以前書いた"use server"; でexportした関数が意図せず？公開されるとはまた違うケースだったので改めて書きます。 今回のケースが発生することは稀だと思いますが、Server Actionsの仕組みを勘違いしてしまっていたり雰囲気で使っているとセキュリティリスクをはらむコードになってしまいます。 例として、以下のようなフォームのデータフローを実装したとします。3つのファイルに分かれています。 <form> のデータを submitForm() 関数で受け取り、バリデーションを実行します。バリデーションに問題がなければ insertRecord() 関数でデータを保存します
FANZAの検索結果から熟女を除外するブックマークレット
興味のない作品が検索結果に混じるのは邪魔ですよね。 私は熟女モノとか人妻モノは眼中にないのですが、なぜだか最近そっち系の作品が多くて閉口しています。 しかしFANZA側の検索システムはNOT検索できるようになっていません。そこで、検索結果から除外できそうなものを除外するブックマークレットを作ることにしました。 さいわい近年は内容の概要文をそのままタイトルにしたような作品ばかりなので、タイトルに含まれるキーワードで除外が簡単にできそうです。 「熟女」とか「五十路」のような単語を含む作品を非表示にしてしまえばよいのです。 ブックマークレット javascript: (() => { const r = /熟女|完熟|熟れ|四十路|五十路|六十路|人妻|奥様|妻|夫|母|ママ|おばさん|BBA|姑|嫁/; const q = '#list>li'; document.querySelectorA
ユーザー体験重視のSPAアーキテクチャ改 - laiso
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
What's the difference between JavaScript engines and JavaScript runtimes? - Human Who Codes
You have probably heard the terms “JavaScript engine” and “JavaScript runtime” used interchangeably to mean “a program that runs JavaScript.” These are often intermixed by referencing V8, Node.js, or some other combination of related programs. However, there is a significant difference between a JavaScript engine and a JavaScript runtime in terms of scope and functionality. Understanding this diff
You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
Latest topics > JS開発のつらみ - outsider reflex
Latest topics > JS開発のつらみ 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 「まんがでわかるLinux シス管系女子」から「ITエンジニア1年生のための まんがでわかるLinux」への改題の意図 Main 理解の不可能性と断絶について » JS開発のつらみ - Nov 20, 2023 JavaScript界隈はソフトウェアのトレンドの移り変わり・流行り廃りが激しい、とはよく聞く。 「だから辛い」とはどういうことなのか、について考えたことのあれこれをXに垂れ流したのを、再編集してまとめた。 流行り廃りの何が辛いのか きっとすでに誰か偉い人も言ってそうだけど、今のWeb技術、特にJavaScriptのつらみは、「プロダクトやサ
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
javascript でなぜ 2^53 - 1 以下の整数を正確に表せるのか - Qiita
javascript の勉強をしていて疑問に思ったことについて調べたので書きます。冷静に考えるとかなり当たり前のことなのですが、同じ疑問を持つ人もいるかと思うのでメモを残しておきます。勘違いがあったら教えてください。 jsでは数値はすべて浮動小数点型で表す ほとんどのプログラミング言語では、整数と整数以外の実数を異なる型で表す（以下、面倒なので整数以外の実数を単に実数と表現する場合がある）。つまり、数値の中でも整数だけを特別に扱う型がある。例えば、Cでよく使うのは整数はint、実数はdoubleなどですね。これに対して、 javascript では整数だけを表す型というのがなく、数値はすべてNumberという型で表現される。つまり、3も0.3も同じ型の値である。Numberは実数を表すのによく使われる64bit の浮動小数点型なので、 javascript では整数も実数っぽく表しているこ
Open source hooliganism and the TypeScript meltdown
September 7, 2023 Open source hooliganism and the TypeScript meltdown I've seen a lot of true believers argue for virtues of their favorite paradigms and methods over the decades working in software. And mostly, I look at people with a passionate preference and smile. Isn't it great that people care so much about their craft that they volunteer to extol the benefits of their favorite tools! Yes it
SSRとCookie Forwardingの闇
本記事はPhotocreate Advent Calendar 2019 2日目の記事です。 フロントエンドなみなさんこんにちは。Andyです。 2019年3月より、業務委託という形式で株式会社Photocreateの運営するスクールフォト販売サイト「スナップスナップ」のリニューアルプロジェクトをお手伝いさせていただきました。 今回はその中でチームの仲間とチャレンジした課題についてご紹介したいと思います。 はじめに 昨今のフロントエンド界隈はエッジノードでのpre-renderingエコシステムが非常に充実してきました。ひと昔前のように「検索エンジン最適化(SEO)のためにはSSRがマスト！！」といった要件がSingle Page Application開発に求められることも減ってきた気がします。 とはいえ依然としてSSR機構を求められる案件も少なくなく、無垢な初心者が誤って迷い込もうもの
Block Pong: Web 技術を駆使したゲームアプリの実装舞台裏 - DevFest 2020
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
奇妙な曜日バグ | Wantedly Engineer Blog
ある日、海外チームからバグの報告がありました。日付と曜日が対応していないというのです。 テスト環境でいくつか設定を変更して試したところ、OSのタイムゾーンをシンガポール標準時 (UTC+8) に変更したときに、曜日が2つずれることが確認できました。4/2は金曜日ですが、4/2が水曜日として表示されてしまっています。 原因調査この部分のソースコードはだいたい以下のようになっていました。Moment.jsというライブラリを使って日付と曜日を表示しています。 // TimelineItem.jsx // date は 2021-04-02 のような文字列 const DateBox = ({ date, showMonth }) => { const mDate = moment(date); const dateHuman = showMonth ? mDate.format("M.D") :
Reactのprops/contextの使い分け - saneyuki_s log
Reactのprops/contextの使い分け 仕事先でたまたまこれの話になり、個人的に思っていることをまとめた。 公開したのは、時々見かける「どっちを使うべき？」みたいな議論に 自分も混ざりたかった 思うところがあったから. 「とにかくpropsでいい」と自分は考えている。 なによりReactは書き方に詰まった場合に、フレームワークライブラリ固有の事情を考慮して解決するというよりも、実装や設計上の問題が一般的なプログラミングパターンの範疇の発想で解決できるのがよい 前提 以下のように考える React/preact のコンポーネント = 通常のclassや関数 状態を隠蔽して抽象する 最近は冪等性がどうとかReact語るときにあんまりいわなくなったけども.... props = 関数やメソッドの引数（入力） context = グローバル変数（モジュールグローバルな変数） 実装の指針
10 年前に JavaScript で Flash Player を開発し買収された話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 私は過去に自分が設立した会社で ExGame という HTML5 実装の Flash Player（正確には Flash Runtime Engine）を開発し、その会社ごと DeNA に買収（M&A）されました。あまり出来ない体験であるのは間違いないので、Flash が終了を迎える今、改めて振り返ってみようと思います。 Flash Player の開発 今から 10 年前の 2010 年、ちょうど iPhone が普及し始めてきてガラケーのシェアが 8 割から 6 割くらいに落ちようとしていた時期に、私は Flash Player を JavaScript で実装していました。以前この
私たちはなぜ SPA で開発するのか / Why you choose SPA
2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。
Web標準でつくるガラケーサイト
このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。 フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。 な…
一休.comホテルリストの表示速度を従来比2倍にしました - 一休.com Developers Blog
宿泊事業本部フロントエンドエンジニアの宇都宮です。 2018年度下期は、一休.comホテルリストページ スマホ版の速度改善に取り組んできました。その結果、ページのデザインはそのまま、機能面はリッチにしつつ、プロジェクト開始前の約2倍のスピードでページが表示されるようになりました。 本記事では、高速化のためにどのような施策を行ったのか紹介します。 なお、Webサイトの高速化手法については、ホテル詳細ページ高速化プロジェクトを実施した際にも記事を書いています。これらの記事で紹介している手法（たとえば、Imgixによる画像最適化等）については、記述を省略しています。あわせてご覧ください。 一休.comスマホサイトのパフォーマンス改善（概要編） - 一休.com Developers Blog 一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Develop
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React
how_to_choose_form.md