はじめに forEachでawaitを使おうとしたら、エラーになり、どうやったらループでawaitを使えるか調べたので、簡単に記載します。 await とは？ awaitは非同期処理が終わるまで処理を止めておいてくれる便利なもの jsはawaitやpromiseを使わないと、処理が終わる前に他の処理を実行してしまうので、直列に処理を実行したいときなどは利用すると良い // 非同期関数 async function asyncTask(name) { console.log(`Task ${name} started.`); await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒間スリープ console.log(`Task ${name} completed.`); } // メイン処理 async function m

アクセシビリティを考慮したマークアップをした経験がある方は、aria-labelやaria-labelledbyについてご存じでしょう。これらは、要素にラベル付けするためのWAI-ARIAプロパティです。多くの場合、要素のアクセシブルな名前 (accessible name) を決めるために使われます。 aria-labelはラベルを直接文字列として指定するプロパティで、aria-labelledbyはIDを通じて他の要素をラベルとして指定するプロパティです。その使い分けについては、仕様書[1]で以下のように説明されています。つまり、可能な場合はaria-labelledbyに寄せるべきだということです。 If the label text is available in the DOM (i.e. typically visible text content), authors SHOU

はじめに 疲れたら山頂を見るな。振り返ろ こんにちは、Watanabe JIn(@Sicut_study)です。 今回は「努力する」「継続する」ために知っておくべき考え方やテクニックについて紹介していきます。 あなたは努力が得意でしょうか？ 努力ができる/できないは才能で決まっています そしてこの才能は後天的に身につけられるものとなっています。 私の周りをみてみると「継続」が得意な人はかなり少ない印象です。 つまり世の中的にも、継続が得意という人は、得意でない人よりも圧倒的に多いのではないかと思います。 多くの人が苦手とする「続ける」という行為ですが、これには考えとやり方が存在していて、これらを理解して実践することができれば才能が身につくようになります。 想像してみてください。あなたが続けていこうと意気込んだけど3日で終わってしまったこと、今でも続けていたらどんな未来が待っていたでしょうか

以下の記事などで既にかなり話題になっていますが、ぼくも触ってみました(使い方などの詳細はこちらの記事を参照してください)。 結論としては、マジすごくてかなり衝撃的です。すべてのホワイトカラーワーカーにとって、かなりディスラプティブなツールになるのではないでしょうか。 自分はコンサルタントでして、これまでにたくさんの資料を作ってきてスキルを磨いてきたつもりだったので、AIポン出しでここまでのものが出てきてしまうと、正直、人生について考えさせられちゃいますね。 この記事では、Napkinを使ってどういう資料ができたのか共有したいと思います。 ポストモーテムの勉強会をしたいなと思っていたので、まずはChatGPTで資料の骨子を出力し、それをNapkinに入力してみました。それで得られたのが、以下の資料です。 スライド1: タイトルスライド タイトル: ポストモーテムの教科書 副題: SREにおけ

GPT-4oの入力コンテキストは殆ど嘘だということ。 例えば、DRMをクラックした本とかを読ませて「なんて書いてある？」みたいなことを聞いてみると分かるのだが、後半については殆ど無視される。128Kトークンという巨大な入力コンテキストウィンドウを持っていることになっているが、これは殆ど嘘、ごまかしであり、出力を高速化するために「渡されたものの前のほうだけ読んで適当に回答する」ということをやってくる。でもこれについて問題視している人をほとんど見たことがないので、とっくにみんな生成AIには飽きていて使ってないんだと思う。 現実的な対策としては、RAGをがんばるか、あるいはテキストを分割して適切なサイズにしてから渡していって最後にその結果を統合するか。それか「OpenAIさんはそのレベルで信用できないことをやってくる」ということを前提にそもそも使わないか。

議論とは何か。 日本国語大辞典によれば、「互いに、自己の意見を述べ、論じ合うこと。意見を戦わせること。」 と定義されている。 ビジネスにおいては、もう少し拡張してもいいかもしれない。 意見を戦わせる目的は２つある。 一つは 「意見を戦わせることで、どの意見が優れているか（正しいか）、判定すること」 そしてもう一つは 「意見を戦わせることで、よりよい意見を生み出すこと」 この２つを目的とした議論を、「建設的な議論」と呼ぶことにする。 ほとんどの人は建設的な議論ができない しかし。 私は様々な会社で議論を見聞きしてきたが、「建設的な議論」ができる人はそれほど多くない。 組織内における議論のほとんどは、「自分の地位を上げること」と、「相手を貶めること」に使われてしまうからだ。 議論の目的が「意見」を出したり、質を高めることではなく、人の評判を操作するだけに使われる状況。 これが「不毛な議論」だ。

