GraphQL あるいは React における自律的なデータ取得について今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
Storybook と Vitest の統合したコンポーネントテスト
Note Storybook Vitest Plugin は 2024 年 10 月 5 日現在実験的な機能として提供されており、API が将来にわたって変更される可能性があります。 Storybook v8.3 より、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。今までも composeStories 関数で作成済みのストーリーを使いまわし、Jest などのテストランナーを用いてたテストを行うことができましたが、複雑なセットアップが必要でした。 また Vitest では ブラウザモード により、ヘッドレスブラウザ上で Storybook のテストを高速に実行できる点が特徴です。ヘッドレスブラウザ上でテストを実行することにより、例えば jsdom や happy-dom などのシミュレーションを使用する方法と比べて、実際のブラウザでの挙動をよ
夏太り対策に！医師監修「肩甲骨1分体操」 50代でベストボディを手に入れた吉原潔さん伝授(動画あり) | NHK
とにかく暑かったこの夏。運動不足や水分のとり過ぎで太った！という方もいらっしゃるのでは？ 今回は、50代になってからトレーニングを始め、理想体型を手に入れた整形外科医・吉原潔さんによる、夏太り解消法をご紹介！代謝がアップする“肩甲骨1分体操”をご紹介します。 引き締まった体は何歳からでも手に入れられる！ 教えていただいたのは、整形外科医でフィットネストレーナーの吉原潔さん（61）。 50歳の吉原さん 55歳でベストボディコンテスト優勝 実は吉原さん、40代の頃はぽっちゃり体型。 しかし、このままでは医師として患者さんに示しがつかないと50歳で一念発起し、トレーニングを開始したのだそうです。 運動の仕方や食事の方法を徹底的に学びなおし、55歳の時に、引き締まった健康美を目指す『ベストボディ』コンテストで優勝。 吉原さんによると、夏は冬よりも太りやすい季節だと言います。
事業譲渡を受けたアプリとの統合で失敗、 そしてユーザーからの評価回復に至るまで - ENECHANGE Developer Blog
こんにちは、EV充電サービス事業部でFlutterエンジニアをしている小林です。 2023年12月に弊社とSmart Shopping様と共同で「IoT系のプロダクト開発の裏側」というテーマのオフライン勉強会を開催いたしました。その中で「事業譲渡を受けたアプリとの統合で失敗、 そしてユーザーからの評価回復に至るまで」というタイトルで発表した内容を、改めてブログ記事としてまとめます。また、その後日談についても触れようと思います。 enechange-meetup.connpass.com 背景 ENECHANGEでは2022年春にEVの充電サービスとアプリをローンチしました。このアプリのコアとなる機能はもちろんENECHANGEが設置する充電器で充電することです。 しかし私たちが目指しているのは、すべてのEVドライバーにとって価値のあるアプリになることです。そのためにも自社設置の充電器だけで
Cybozu Frontend Weeklyの記事一覧
articlesTrendingAlltimeLatest🎸Webアプリの主流がCSRからSSRに？など : Cybozu Frontend Weekly (2023-02-07号)nus3inサイボウズ フロントエンド2023/02/09 65🎸Remix v3 の今後についてなど : Cybozu Frontend Weekly (2024-05-21号)mugiinサイボウズ フロントエンド2024/05/22 62🍮Next.js 15 のリリースなど: Cybozu Frontend Weekly (2024-10-22号)mehm8128inサイボウズ フロントエンド2ヶ月前 49🐌React 19 Beta の公開など : Cybozu Frontend Weekly (2024-05-07号)mugiinサイボウズ フロントエンド2024/05/08 40❄️Tai
React 19 Beta の公開など : Cybozu Frontend Weekly (2024-05-07号)
こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 5 月 7 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 React の fetch() 拡張が削除 React に標準で含まれていた fetch() に対するパッチが削除されました。 一方で、Next.js では同様の対応を別のパッチとして取りこむことで従来通りの挙動を維持するようです。 Google、サードパーティ cookie 廃止を 3 度目の延期 年内で完了予定だった Chrome での Third Party Cookie 廃止について、延期が発表されまし
メルカリ ハロの技術スタックとその選定理由 | メルカリエンジニアリング
こんにちは。メルカリ ハロのSoftware Engineer (Engineering Head)の@napoliです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の2回目を担当させていただきます。 2024年3月上旬にメルカリ ハロという新しいサービスが公開されました。メルカリ ハロは好きな時間に最短1時間から働ける「空き時間おしごとアプリ」です。 この記事ではメルカリ ハロを作るにあたり、どういった技術スタックやアーキテクチャを選定したのか、さらにその背景と意思決定をご紹介したいと思います。 この記事で得られること メルカリ ハロで採用されている技術スタックやアーキテクチャの全体像 その意思決定の理由とプロセス これから新規サービスを立ち上げるうえでのヒント 主な技術スタック メルカリ ハロで利用されている主な技術スタックは以下のとおりです。 バッ
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示するそのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
元々違う作品の曲だったのに転生した曲
例えば、One More Time,One More Chance（山崎まさよし主演映画）→秒速5センチメートル secret base（キッズ・ウォー）→あの日見た花の名前を僕達はまだ知らない などは有名すぎるほど有名だけど、他にもあると思うので有名無名問わず知ってる人は教えて下さい 【追記】 正直、投稿時は何億回もこんなお題出てるやろし良くて20くらいかな・・・て思い投稿したので、ブックマーク300超えでありがたいやら半信半疑やらで不思議な気分ですｗ すでに一部のとこにコメントしましたが、主の出しゃばり感がウザいのでｗ 一旦辞めて投稿がある程度落ち着いたらこちらにまとめて追記しようと思います。 投稿した方もブックマークの方も、拡散してくれたみなさん・・・まとめてになりますが本当にありがとうございます！ なおまだまだ募集しておりますのでこれは違うかな？ていう思いつきでも軽率にコメント頂け
React 18によるアプリケーションのパフォーマンス向上について - Vercel
React 18では、アプリケーションのレンダリング方法が根本的に変わる「concurrent（同時）」な機能が導入されました。これらの最新機能がアプリケーションのパフォーマンスにどのような影響を与えるかを探ってみましょう。 まずは、長いタスクと対応するパフォーマンスの測定について基本を理解しましょう。 メインスレッドと長いタスク ブラウザでJavaScriptを実行する際に、JavaScriptエンジンは「メインスレッド」と呼ばれるシングルスレッドの環境でコードを実行します。JavaScriptコードの実行だけでなく、メインスレッドはクリックやキーストロークなどのユーザーの操作、ネットワークイベントの処理、タイマーの実行、アニメーションの更新、ブラウザの再レイアウトや再描画の管理など、他のタスクも処理します。 メインスレッドはタスクを一つずつ処理します メインスレッドはタスクを一つずつ処
高単価のフリーランス案件で仕事するときに意識していたこと｜Katsuma Narisawa
フリーランスのWebエンジニアとして仕事をする上で、いつも気をつけていたことをつらつらと書いてみます。 フリーランスやっている人、興味ある人の参考になれば。 自分についての情報フリーランスのWebエンジニアを2年半 当時はRails, Vue.js, Reactがメイン(2018-2020) 情報系の大学院 → メガベンチャー2年 → スタートアップ2年からの独立 今はSALESCOREのCTO 単価は相場の最高額くらい お金の話あんまりしたくないが、みんな興味あると思うので一応 一度お世話になったFindy Freelanceさんの募集を数年ウォッチして、自分がFindyさんで受けた案件が頭を抜けて最高額だった ややボカすため最低限の目安だけ書くと、時給1万円〜（人月160万円〜）以上 技術顧問業を上手くやると、もっともらえると思う 準委任契約、月N時間稼働って感じで契約 シードA〜シリ
Webが日常に溶け込んだ新時代で、Webフロントエンドのキャリアの未来を考えてみる | CyberAgent Way サイバーエージェント公式オウンドメディア
原 一成 (ハラ カズナリ) サイバーエージェント所属のテックリード、Web Developer。Amebaに関連する機能開発や設計、開発環境構築、アクセシビリティ、パフォーマンス面からの品質向上やデザインシステムの構築の傍ら、サイバーエージェントのDeveloper ExpertsとしてWebアプリケーションの発展に従事している。 野口 直寛 (ノグチ タダヒロ) 株式会社AbemaTV所属の Web エンジニア。Web Browser チームのプロダクト責任者・テックリードとして、アプリケーション全体の設計に携わりながら、信頼性、パフォーマンス、開発生産性の向上に力を入れている。また、Muddy Web や Web Speed Hackathon などの技術イベントの主催メンバーも務めている。 ── Webフロントエンドは技術トレンドの変化が激しい印象です。お二人がサイバーエージェント
LINE NEWS フロントエンドの自動テストの改善
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog この記事は UIT 新春 Tech blog 2023 4日目の記事です。 こんにちは。LINEフロントエンド開発センターの幾野(ikuno)です。普段は LINE NEWS のフロントエンド開発をしています。 LINE NEWS では昨年テストをたくさん書いた 昨年 LINE NEWS ではたくさんテストを書きました。当初 78 ファイルだったテストファイルは半年で 150 ファイルに倍増しました。 テストカバレッジも statements 33.6% から 64.4% まで改善しました。 昨年当初のテストカバレッジ 現在のテストカバレッジ 今回はどういったテストを書いたらうまくいったかについて書いていきます。 テストは意図
【JavaScript】コードの見通しを良くする為に意識している事10選
普段コード書いている中で見通し（可読性）を良くするために意識していることを10個列挙しました JavaScript(TypeScript)のお話です 1.変数宣言はconstを利用する 変数を宣言するときはconstを使います。varは使わない様にします letを使うときは限定的で、実行する関数の中で変数を再代入する必要がある時に使います // 関数の外でのlet宣言はアンチパターン let strValue = ""; const method1 = () => { strValue = "method1"; }; const method2 = () => { // 関数内、再代入する処理で宣言する let setValue = "ほげ"; }; // 以下、変数strValueを利用するかもしれない // どこかで再代入されるかも分からない..
[Next.js]フロントテストのコストはStorybookで削減出来る
１．フロントテストと Storybook の活用 フロントテストのどこにコストがかかるのか バックエンドのテストはシンプルな入力と出力が多いので、テスト作成は比較的簡単です。一方、フロントエンドのテストは UI イベントや動的な要素も含まれ、複数の出力があるため、テスト作成はより複雑になります。これにより、テスト作成のコストが増大します。 生 jest で書くフロントテストと心の目 Jest は主に JavaScript のユニットテストをサポートするツールであり、UI レンダリングのテストを行うためには対応するライブラリが必要です。Jest は DOM イベントをエミュレートすることはできますが、ユーザーの操作と同様のインタラクションを再現することは困難です。機能の多いコンポーネントをテストする際に、Jest を使用するとテストコードが複雑になりがちです。そして最大の問題は、視覚的な部分
![[Next.js]フロントテストのコストはStorybookで削減出来る](https://cdn-ak-scissors.b.st-hatena.com/image/square/92b7b04788f510c30709cc61df382bfe13d5b11a/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--nAeOk0Ql--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252581%2525AE%2525E3%252582%2525B3%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252581%2525AFStorybook%2525E3%252581%2525A7%2525E5%252589%25258A%2525E6%2525B8%25259B%2525E5%252587%2525BA%2525E6%25259D%2525A5%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
ついに来る! TypeScript 5.0の新機能を全紹介 @uhyo
本記事は、TechFeed Experts Night#11 〜 JavaScript/TypeScript最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 皆さまこんにちは、株式会社バベルにてプリンシパルエンジニアをしておりますuhyoです。まもなくリリースされる予定のTypeScript 5.0の新機能が、この発表ですべてわかるように用意しましたのでぜひお聞きください。 TypeScriptのリリースサイクル まずはTypeScriptのリリースサイクルをおさらいしておきましょう。TypeScriptは3カ月に1回のリリースサイクルを採用しており、TypeScript 5.0もそのサイクルに則り、2023年3月に公開される予定です(3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
十数万レコードに耐えうるVue.jsプロジェクトを実現するためのパフォーマンスチューニング
