メソッドの名付けは決して甘くない——二つの JavaScript プロポーザルが歩んだ道のり - Qiita
はじめて技術記事を書いてみました。ぐらふぃーむと申します。 ECMAScript（いわゆる JavaScript）の先端を操る TC39 に関する情報が（少なくとも日本語コミュニティでは）思うより少なかったため初回は「SmooshGate 事件」と「Array Grouping プロポーザル」を取り上げようと思います。 拙い文章なのでおかしいところがあればご指摘願います。編集リクエスト機能もご活用ください。 SmooshGate 事件 2023 年になって Array.prototype.flat メソッドを知らない JavaScript デベロッパーはほとんどいないでしょう。しかしその裏にはあまり知られていない、メソッドの名前や運命に関わる出来事があります。それが「SmooshGate 事件」です。 メソッド自体を解説する文章ならいくらでもありますのでそれを省きさせていただきます。念のた
Twitterに生えてる草を焼き払えるChrome拡張 - Qiita
クソアプリアドベントカレンダー2022の12日目の記事です。 Twitterに生え散らかっている草を焼き払えるChrome拡張を作りました。 こんな感じで焼き払えます。 使ってみたい！という方 こちらにコードと使い方を載せています。 解説 メインの仕組みは単純で、 "草" をクリックしたときにGIF画像を表示しているだけです。 全体の流れは、 bodyへのnodeの追加を監視する 追加されたnodeの中のspanタグを取得する spanタグの中に "草" という文字が含まれている場合、"草" の部分にクリックイベントを追加 "草" をクリックしたときに、GIF画像を表示する "草" を "灰" に書き換える という感じです。 要素をいくつかピックアップして具体的に解説していきます。 nodeの追加を監視 Twitterはツイートのデータを非同期で取得して表示しています。 なので、 "草"
たった４文字でコード検索の精度がブチあがる正規表現 - Qiita
まだまだ入社1年目、株式会社LIFULLの暴れ回る新卒、 @pal4de です。 正規表現が大好きです。 これは、その中でもとくにお気に入りな正規表現「単語境界 \b」の検索における威力を説き、褒め称える記事です。 「正規表現、まァ基本は一通り勉強したな...」 というあなたにオススメしたい、ステップアップにピッタリなヤツです。 これは何？ 改めて、 正規表現パターン \b は「単語境界」を表す記法です1。 Word BoundaryのBですね。 ここでは、「単語」は単語構成文字 \w = [A-Za-z0-9_] の連続と定義します2。 挙動の例 実際の挙動を見てみるとこんな感じ3。 正規表現 検索対象文字列 マッチする位置
Deno のめっちゃ難しいバグを修正した - Qiita
2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしていました。 自分に限らず、Deno Land コアチームの誰もこの issue にピンと来る人が居なかったようで、stale ボット (数ヶ月進捗の無い issue を自動的にクローズしようとするボット) に2回もクローズされかけていました。Deno の st
GitHub Actions（TODO to issue）を使ってTODOコメントからISSUEを自動的に作ってみた - Qiita
GitHub Actionsとは Github ActionsはGithubリポジトリ上でWorkflowを自動化することができるツールです。 WorkflowはRunnersと呼ばれるGithubで管理しているマシンのLinux、macOS、Windows環境とコンテナで実行することができる。 WorkflowはGithubリポジトリから発生するイベントに基づいて直接Workflowを作成することができる。 Githubマーケットプレイスに共有されたWorkflowを検索可能 自分が直接作ったWorkflowを共有することができるコミュニティが存在する。 GitHub Actionsサイト Github MarketPlaceから「TODO to issue」を検索 Github MarketPlaceから「TODO to issue」を検索してもいいし以下の「TODO to issue
TypeScriptで条件分岐時の可読性の高い変数設定 - Qiita
本記事を対象とする人 TS,JSで極力letではなくconstを使うべきと思っている人 結論 ts-patternが便利 https://github.com/gvergnaud/ts-pattern 解説 何かのオブジェクトを参照して場合分けして、変数を定義したい場合があると思います 例 let platform = ''; if (game.name === 'ff3') { platform = 'fc'; } else if (game.name === 'ff4') { platform = 'sfc'; } const platform = (() => { if (game.name === 'ff3') { return 'fc'; } else if (game.name === 'ff4') { return 'sfc'; } return ''; })(); //--
高卒30代未経験からモダン・フロントエンドエンジニアになった軌跡を全て書いていく - Qiita
※Qiitaのおかげ（？）で転職できた話です。 【22歳】工場勤務ワイ ワイ「毎日毎日、接着剤で部品をくっつけるのしんどいな・・・」 ワイ「ワイ、作業が遅すぎて先輩に嫌われてるし・・・」 ワイ「転職したいな・・・」 ワイ「プログラマーってカッコええな・・・」 ワイ「よっしゃ、C言語ってやつの本を買って、勉強してみよか・・・！」 C言語の勉強開始 ワイ「さっそく本を読んでいくで」 ワイ「変数・・・関数・・・なるほどな」 ワイ「オモロイやんけ」 翌日 ワイ「よっしゃ、黒い画面（コマンドプロンプト）で動く、足し算プログラムができたで！」 一週間後 ワイ「・・・来る日も来る日も、黒い画面ばっかりや！」 ワイ「いつになったら、デスクトップアプリみたいなのを作れるようになんねん！」 結果 一週間で挫折しました。 【23歳】無職ワイ ワイ「工場がなくなって、無職になってもうたわ」 ワイ「ほな、職業訓練校
HTTPのバージョンについて、現在のまとめ - Qiita
はじめに HTTPのバージョンと仕様について、個々最近の動きについて整理しておこうかと思います。 HTTPには幾つかのバージョンが有り、現在HTTP/1.1とHTTP/2が広く利用されており、HTTP/3も徐々に使われだしています。 バージョンが異なっていても、クライアントからHTTPリクエストを送り、サーバがHTTPレスポンスを返すのは変わりません。HTTPメッセージをどのようなフォーマットで送るかはバージョンによって異なりますが、HTTPメッセージが持つ意味は変わりません。 意味(セマンティクス)とは、GETリクエストやPOSTリクエスト、ステータスコード、ヘッダがどういった意味を持つかということです。 バージョンと、セマンティクスの歴史的遷移は下記のとおりです。 HTTP/1.1とセマンティクス HTTPは最初0.9から始まり、HTTP/1.0、HTTP/1.1と進んできました。 H
TypeScript: Promise風に振る舞うクラスの作り方 - Qiita
Promise<T>をラップして、Promise風に振る舞うクラスの定義のしかたを紹介します。Promise風のクラスは、Promise同様にawaitができるようになります。 Promise風に振る舞うクラスの作り方 JavaScriptでは、thenメソッドを持っているオブジェクトはPromiseと判断されます。 const p = { then(resolve) { resolve("hello world"); }, }; console.log(await p); //=> "hello world" なので、Promiseのように振る舞うクラスを定義する場合は、thenメソッドを実装すればいいわけです。TypeScriptではPromiseLike<T>インターフェイスがビルトインで提供されているので、これを実装したクラスを定義します。 class HelloWorldProm
開発チームの生産性・健全性を客観的に知るためにリポジトリ履歴から機械的に可視化するツールを作った - Qiita
はじめに ソフトウェア開発のチームの生産性や健全性というものは、内部の体感的として理解できるものの、外部の人間からは見えにくいものです。こういった情報の非対称性は開発チーム外の人々との関係の中での問題の原因になってきました。 また、複数の開発チームやプロダクトを束ねるEM、CTOや、管理職にとってそれぞれの状況を客観的な数字やグラフで可視化することは、全体的な戦略を考える上でも重要な参考情報になります。ですが、アンケートやプロジェクト管理を増やすほど、どんどんと開発メンバーに負担をかけてしまうことになり、計測のし過ぎによる疲れなども誘発してしまいます。 本稿では、gitリポジトリのログ情報から、いくつかのグラフを生成し、チームの状況を可視化するためのツールgilotを作成したので、その目的と意図、そして使い方、注意点を解説します。 アプローチ方法 gilotのアプローチは、git logの
30代後半になって初めて発信活動を始めたら人生が変わった話 - Qiita
はじめに 2年半前の私は、IT系の会社に勤めている30代後半の平凡なサラリーマンでした。 その時点では、社外での発表経験なし、社外での勉強会の参加経験なし、技術記事の投稿経験なしでした。 そんな私が発信活動を始めたことで人生が変わりました。 今は凄く楽しいエンジニアライフになり、以下のような事が起きました。 複数のITエンジニア向けコミュニティに所属して楽しく交流 「Serverless LT初心者向け」というコミュニティを立ち上げて運営 Developers Summit 2020 KANSAI でベストスピーカー賞1位を受賞 ITエンジニア向けの月刊誌「Software Design」で連載記事を執筆 すべては発信活動を始めた事がきっかけでした。 発信活動を始めると素敵な事がいっぱいあると知ってもらう事で、発信活動を始めるきっかけになれば幸いです。 (長いので要点を知りたい人は太字のみ
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
Vue3のテンプレート内でES2020構文が使えない原因 - Qiita
Vue3のテンプレートのコンパイラは、デフォルトでES2020の構文をサポートしています。 にも関わらず、テンプレート内でOptional chaining（?.）やnullish coalescing（??）を使うと、 vue-loaderは以下のメッセージを出力し、コンパイルに失敗します。 これはvue-cliなどで環境を作成した場合は発生しないので、大抵の人は起きない問題です。 原因: さんざんvue-loaderやbabelなどを調べましたが、結果としてはこちらの記事を読んでWebpackの問題だと分かりました。 Webpack では JavaScript の新構文を変換なしでバンドルできない 対応: Webpack5系にアップデートすることで解決しました。 しかし、vue-cliで作成した環境では、Webpack4系だったので、恐らくWebpackがバンドルをする前に変換して対処
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
結局useMemoはいつ使えばいいの？ 僕の決定版 - Qiita
皆さんこんにちは。筆者の以前の記事では、ReactのuseMemoを無駄に使うことによるレンダリング速度のオーバーヘッドがどれくらいかをベンチマークによって示しました。 それによれば、スマートフォンを想定したとしても、useMemoだけで描画に目に見える影響を与える（16msくらいの遅延を発生させる）には万のオーダーのuseMemoが必要なことが分かります。 速度ではなくuseMemoを使うことによるメモリ消費量の増加を気にする声も聞かれましたが、すみませんが筆者はそこまでメモリクリティカルなアプリをReactで書いたことがなく知見に乏しいため、今回はこの記事の対象外となります。 この結果が出たことでuseMemoをいつ使うのかなどという議論には終止符が打たれたかと思いきや、上記の記事の感想などを見ているとまだ喧々囂々です。 そこで、この記事では筆者の考えを皆さんに共有し、いよいよもってこ
Firebase CLIとかの出力が2022-01-10の一時期に乱れてた件 - Qiita
※Firebase CLI については更新されたので npm update すればもう大丈夫です ※npm 側で対応して該当バージョンが削除されました。よって我々側の作業不要です。 どうした firebase-tools とかの出力がおかしい。 どうして 依存の依存の（中略）依存である colors に変なリリースがあった。作者故意のものなのでそこの更新は期待できなさそう。 v1.4.2, v1.4.1 ← 問題あり v1.4.0 ← 大丈夫 どうする ※既に npm 側で対応されたので、現在は作業不要です。 直接利用している場合 過去のバージョンで固定すれば大丈夫。 依存の依存の場合 基本的には対象パッケージの更新待ちです。動く状態の package-lock.json が残っている場合、そのままにしておきましょう。 更新が来たら npm update で新しいバージョンがインストールさ
英語面接で5歳児みたいなことしか言えないからカッとなってWebサービス作った【個人開発】 - Qiita
要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。 追加(2021/01/18) 記事を公開してから毎日機能追加をしています。２週間前からどれだけ変わったか是非見ていただきたいです。 背景にあった課題 「英語で意見を言おうとすると5歳児のようになってしまう」 英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**「ちょっと難しい質問」**をされると、途端に5歳児になってしま
Puerts を使って TypeScript で Unity する方法 - Qiita
こんなつぶやきを見つけて気になったので入門した。 どうやら中華人民共和国の大手企業テンセントが開発中の、 TypeScript で Unity や Unreal Engine などを使えるようにするライブラリらしい。 ドキュメントが殆ど中国語で大変だったけど、とりあえず基本的な使い方が分かったので書く。 プロジェクトのサンプル 今回学習するにあたり、 「このリポジトリをクローンして改造すれば、普通に１からやるよりはそれなりに楽」な サンプルプロジェクトを作った。 環境構築 Unity 側の設定 Unity プロジェクトを用意する git clone https://github.com/Tencent/puerts.git する リポジトリの puerts/unity/Assets/ の中身を Unity プロジェクトの Assets にコピー このページ から Plugins_Nodej
ts-node と ts-node-dev の違い - Qiita
どちらも typescriptでの開発には持って来いなパッケージ達ですが、初めて調べた時、似たような名前でどっちを使えばいいのか結構悩んだので、違いをまとめておきます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術広報のカレンダー | Advent Calendar 2022 - Qiita