こんにちは！サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。 サイボウズの技術ブログの夏フェス・CYBOZU SUMMER BLOG FES '24が始まりました！企画の一環として、フロントエンドの記事が今日から20日連続投稿されますので、みなさんお楽しみに！ 今回は、コーディングに手放せない存在の1つ「配列」をテーマに、JavaScriptの配列操作の中でも普段使いしやすいものをピックアップして、細かいテクニックや比較的新しい話を交えながらお届けします。 身近ながらも今まで見落としていたポイントを拾ってもらえたらと思います！ // 凡例 const arr = ["a", "b", "c"] arr // console.logした出力結果 ← 出力結果に対するコメント

ゲームや電光掲示板などで見かけるビットマップやドットの懐かしいフォント、デジタル時計や電卓などで見かける７セグメントや14セグメントのフォントなど、ピクセルフォントの日本語フリーフォントを紹介します。 ゲームやアプリをは...記事の続きを読む

〝流しのEM〟として、複数企業の採用・組織・制度づくりに関わる久松 剛さんが、エンジニアの採用やキャリア、働き方に関するHOTなトピックスについて、独自の考察をもとに解説。仕事観やキャリア観のアップデートにつながるヒントをお届けしていきます！ 「フリーランスエンジニア」と聞いて、どんな人をイメージしますか。 一昔前であれば、「バイネームで仕事が取れるプロ中のプロ」といったイメージが一般的でした。日系大手企業でも「パフォーマンスが突出しており、ぜひ事業に貢献してほしいが給与レンジが合わないスペシャリスト」についてフリーランス契約がなされていたりします。 「組織の看板がなくても腕一本で食べていける実力があるから〝フリーランス〟なんだ」という共通認識があったはずなのですが、最近、その前提が崩れ去りつつあるのを感じます。 そこで今回は、最近フリーランスエンジニア界隈で耳にする「ちょっときな臭い話」

このように、REST の設計原則に従って API を構築することで、ほとんどの API 設計は直感的に、かつ問題なく行うことができます。 デザインパターンの紹介 ここからが本題です。大抵の場合、上の例で示したような API 設計で十分です。 ただ、複雑な要件では、上のような典型的な API 設計のみでは良いAPIを設計するための4つの特性を満たせないことがあり、そのような場合のためにデザインパターンが有効です。 カスタムメソッド 概要 カスタムメソッドは、標準的な CRUD 操作（作成、読み取り、更新、削除）では対応できない特定の操作が必要になる場合に便利です。例えば、メールの送信や即時の文書翻訳など、通常の create や update メソッドでは処理が難しい操作がこれに該当します。 参考までに、以下に Google が出しているカスタムメソッドの記事を示します。 実装例 以下は、カ

リンク Wikipedia スフィンクス (ネコ) スフィンクス（英: Sphynx）は、ネコの品種のひとつ。無毛のネコとして知られるが、まったくの無毛ではなく、極めて短い産毛に覆われている。また、まばらに毛が生えている個体も存在する。ヒゲはない。かつては「カナディアン・ヘアレス」とも呼ばれていた。 平均体重は 3.5-7 kg。気質は陽気で活発であり、人なつっこく社交的である。被毛に覆われていないため、暑さにも寒さにも弱く、室内で飼う必要がある。また皮脂を吸い取る被毛がないので皮膚が脂っぽくなりやすく、飼い主は毎日皮脂をふき取ってやる必要がある。ほかの猫 2 users 23

真顔のクロエ @magaodemukuchi たくさんのリアクションありがとうございます🥹 たくさんの香箱座りの亜種もありがとうございます🥹この世の全猫ちゃんに幸あれ🥹 #香箱座りの亜種 pic.twitter.com/GDO0ukhuXt

リンク みんすり情報局 進化するフルカラー3Dプリンター、その造形方式と最新の事例を解説！ 目次 1 フルカラーの3Dプリンターとは、どのようなもの？1.1 3Dプリントのカラー表現は素材の色、または染色で決まる1.2 造形方式ごとに異なる特徴を理解しよう1.2.1 FFF方式1.2.2 SLA方式1.2.3 マテリアルジェット方 2 users 44

CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance  |  CSS and UI  |  Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。

最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。

はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。

useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#

⚪︎ : 無制限のBasic、限度ありのAdvance △ : 限度ありのBasic Zed Atomの製作者達によって作成されたOSSのRust製エディタ。現状はMacOSのみで使用可能。そのほかのOSも現在対応中。パフォーマンスを重視しているので軽い。AIは搭載していないが、Copilotを使用することは可能。 Github : zed-industries/zed インストール方法 https://zed.dev/download からインストールしてください。(MacOSのみ) 使用方法 以下に詳しく書かれていました。 思考のスピードでコードを書け！！Rust製の次世代エディタ「Zed」 Positron VSCodeをベースにした次世代データサイエンスIDE。 インストール方法 https://github.com/posit-dev/positron/releases からイン

個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお