YAPC::Hakodate 2024での発表内容です。 https://yapcjapan.org/2024hakodate/

はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

QRコードと言えば、黒と白のドットが無機質に並んだものというのが一般的なイメージとしてあります。このQRコードに色づけしたり形を変えたりして装飾できる「qrframe」というページが公開されていたので使ってみました。 qrframe.kylezhe.ng/ https://qrframe.kylezhe.ng/ 上記のURLにアクセスすると以下のような画面が現れます。 テキストボックスに何らかの文字列を入れるとすぐに対応するQRコードが生成されます。 下部にはQRコードの表示パターンのプリセットがいくつか用意されていて、選択するといろいろなデザインのQRコードを表示させることが可能。 デザインによってはQRコードには見えないものもありますが、ちゃんとQRコードとして認識することができます。 ページをスクロールするとカラーや表示パターンを自分で変更可能。 背景色を変更する「Backgroun

こんにちは。レシピ事業部バックエンド基盤グループの石川です。 2014 年、このブログに『開発環境のデータをできるだけ本番に近づける』というタイトルの記事が投稿されました。 クックパッドでは、ユーザーさんが実際に体験している状況と近い状況を再現しながら開発することに価値があると考えています。技術的には、最初からレコードがたくさんあることによってパフォーマンス問題に気付きやすくなるなどの長所がありますし、サービス開発としても、実際のユーザーさんの体験を最速でなぞって素早くフィードバックループを回せるようになるという長所があります。 この慣習は 2014 年の記事から 10 年経った今でも続いています。一方でその実現手法については変化を続けてきました。現在のクックパッドでは状況に応じていくつかの手段を使い分けています。それらの手段については今まであまり公開されていなかったような気がするため、こ

JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の

XP祭り2024の登壇資料です

こんにちは、株式会社FP16で結構コードを書いている二宮です。 最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。 ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。 私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得する これが令和のWebスクレイピングのベストプラクティスだと思っています。 これらの方法を、目標に合わせて使い分けています。 使い分け方 CheerioでHTML解析 JavaS

こんにちは、ニケです。 皆さん、Cursor 使っていますでしょうか。 私は去年の10月末から使い続けているのであと一ヶ月で1年が経過します。時間が経つのは早いですね。 前回書いた記事（↓）から半年経ち、開発の仕方が少しアップデートされたので改めて記事にしようと思います。 ちなみにこちらの記事ではブラウザ版のClaudeも紹介していますが、Claude-3.5-SonnetがCursorで利用できるようになってからはあまり使っていません。設計の壁打ちとかでたまに使ったりするくらい。 そのため、この記事ではCursorにフォーカスを当てて紹介していきます（最後に少しだけ他に使用しているAIツールを共有します）。 なお、役割によって用途が変わってくると思うので、予め私の属性を提示しておきます。 仕様を考えたりコード書くことがメインの仕事 仕事以外でも暇なときはコードを書いている 0 → 1 で

Generate your next app with Llama 3.1 405B

はじめに 前にも別のモデルでやってる ただ o1-preview は、やり取りを重ねるよりも一発で終わらせるほうがいいらしいので、最終的なテスト全体を渡すようにした。 情報の提示方法が異なると当然結果も変わるので、 gpt-4o でも同様なことを試した。 材料 プロンプトは以下。 基本的に最初にやったときと同じ。ペアプロではないのでその部分の調整をしている - 私がテストコードを提示するのでそのテストケースをパスする最小限の実装をしてください - Vue.js のバージョン 3 と Typescript で実装を行ってください - コードのみを示してくださいコードの解説などは必要ありません - スタイリングは必要ありません - テストケースに失敗したらその内容をチャットで送信するので最小限のコードの修正をしてください - テストのコードには vitest を利用しています jest と互換

1.1.2 SREの目標と価値 SREの目標は、システムの信頼性を向上させることですが、それは単にシステムのダウンタイムを減らすことだけを意味するわけではありません。ユーザーがサービスを快適に利用できるよう、パフォーマンス、可用性、セキュリティ、スケーラビリティなど、様々な側面からシステムの信頼性を高めることを目指します。 SREの導入によって、以下のような価値がもたらされます。 システムの安定稼働と信頼性向上 運用コストの削減 開発スピードの向上 組織全体の信頼性向上 1.2 SREの原則 SREを実践する上で重要な原則をいくつか紹介します。これらの原則は、GoogleのSREチームが長年の経験から得た教訓に基づいており、SREを実践する上で指針となるものです。 1.2.1 モニタリングと可観測性 SREでは、システムの状態を常に把握し、問題が発生した場合には迅速に検知できるように、モニ

なぜ依存を注入するのか DIの原理・原則とパターン 著者: Steven van Deursen, Mark Seemann 訳者: 須田智之 表紙には.NETやC#の文字はないのですが、前の版は"Dependency Injection in .NET"で.NETを前提した本のようでした。 ただ、はじめにで 本書では、.NETとC#を用いて、依存注入に関する用語や指針を包括的に紹介し、描写しているのですが、本書の価値が.NETの外の世界にも届くことを望んでいます。 とありました。 RustのDIでなにか活かせる教えを期待して、読んでみました。 第1部 依存注入 (Dependency Injection: DI) の役割第1章 依存注入 (Dependency Injection: DI) の基本: 依存注入とは何なのか? なぜ使うのか? どのように使うのか?まず、保守容易性(maint

# Problem Statement Mr.LLM bought N items in a supermarket. The price of i-th item was A[i] dollars. Write a program that outputs the total price. # Constraints - 1 <= N <= 100 - 1 <= A[i] <= 100 (1 <= i <= N) - All input values are integer # Input N A[1] A[2] A[3] ... A[N] # Output Print the answer. # Sample Input 1 5 3 1 4 1 5 # Sample Output 1 14

これらのデータセットに含まれる画像のみを使っているため、学習画像に対する透明性は限りなく高いと考えております。もし問題のある画像が見つけたら、ご報告いただけると今後の開発に助かります。なお、同様の考え方を持って作成されたモデルとして、Stable Audio Open 1.0があります。 日本語と英語の文章がそのまま通じる画像生成を使ってみたいが使えないクリエイターの中には、プロンプトが英語であるから、使い勝手がわるいと思っている方も少なくないと思います。実際、画像生成AIに慣れている人も時には翻訳ソフトを使って入力している方もいるようです。しかし、翻訳ソフトを間に挟むことでニュアンスが変わるという問題も従来指摘されています。 そこで、本画像生成は日本語を日本人の話す感覚と近いかたちで処理し、画像を生成できるようにしました。具体的には入力テキストを処理する技術を通常の言語モデルから大規模言

こんにちは、Browncatです。 Googleは8月28日、画像生成AIの最新バージョン「Imagen3」をリリースしました。 Imagen3の画像を生成するための同社の画像生成AIサービスが「ImageFX」ですが、このImageFXをしばらく試用しましたので報告します。 Imagen3概要　Imagen3の概要は、Googleの以下のサイト によれば、 以前のモデルに比べプロンプト理解力が大幅に向上。自然な日常言語で書かれたプロンプトも理解するため、複雑なプロンプト・エンジニアリングを行わなくても、必要な出力を簡単に得ることができる 照明と構成が適切で、視覚的に豊かで高品質の画像を生成 テキストレンダリング機能の大幅な改善 データセット内の有害なコンテンツを最小限に抑え、有害な出力の可能性を減らすために、広範なフィルタリングとデータラベル付けを使用 Gemini app and we