100秒で理解するPromise
そもそも非同期処理とは？ Promiseについて知るためには、まず非同期処理について知っておく必要があります。 以下の動画で、非同期処理について100秒で解説しているので、そもそも非同期処理をよく知らないなぁという人はぜひ確認してみてください！ Promiseとは では、本題です。 Promiseとは、ES2015で導入された、非同期処理の状態や結果を表現するオブジェクトのことです。 PromiseはES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。 非同期処理はPromiseのインスタンスを返し、そのPromiseインスタンスには状態変化をした際に呼び出されるコールバック関数を登録できます。 jsprimer - 非同期処理:Promise/Async Function 例えば、出前アプリでピザを注文することをイメージしてみましょう。 ピザを注文すると、
個人開発OSSが世界に勝てなかった話
ゆーすけべー氏の「OSSで世界と戦うために」にインスパイアされました。5年間pyserdeというOSSのライブラリを開発・メンテしてきた筆者が、ちょっとだけ世界と戦ってみたけど全然勝てなかったという話です。Honoとはプロダクトの規模も開発にかける情熱も全然違うけど、単純にポストモーテムは読み物として面白いかなと思ったので書いてみます。また、5年間の開発で学んだやってよかったことや失敗などもシェアできればと思います。 pyserde pyserdeは筆者が2019年から開発メンテナンスしているOSSで、RustのserdeというライブラリにインスパイアされたPython用のシリアライゼーションフレームワークです。 以下のようにクラスを定義すると、型アノテーションに基づいたデータ変換やバリデーションのコードが内部的に生成され、強い型付けのクラスを生成することができます。強い型付けのクラスはラ
JavaScript エンジンの高速化
これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化では、バイトコードの JIT コンパイルが最初に行われます。 しかし、コンパイルには当然時間がかかります。少しでも高速化されたコードを生成するには、より多くの時間をコンパイルにかけなければなりません。コンパイルによる速度向上とコンパイルのレイテンシはトレードオフの関係にあります。 そこで、多くの JavaScript エンジンは、インタープリタと多階層の JIT コンパイラの組み合わせで構成されています。次の図は、主要な JavaScript エンジンの設計
この記事について この記事では、プログラミング初心者の大学生である(であった)私が試行錯誤しながらなんとかスター数300越えのOSSライブラリを作った過程をまとめたものです。ライブラリ自体はまだまだ発展中のためこの記事も適宜更新してく予定です。ライブラリ自体の詳細というよりも、自作OSSの認知度を上げで他の人に使ってもらうために有用そうな知見をまとめていこうと思います。 ライブラリの概要 今私が作っているのは、AIJackという、機械学習モデルがもつセキュリティ・プライバシー上の脆弱性についての各種攻撃・防御手法を実験するためのPythonツールです。既存のライブラリの多くは特定の種類の攻撃や防御に特化したものが多く、複数のタイプの攻撃・防御を組み合わせて実験するためにはいくつものライブラリを組み合わせる必要がありました。そこでAIJackでは、できる限り統一的なAPIで様々な攻撃・防御手
結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#
この記事は FastDOCTOR After Advent Calendar 27日の記事です。 はじめに ファストドクター株式会社でテックリードをしている shirauix と申します。 弊社では、ある Next.js アプリケーションを別会社のパートナーさんに外注することによって初期開発を行いました。ある時点からこのシステムを内製化することになったのですが、それにあたって多くの課題を解決する必要がありました。 この記事では、外注と内製のそれぞれのメリット・デメリットや、内製に切り替える際にどんな苦労があったのかについての赤裸々な事例をご紹介します。 対象となる読者 外注で初期開発したシステムを内製に切り替えてメンテナンスしようとしているエンジニアの方 新しくシステムを開発したいが、外注と内製のどちらを選択すべきか悩んでいる方 外注と内製の違い 外注するか内製するかはあくまで手段の話であ
Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を送っていた。 その過程で、こんなようなことを考えるようになったので、今回はこの辺りの話を書き残しておこうと思う（何回か X に同じ旨の POST は上げていたけど、一回もちゃんとまとめてなかったので）。 RSC がない頃の、別の言い方をすると getServerSideProps を使っていた頃の、Next.js におけるアプリケーションの設計は、トラディショナルな MVC にかなり近しい。 ここでいう MVC は、Sp
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
サイゼリヤのモバイルオーダーの技術スタックが判明→「これだけ枯れた技術でシンプルに構築すれば保守はだいぶ楽になる」様々な感想が集まる
西村/learningBOX/競プロｱｶ @ynishi2015 技術スタックが古いとかどうでもいいけど、サポート切れてるバージョンを一般公開向けのサービスに使ってるのは良くない。そして、バージョン情報を公表してるのも良くない。サポート切れてる切れてないにかかわらずPHPのバージョンとかを外に見せちゃだめ。（たぶんヘッダーに出てるんだろう。 x.com/igz0/status/18… JJ @0xjj_official まぁこれ別に要件に対して悪い選択肢ではないと思うんだけど、自分はコンポーネントを作るのも、サーバーサイドも慣れたTypeScriptで書きたいと言う気持ちからRemixで全部書き切っちゃうか、Vite + Reactのフロントエンドと、Hono on Cloudflare Workersとかにするだろうな。 x.com/igz0/status/18…
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
はじめに ニコニコ生放送でフロントエンドを担当している misuken です。 今回は関心が分散してしまう理由やその原理、この問題に対する適切な対処法を通して、package by feature の合理性や、そこで重要になってくる関心の単位などについて解説していきます。 規模の大きなものを扱っている方、分類が苦手な方、分類に関して悩みを感じている方には特に有用です。 前提 Reactでコンポーネントを管理する例で説明します 当然React以外の様々なディレクトリ構成でも応用できます BCD Design の概念も覚えておくとより体系的に理解できます 精度の高い明名ができれば、分類の効率も精度も上がります 現実世界で捉える関心の分散 通常、自宅や職場でトイレに行くとき、同じフロアや同じ建物内のトイレに行きます。 もしもトイレだけの建物が隣に建っていて、そこに行かなければならないとなったらと
新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。 従来のフロントエンドのテストの手法は Testing Libra
はじめに 私は他人のコードをレビューしたことも自身のコードを他人にレビューしてもらったこともない初学者として現在のプロジェクトに加わりました。そこから現在までの2年間毎月10から20ほどのプルリクエストをレビューし、またチームメンバー内で読みやすいコードについて議論することで、徐々に読みやすいコードを書くためのポイントが掴めてきました。 これらの経験を通じて、私が現在考えている読みやすいコードを書くためのポイントを本記事にまとめていきます✍️ 前提 言語はJavaScriptで、レガシーな環境での手続き的なJavaScriptを想定しています。 「JavaScriptの文法やメソッドは理解してきたけど、より読みやすいコードの書き方がわからない」と感じている初学者向けです。 筆者は一般的なコーディング規約や設計原則についての書籍や資料をほとんど参照していません（読んだことがある本と言えばリー
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
まず Container より始めよ
https://yojo.connpass.com/event/294169/ のイベントの登壇資料です。 React のコンポーネント指向開発について、いくつかの誤解があります。（またはかつてありました。）これらの誤解を解きながら、「一つのコンポーネントが複雑で長大になる」「多くのコードジャンプを要して、全体像をつかみにくい」状況に陥らないためのコツを「Container コンポーネント」に着目して解説します。
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
次期Python、ついにJITコンパイラ搭載の見通し。「copy-and-patch」と呼ばれる新たなJITコンパイラの仕組みとは？
次期Python、ついにJITコンパイラ搭載の見通し。「copy-and-patch」と呼ばれる新たなJITコンパイラの仕組みとは？ 機械学習やAI処理の分野を中心に非常に高い人気のプログラミング言語である「Python」の次期バージョンに、処理速度の向上を目指したJITコンパイラが搭載される見通しです。 このJITコンパイラは、PythonコアデベロッパーのBrandt Bucher氏が提案し、実装しています。 そしてPython Software FoundationのフェローであるAnthony Shaw氏がブログ「Python 3.13 gets a JIT」で、このJITコンパイラについて解説しています。 これらの情報を元に、PythonのJITコンパイラがどのように実装されようとしているのか、少し紹介していきましょう。 RubyもJavaScriptもJITが高速化を実現してき
JavaScriptパッケージシステム「npm」は巨大なバグを抱えていると指摘し、新たなパッケージシステムを開発する「vlt」。npm作者らの参加を発表
JavaScriptパッケージシステム「npm」は巨大なバグを抱えていると指摘し、新たなパッケージシステムを開発する「vlt」。npm作者らの参加を発表 npmに代わる新しいJavaScriptのパッケージシステム「vlt」（vōlt：ボールト）を開発しているvlt technologyは、同社にnpmの作者であるIsaac Z. Schlueter氏、npmのスタッフエンジニアリングマネージャであったDarcy Clarke氏、npmのCLIチームであったRuy Adornoらが参加すると発表しました。 Node.jsとnpmが作ったJavaScriptのエコシステム サーバサイドでJavaScriptを実行可能にしたNode.jsの登場と、そのNode.jsを基盤にJavaScriptのアプリケーションやモジュールなどをパッケージングして登録し、自由にダウンロード可能にしたレジストリで
フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
Why I Won't Use Next.js
You’ve got a new project to work on. Or you’ve got an existing project you’re motivated to upgrade to a more modern approach. Or perhaps you’re dissatisfied with your current modern framework or second-guessing yourself and you’re investigating alternatives. In any case, you’ve got a decision to make. There are lots of “modern” frameworks to choose from. Even if you’re not facing this choice right
TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。Effect-TS は、以下のような特徴を備えています。 並行性（concurrency）：Fiber ベースの並行モデルにより、高いスケーラビリティと低レイテンシを実現 コンポーザビリティ（composability）：小さく再利用可能なパーツを組み合わせることで、メンテナンス性、可読性、柔軟性の高いソフトウェアを構築する リソースの安全な管理（resource-safety）：処理が失敗したとしても、安全にリソースを開放する 型安全性（type-safety）：TypeScript の型システムを活用した型推論と型安全性に焦点を当てている エラー処理（error handling）：構造化された信頼性の高い方法でエラーを処理する 非同期性（asynchronicity
昨日、OpenAIが生成AIの新しいモデルであるGPT-4oを発表しました。消費するトークン数の節約や、音声合成機能の改善、応答速度の向上など着実な品質改善を見せているようです。私も、特に音声合成（Text To Speech）の表現力について非常に興味を持っています。 私は以前、「OpenAIのGPT-4 Turbo with visionを日本語OCRとして使ってみる」で、GPT-4 Turboの画像認識機能の日本語OCRについて検証を行いました。その当時は、既存のコグニティブAI APIに比べて認識精度が十分でないという評価をしています。とはいえ、その後に出てきたClaude 3 Opusは驚くべき認識精度だったので、OpenAIも巻き返す可能性は十分にあると感じました。Azure OpenAI Serviceを使っている場合は、Vision enhancementという既存のコグニ
どうもエラーを出すもしくはエラーが出るのが怖いという人がいるみたい。例えば改修を行うときに既存部分でエラーが出ないことを最優先にして増築を行いいびつな構造を生み出すとか、単純に例外を全然使わないとか。エラーが出ると、「うわ、エラーになった。手間かけさせやがって面倒だなぁ…」みたいな感覚があって、とにかく自分がコードを書くときも一切例外を投げないというスタンスをとりがちなのかもしれない。 私はここで、適切にエラーが出てくれるのはむしろ喜ばしいことであり、自分がコードを書くときも積極的にエラーを出すようにすべきだ、という主張をする。 関数定義のドキュメンテーションの一部 ある関数の中身で一番最初に書くべき処理は何か、それは引数のチェックをして条件を満たさなければエラーを出すことである。例えば文字列は特定の形式になってなければならないとか、数値に最大値最小値があるとか、これらは関数の入力の前提条
認知症の症状を知れば心構えが変わる。『マンガ ぼけ日和』を通じて矢部太郎さんが考えたこと - lala a live(ララアライブ)│フォーネスライフ
自分の家族がもし認知症になったら──。そんな可能性について一度でも考えたことのある人は少なくないと思います。しかし、実際の認知症の症状や進行の仕方についてはよく知らず、漠然と不安を感じている方もいるのではないでしょうか。 芸人・漫画家の矢部太郎さんは、2023年2月に『マンガ ぼけ日和』（かんき出版）を発表。作中では認知症を患った登場人物の日常から看取りまでが春夏秋冬になぞらえて描かれ、認知症の症状や患者への接し方について親しみやすいトーンで知ることができます。 執筆に当たっては、グループホームも実際に見学されたという矢部さん。制作を通して、認知症のイメージはどのように変化したか、今後、高齢の親世代の介護や認知症についてどう向き合おうと考えているか。また、認知症などの疾病リスク予測についてもお話を伺いました。 フォーネスライフが提供する疾病リスク予測サービス「フォーネスビジュアス」では、2
こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、
はじめに WebAssembly (略して Wasm) では WASI や WIT、 Component Model など様々な仕様があります。 それぞれが登場した背景、モチベーションなどを理解することでなんとなく概要を掴んでいくことができるのではないかと考えたため、過去・現在・未来と時間軸で整理してみました。 まず Wasm とその特徴に関して簡単に紹介した後、Wasm の過去として生まれた背景やモチベーションを紹介します。 そして現在の Wasm がなぜ注目を集めているのか、そして現在策定中の仕様と目指している未来について紹介します。 WebAssembly とはなにか WebAssembly はスタックベースの仮想マシン用バイナリ命令フォーマットの仕様です。Wasm と略されます。 Wasm ファイル(Wasm モジュール)は一般に .wasm という拡張子で表されるバイナリファイル
土日で完成！ 趣味のラズパイ ChatGPTで遊ぼう——ラズパイで作ったデジタル時計に天気情報も表示させる｜fabcross
天気予報をデジタル時計に加えるには、外部の天気予報APIを利用する必要があります。一般的に利用されるのはOpenWeatherMap APIですが、これを使用するにはAPIキーが必要です。APIキーはOpenWeatherMapのウェブサイトで無料で取得できます。 以下の手順では、OpenWeatherMap APIを使用して現在の天気情報を取得し、それをOLEDディスプレイに表示する方法を示します。このコードは前の時計と曜日を表示するコードに基づいています。 ### 必要なライブラリのインストール - 天気情報を取得するために`requests`ライブラリを使用します。このライブラリがまだインストールされていない場合は、インストールしてください。 pip3 install requests ### OpenWeatherMap APIの設定 1. OpenWeatherMapの[公式サイ
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
オラクルはリレーショナルデータベース「MySQL」の新バージョンとなる「MySQL 9.0」をリリースしました。 MySQLは現在、数カ月ごとにリリースされ積極的に新機能が追加されるイノベーションリリース（Innovation Release）と、長期で安定して利用されることを想定して2年ごとにリリースされる長期サポート（LTS：Long Term Support）版の2つに分かれてリリースされています。 現在のLTS版は今年（2024年）4月に登場したMySQL 8.4です。 そして今回リリースされたMySQL 9.0はイノベーションリリースに該当します。最新機能をいちはやく試したい開発者やユーザーのためのリリースです。 MySQL 9.0の主な新機能 MySQL 9.0のドキュメント「What Is New in MySQL 9.0」から、新機能「JavaScriptストアドプログラム
GitHub - webui-dev/webui: Use any web browser as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.
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
アジャイルプラクティスガイドブック チームで成果を出すための開発技術の実践知 チーム・組織にプラクティスを導入し、根付かせるために！ 116の手法を一冊にまとめた“実践”の手引き チームでのアジャイル開発には、開発技術やツールなどの「技術プラクティス」の活用が重要です。 プラクティスはそれぞれの目的や役割を意識することで効果を発揮します。しかし、目まぐるしく状況が変化する開発では、当初の目的を忘れて、プラクティスに取り組むこと自体が目的化してしまうチームも少なくありません。 本書は、チーム・組織でアジャイル開発に取り組んできた著者が、プラクティスの効果的な選択・活用のしかたについて、自らの実践経験に基づいてまとめたガイドブックです。 架空の開発現場を舞台にしたマンガとともに、チーム開発の様々なシーンで役立てられるプラクティスを、幅広くかつわかりやすく解説しています。開発現場に備えておけば、
この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまうことで 外側の for 文のカウントにバグが発生し 期待した動作にならない例になります。 私も他の人が作成した web アプリで このバグを見かけたことがあります。 for の変数を宣言する場合 必ず let で宣言して下さい。 var でなければ正常に動作しないのは 構造的欠陥のハズです。 let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; for(let i = 0; i <
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
日本語におけるtext-wrapプロパティの運用
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。
スターの多い順にブコメを並び替える
FANZAの検索結果から熟女を除外するブックマークレット がうまく動いたので、気を良くしてはてなブックマークのコメント欄をスター数順にソートするブックマークレットを作りました。 作った動機は、「注目コメントに入りきれなかったちょっといいコメント」をサクサク探したいから。結果として建設的コメント順位付けモデルを無効化していますが、あのアルゴリズムには特に不満は特にありません。 ブックマークレット javascript: (async () => { const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); document.querySelector('.js-bookmarks-sort-tab[data-sort="recent"]').click(); window.scrollTo(0, document.
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
もっと log/slog を使おう
はじめに この記事は Go アドベントカレンダー 2023 の最終日 25 日目の記事です。 皆さん log/slog 使ってますか。便利なのでぜひ使ってください。 slog は構造化ログを出力する為のパッケージで Go 1.21 で導入されました。これまでも zap や zerolog といったサードパーティ製のロガーを使う事で構造化ログを出力する事ができましたが、構造化ログを出力する機能が Go の標準ライブラリになりました。 slog とは 通常の log パッケージは、時刻とメッセージの単純な出力になります。
いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで z-index の値に calc(infinity) を指定すると、絶対に最前面に表示させることができます。 infinity は calc() の中で使用できる特殊な値です。名前の通り最も大きな値を表します。 そのため、どんなに大きな z-index の値を指定されても、calc(infinity) が最も大きな値になるため、最前面に表示されるわけですね。
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
2023/09/23に開催されたServerlessDays Tokyo 2023で登壇した資料です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者大学生が作った機械学習ライブラリがGitHubでスター数300を超えた話 - Qiita
外注で初期開発したシステムを内製化するためにやったこと
React Server Components と GraphQL のアナロジー
Vite ってよく聞くけど何なんですか？ あれは
俺の管理画面 2023年冬 - KAYAC engineers' blog
アンチパターンを理解して package by feature へ
新しい UI テストの手法を提供するテストライブラリ SafeTest
【JavaScript】読みやすいコードの書き方 - Qiita
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS
OpenAIのGPT-4oを日本語OCRとして使ってみる
エラーが出たら喜べ。エラーをちゃんと出せ。 - Qiita
何故 jQuery ではなく React/Vue/Svelte が流行するのか？
WebAssembly の過去・現在・未来 - Qiita
すぐ使える Cloudflare Workers！
MySQL 9.0登場。 JavaScriptストアドプログラムが利用可能に、ベクトル型もサポート
【2024年】ITエンジニア本大賞まとめ - Qiita
【熱望】javascript の for 文で var i を宣言するのはやめて下さい - Qiita
増える独り身高齢者、民間サービスでトラブル 政府が調査、対策検討：朝日新聞デジタル
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する