2023年後半頃から、ブラウザの「戻る」ボタンを押すと、訪問したおぼえのないページが表示されることが増えた。そういうページは大抵、記事風の広告やサイト内の記事へのリンクが大量に並ぶという構成になっている。 こんなレイアウトになってることが多い。 この手法はブラウザバック広告とかブラウザバックレコメンド (あるいはレコメンデーション) とか呼ばれており、国内外の複数のWeb広告会社がこれを提供しているようだ。 たとえば、こちらはGMOアドマーケティングの “TAXEL” が提供しているブラウザバックレコメンド。 【新たな収益・回遊源が誕生！】ブラウザバックレコメンド サイトから離れてしまうユーザーに対し、広告やレコメンド記事を表示させることで、収益化や内部回遊に繋げることを目的としているフォーマットになります。 ……というのがセールスポイントらしいのだが、サイトから離れる人は、サイトから離れ
Next.jsの考え方
Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ
2024年度リクルート エンジニアコース新人研修の講義資料です
2024年度リクルート エンジニアコース新人研修の講義資料です
概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
2024-08-06 TSKaigi サブイベント #1 フロントエンド
JavaScript エンジンの高速化
これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化では、バイトコードの JIT コンパイルが最初に行われます。 しかし、コンパイルには当然時間がかかります。少しでも高速化されたコードを生成するには、より多くの時間をコンパイルにかけなければなりません。コンパイルによる速度向上とコンパイルのレイテンシはトレードオフの関係にあります。 そこで、多くの JavaScript エンジンは、インタープリタと多階層の JIT コンパイラの組み合わせで構成されています。次の図は、主要な JavaScript エンジンの設計
こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、
Rust製ブラウザエンジン「Servo」搭載、新たなWebブラウザ「Verso」の開発プロジェクトが立ち上がる
欧州を基盤にオープンでセキュアなインターネットの実現を支援しているNLnet Foundationは、Rust製ブラウザエンジン「Servo」を用いたWebブラウザ「Verso」の開発プロジェクトの立ち上げを発表しました。 Versoの開発は、Electron代替を目指すフレームワーク「Tauri」の開発チームが主導することが、下記のポストで示されています。 We've stopped waiting for other people to solve our problems with webviews and kicked off a browser+webview project called Verso (and we've already gotten a bit of funding from NLNET.)https://t.co/PMOV7YbGtE https://t.c
この2年でFirebase Authentication はどう変わった？セキュリティ観点の仕様差分まとめ - Flatt Security Blog
はじめに こんにちは、@okazu_dm です。 今回自分がぴざきゃっとさんが2022年4月に書いた以下の記事を更新したため、本記事ではその差分について簡単にまとめました。 Firebase Authentication利用上の注意点に関して生じた差分とは、すなわち「この2年強の間にどのような仕様変更があったか」と同義だと言えます。IDaaSに限らず認証のセキュリティに興味のある方には参考になるコンテンツだと思います。 更新した記事につきましては、以下をご覧ください。 差分について Firebase Authenticationの落とし穴と、その対策を7種類紹介する、というのがオリジナルの記事の概要でしたが、2年ほどの時間の中で対策については大きく進歩したものが4点ありました(残念ながら落とし穴が無くなった、とまでは言えませんが)。 今回記事の中で更新したのは以下4点です。 落とし穴 1.
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 こ
WebKitのコミッターになった
WebKitのcommitterになった。僕はAppleやIgaliaやSonyの従業員ではなく、完全に趣味である。 I'm officially a WebKit (@webkit) committer! Thank you to the JSC reviewers who have been reviewing my patches. — sosuke (@__sosukesuzuki) August 18, 2024 WebKitの開発者のステータスのポリシーは https://webkit.org/commit-and-review-policy/ を参照してほしい。Committerよりも強い権限を持つreviewerという人たちもいる。人のパッチを正式に承認したり拒否したりすることはreviewerにしか出来ない。 2024年2月からパッチを投げ始めて、6月の半ばくらいにcom
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
フロントエンドカンファレンス北海道でお話ししたスライドです Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d # URL YouTube…
フロントエンド開発に役立つ Datadog 活用法 - LegalOn Technologies Engineering Blog
はじめに 本記事では、Datadog の設定方法を解説しながら、どのようにフロントエンド開発に活用できるかを話していきます。Datadog とは SaaS 型で提供されている監視サービスです。システムやアプリケーションの監視ができ、収集したログを分析するのに役立つ機能をたくさん提供しています。 こんにちは、株式会社LegalOn Technologiesで Software Engineer（Frontend）をしている山越 ( @yukishinonomeIT ) です。弊社では2024年4月に『LegalOn Cloud』というプロダクトを提供開始しました。Datadog は既存のプロダクトでも使っていたので、この新しいプロダクトでも活用することになりました。そこで、『LegalOn Cloud』における Datadog の運用を担当することになったので、実際にどのような活用をしている
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
はじめに この記事について こんにちは、zomysan（ぞみ） です。今回は私の所属するソーシャルPLUSのフロントエンドチームがどのようなことを考えてテストを作っているのかを紹介します。 フロントエンドのテスト手法については素晴らしい本や記事がすでにたくさん存在しますが、限られたリソースの中で、実務としてどうテストをこなしているのか、という具体的な事例として楽しんでいただければ幸いです。 テスト運用における課題や改善点も率直に紹介しますので、「うちではこうやって解決しているよ」といったご意見があればぜひコメント欄で教えてください！ 対象読者 フロントエンドのテスト運用に悩んでいる方 フロントエンドのテストってどういうものなのか興味がある方 ソーシャルPLUSに入社したフロントエンドメンバー この記事に書いていないこと すべてのチームにとっての最適解は提示していません 弊チームにとっても折
こんにちは、チームラボのフロントエンド班に所属している速水です。 今回、フロントエンド班内でツール・ド・フロントエンドというイベントを行ったので、その一部を紹介させてください。フロントエンド班の雰囲気が少しでも伝われば幸いです。 ツール・ド・フロントエンドとは フロントエンド班内で、開発環境や生産性の上がるツール、興味のある技術やテーマについて紹介し合うイベントです。 2016年からほぼ毎年行われていて、流れとしては、みんなで各テーマに関して自分の使っているツールや技術を下記のようにドキュメント上に記載し、意見を交換していく形です。 調査結果 開発機のOS Windows に一票も入らず、 Mac に票が集まる形になりました。 使用しているエディタ VS Code が、やはり強い結果となりました。 エディタの選定基準として「 GitHub Copilot が使えるかどうかが大事だよね」や「
Swiftで高速フーリエ変換してオーディオビジュアライザーを作る / iOSDC Japan 2024 Day1 Track D
ZOZOTOWNのフロントエンド開発にCSS in JSを導入して2年後の状況 - ZOZO TECH BLOG
はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています。以前の記事ではCSS in JSの技術選定をした際の背景や課題について紹介しました。 techblog.zozo.com その後、「ZOZO Tech Meetup - Web フロントエンド」でおよそ1年後の状況を簡単に共有させて頂きました。 speakerdeck.com 今回はZOZO Tech Meetupでお話した内容に加えて、CSS in JS導入から2年後の現状を改めて紹介したいと思います。 CSS in JS導入後の運用状況 ZOZOTOWNの開発体制は、Webフロントエンドだけでも5つのチームが存在し、さらに外部の業務委託メンバーも加えると、開発に携わるメンバーは執筆時点でのべ50名を超
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
フロントエンドの状態管理の改善に対する取り組み
こんにちは！株式会社COMPASSの井上です。プロダクト開発ユニット、システム開発部、アプリケーション開発チームに所属しています。普段はキュビナマネージャー（QM）のフロントエンドエンジニアとして、新規機能の開発、既存機能の改修などを行っています。海外を放浪することが好きで、コロナの時には一度断念せざるを得ませんでしたが、最近ではベトナムやタイに滞在していました。今後は東南アジアの様々な国を訪問してみたいと思っています。 本記事では、キュビナのフロントエンド開発における状態管理について、現状抱えている課題とその解決方針について書いていきます。現在取り組み中の内容になっており、ある程度大きな方針については検討をしているものの、解決までの道のりはまだ少し長いかなという状況です。ですが、少しでも共通の課題を抱えている方々の参考になればと考えています。 この記事はこんな方におすすめ キュビナ（特に
はじめに 今回のDeveloper Siteリデザインの目的は英語のコーポレートサイト（https://nulab.com/ ）とのUIを合わせることでした。旧Developer Siteのヘッダーやフッターなどの共通パーツは古いデザインのままだったため刷新する必要がありました。 旧Developer Siteのトップページ Developer Siteのトップページ 使用した技術 今回使用した技術は、静的サイトジェネレータであるAstroとユーティリティファーストのCSSフレームワークであるTailwind CSSです。 旧サイトはHugoとSCSSを用いて構成されており、今回はコンテンツはそのままで見た目のみを変更する制作だったため仕様の変更は不要でした。しかし、パフォーマンスの向上を目指し、かつ新しい技術に挑戦するためAstroとTailwind CSSを採用することにしました。 A
フロントエンドカンファレンス北海道2024 https://www.frontend-conf.jp/ X https://twitter.com/__sakito__
フロントエンドカンファレンス北海道2024の登壇資料です。
2024年8月22日、Xserverより新サービス「Xserver Static」がリリースされました。 Xserver Staticとは？「Xserver Static」は静的コンテンツの運営に特化したクラウドホスティングサービスで、高速かつ安全性に優れたサーバー環境を、広告なしで無料（！）で利用できるそうです。 Xserver Staticの特長静的コンテンツ専用サーバであるHTML、CSS、JavaScriptなどの静的コンテンツの運営に特化しており、Next.jsやAstroなどのWebフレームワークのデプロイ先としても利用できます（ただし、静的サイト生成に限ります）。もちろん、microCMSを使用したSSGサイトのデプロイも可能です。ただし、WordPressなどの動的サイトには対応していません。 CI/CDの機能はないNext.jsやAstroなどのWebフレームワークからデ
Webの潮流から考える、フロントエンドの溢れんばかりの 魅力とフロントエンドエンジニアの役目 | ドクセル
スライド概要 札幌市でフロントエンドエンジニアとして働き、Sapporo Engineer Baseの運営をしている_n13u_さんが、Webフロントエンドエンジニアの役割と魅力について、その歴史から考えるセッションです。Webの潮流を知ることでなぜを理解し、未来や自身たちの役割を考える大切さについて話します。Webの誕生期から現在までの歴史、Webフロントエンドの流れが早い理由や、Webフロントエンドエンジニアが持つべき役割について、紹介します。
新リポジトリを作るときフロントエンドで気をつけたかった5つのコト/ Five things I wanted to pay attention to on the front end when creating a new repository
2024/08/06： TSKaigiサブイベント #1 フロントエンド https://typescript-jpc.connpass.com/event/325001/ 新リポジトリを作るときフロントエンドで気をつけたかった5つのコト 鈴木 宥史 ソフトウェアエンジニア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザの履歴を操作して「戻る」ボタンで広告を出すやつについて – コーヒーサーバは香炉である
【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita
React 研修 (2024)
TypeScript入門 2024
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
tsconfig.jsonの設定を見直そう！�フロントエンド向け 2024夏
何故 jQuery ではなく React/Vue/Svelte が流行するのか？
Cloudflare Workers 入門【はじめからそうやって教えてくれればいいのに！】
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
弊社のフロントエンドのテストについて、考え方・方針・やっていることなど全部紹介します（2024年版）
ツール・ド・フロントエンド2024（フロントエンド班の開発環境や興味のある技術を調査してみた）
JavaScript Runtime とはなにか
群雄割拠のCSSフレームワークのトレンドを理解する | レバテックラボ（レバテックLAB）
AstroとTailwind CSSを使ってDeveloper Siteをリデザインした話 | 株式会社ヌーラボ(Nulab inc.)
Component-Driven Design & Development
エッジはフロントエンドなのか？ バックエンドなのか？ について考えてみる
microCMSを使用した静的サイトをXserver Staticへデプロイしてみる