React 関連の参考になる記事まとめ初学者・中級者が React をうまく使うために、参考にしてほしい良記事を集めました。React での開発で使えるものであれば Web 一般のものも含みます。 自分の記事が多めです。 Reactフロントエンド
背景 JavaScriptでは forEach という配列から要素を取り出して反復処理できる関数があります。 前の記事 JavaScriptのforEach内でbreakができない理由【備忘録】 では、 forEach の中では break が使えず、途中でループを抜けることができない理由についてまとめました。 今回はその続きとして、forEach の内部で await を使った場合に、非同期処理の完了を待たずに次の処理へ進んでしまう、という挙動について理由を調べてみました。 forEach内でawaitしてみる forEach の中で await して得られた値を配列に追加し、 forEach の直後に配列を console.log で出力する例で確認します。 for文の感覚でいえば、イテレーション中の await で都度処理を待ってくれるイメージなので、全ての要素への処理が終わったら配
{ "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16": "logo/16.png", "48": "logo/48.png", "128": "logo/128.png" }, "description": "Create markdown link from selected text", "content_scripts": [{ "matches": ["<all_urls>"], "js": [ "content.js" ] }] } manifest_version 拡張機能が使用するマニフェストファイル形式のバージョンを指定します。現在のバージョンは3です。 早ければバージョン2は2024年6月以降に廃止され、無効になりインストール/使用できなくな
RICOH THETAやinsta360といった 上下左右360度一気に撮影できる 全天球カメラというのがあります Blenderのシェーダーを利用して撮影空間をラフに再現する方法を解説したいと思います オブジェクト基準の座標と座標変換 360度カメラの撮影データは正距円座標の画像データとして取得できます また、Blenderシェーダーには 特定のオブジェクトを基準にした座標を取得する機能があります つまり うまく撮影座標とオブジェクトの位置を計算できれば 撮影空間を再現できます 空間上の任意の座標x,y,zを正距円筒図法[u,v]に変換する式は $u = atan(x/y)$ $v = atan(z/sqrt(x^2 + y^2))$ となり これをBlenderのシェーダーのノードで再現するとこうなります u,v それぞれが360度や180度をラジアン変換で除算されているのは シェーダ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに ソフトウェア開発のチームに、新しいメンバーが入ってくることはよくあります。 以前に新卒社員がチーム入ってきた場合の育成方法を紹介しました(こちら)。 今回は、新卒社員ではなく、他の会社から中途入社か同じ会社の部署異動で来る新メンバーの話です。 (エンジニアが数百人などで規模が大きい会社の場合、部署が違うと仕事のやり方が全く変わる場合があるので、今回は中途入社と他の部署からの異動を同じように「新メンバー」として扱います) 会社や部署が変わると仕事のやり方が大きく変わるため、仕事のやり方に戸惑うことが多いと思います。 本稿で
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ITエンジニアのみなさんこんにちは。 今日はIT業界でストレスなく働くということについて考えます。 GPT先生にお題を頂いてそれぞれコメントしていきます。 状況への適応の困難さ IT業界で最も多く発生しているのはこの要因かと思います。 ITエンジニアはSESなどで時間いくらで切り売りしている時給労働者ですが、簡単にはできない技術を提供することで高い単価を頂く仕事になっています。 学生さんから社会人になった人には分かりにくいですが、一定の期間内に一定の成果を出すといった点がコンビニのバイトとは大きく異なります。 現実の状況や要求
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか? 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ!」 と感じてくれたら幸いです。 本題 作りたかったものと
Array.prototypeのreduce()メソッド。 苦手な方や、ややこしいから使わないようにしているという方もいるかな、と。 確かに、他のmap()やfilter()、sort()などと比べるとちょっと難解な感じありますよね。 また、一方では、reduceマジ最強と思ってる方もいると思います。 確かに、集計することも新たな配列を作ることも何でもできますもんね。 そんな避けられたり奉られたりなreduce()について、本当はどんなメソッドなのか自分なりの解釈を書きたいと思います。 (追記:ありがたいことに色々と有益なコメントを頂いているのでそちらも是非ご参照ください。) reduce()とは reduce() メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対し
2023 年 11 月 28 日追記:第 99 回 TC39 ミーティングが行われたことに伴い記事を更新しました。また、サンプルコードにある致命的なミスを発覚し修正しました。 はじめて技術記事を書いてみました。ぐらふぃーむと申します。 ECMAScript(いわゆる JavaScript)の先端を操る TC39 に関する情報が(少なくとも日本語コミュニティでは)思うより少なかったため初回は「SmooshGate 事件」と「Array Grouping プロポーザル」を取り上げようと思います。 拙い文章なのでおかしいところがあればご指摘願います。編集リクエスト機能もご活用ください。 SmooshGate 事件 2023 年になって Array.prototype.flat メソッドを知らない JavaScript デベロッパーはほとんどいないでしょう。しかしその裏にはあまり知られていない、メ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScriptは、2022/10/01に10周年を迎えました。 ということで、それを記念してMicrosoftの中の人が振り返りのエントリーを書いていました。 以下は該当の記事、Ten Years of TypeScriptの紹介です。 Ten Years of TypeScript 2022年10月1日は、TypeScript10歳の誕生日です。 10年前の今日、2012年10月1日に、TypeScriptは初めて公にされました。 The Early Days 初めてTypeScriptが表に現れたとき、それももっともなことでし
CREATE TABLE ice_cream ( id INT NOT NULL, name VARCHAR(100) NOT NULL, type VARCHAR(32) NOT NULL, price INT, delivery_date DATE, PRIMARY KEY (id) ); INSERT INTO ice_cream VALUES (1, 'BLUE SEAL' ,'ラクトアイス', 300, '2022-09-20'); INSERT INTO ice_cream VALUES (2, 'スーパーカップ' ,'ラクトアイス', 120, '202-08-01'); INSERT INTO ice_cream VALUES (3, '北極アイスキャンデー' ,'ラクトアイス', 100, '2022-09-20'); INSERT INTO ice_cream VALU
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 動機 外資系のAmazonが展開している電子書籍Kindleでは比較的洋書の取り扱いが多いです。 Kindle Unlimitedに登録されている書籍も多く、Springerなんかも含まれているので活用しない手はありません。 そこでkindle-translatorをつくりました。 https://github.com/1plus1is3/kindle-translator これで一冊50万字あるKindleの洋書を1分で日本語PDFに変換できます。 キーボードの矢印キーでページ送りができるならKindleに限らずあらゆる電子書籍リーダ
これは8年ほど前のある日のことです。 本番環境のテーブルを淡々とtruncateし続けたことがあります。 リリース前などではなく、稼働中のサービスでした。 思い出せる限り、私のエンジニア歴において最大の「やらかし」です。 「そんなミスありえないだろ…」「どんだけ迂闊なんだよ」という感想を持たれる方もいらっしゃるかと思います。 むしろ、それが正常だと思います。しかし、当時の私はやってしまった。 ただ、それでエンジニアをやめるようなこともなく、現在では人を指導する機会も増えました。 どうしたらそんな事が起きるのか? その後、どのような対応が行われたのか? 教訓はなにか? この機に記させていただきたいと思います。 量産現場の社二病社員 当時働いていた職場では、「同じような機能を持ったスマートフォンアプリ」を量産する部署がありました。 私は、そこに配属されました。 当時、新卒2年目。社二病真っ只中
posted articles:JavaScript:51%TypeScript:18%関数型プログラミング:13%ECMAScript:13%Elm:12%
概要 試験工程をスプレッドシートで管理していたがそろそろ脱却したいと思ったので色々探してみました。 すると、同じことを考えている先駆者さんがいらっしゃったので参考にさせていただきました! 導入に至った経緯 QA体制が未成熟 3名までなら無料で利用できる テスト計画・テスト結果をエクスポートできる 入力項目が整理されているので試験表の質を一定にできる 自動化したテストケースを管理できる 手動テストと自動テストの結果を併せて一覧できる APIにより自動テストの実行結果を自動的に反映することができる etc これは、中々良いツールなんじゃないか!? ということで導入してみました 実際の導入方法を説明していきます 事前準備 以下からサインアップしてください サインアップ完了後、ダッシュボードに遷移した状態からスタートとします それぞれの設定方法は以下を参照してください 新しいプロジェクトを作成 プ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、リファクタリングが大好きなミノ駆動です。 この記事は READYFORアドベントカレンダー2021 、5日目の記事です。 これはなに? ソフトウェア開発において、設計をないがしろにすると、低凝集密結合な構造に陥り、変更容易性が低下してしまいます。 設計スキルを高め、あるべき構造を設計する……これで解決できるに越したことはありません。 しかし、認知バイアスと呼ばれる心理効果により判断を誤り、良くない設計をしてしまうことが往々にしてあります。 本記事は、設計を歪めてしまう認知バイアスを理解し、設計判断の精度向上を促すことを目的と
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く