TypeScript、上達の瞬間tl;dr 焼肉
typeとinterfaceって結局どう使い分ければ良いの？
TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる
共通化すれば良いとは限らない - Object.create(null)
ここのところ偶然なのか「共通化」という言葉を多く聞いているのですが, その言葉を聞くたびに身構えていることに気がついたので, この気持ちの出どころを共有しておきます. なぜ身構えているかというと, 共通化が必ずしもコードを良い状態にするとは限らないにも関わらず, それ自体が目的になってしまっている (ように見える) ことが多いからです. この手のリファクタリングの目的はあくまでコードの改善のはずで, そのことを忘れて共通化するだけで満足してしまうと, 良くてリファクタリングの効果が半減, 悪ければ逆効果になってしまいます. 個人的にコードを共通化する上で注意してほしいと思っているのは以下の二つです. コードを共通化すべきでない場合もある 共通化されたコードは一般的な原則にしたがって設計されなければならない 似たようなことは歴史の中で何度も繰り返し言われていることだろうと思いますが, 改めて
Goのインターフェース抽象度を美しく保つ為の思考 - 好奇心に殺される。
Go Goのインターフェース抽象度を美しく保つ為の思考 Goで抽象化を適切に、そして美しく保つ為の自分の考えやTipsを紹介します。 Overview とある場面でGoのinterfaceが持つ振る舞いの抽象度について議論があり、今回はそれをアウトプットしておきます。Go初心者でinterfaceを使った設計に苦手意識を持つ人向けです。 目次 今回の目次です！下記について自分の考えをお話しします！ 振る舞いの抽象化の度合いを意識する 抽象度をどこまであげるか 引数や返り値から発生する「抽象化の漏れ」 抽象度をあげる為の統合 Getter/Setterと抽象度 それではいってみましょう！ 振る舞いの抽象化の度合いを意識する 振る舞いをinterfaceとして定義していくのがGoの抽象化ですが、そもそも 抽象化は度合いのある概念です 。この度合いを意識しないと適切なinterfaceの設計は困
無料Webクローラー「EasySpider」 プログラミングスキル不要、マウスクリックだけで操作可能
このコーナーでは、2014年から先端テクノロジーの研究を論文単位で記事にしているWebメディア「Seamless」（シームレス）を主宰する山下裕毅氏が執筆。新規性の高い科学論文を山下氏がピックアップし、解説する。 Twitter: ＠shiropen2 シンガポール国立大学と中国の浙江大学に所属する研究者らが発表した論文「EasySpider: A No-Code Visual System for Crawling the Web」は、Excelを使用するように視覚的にWebスクレイピングタスクを設計し、実行できるカスタマイズ可能なWebクローラーシステムを提案した研究報告である。公式ページはこちら。 このシステムは、マウス操作のGUI（Graphical User Interface）を使用して提供されており、コーディングの経験がなくても使えるため、ノンプログラマーでも簡単にタスクを設
『WEB+DB PRESS』 休刊のお知らせ
WEB+DB PRESSは，2023年8月発売のVol.136をもって隔月刊誌としては休刊させていただきます。物価上昇による製作費の高騰など諸般の事情により，今回の決定に至った次第です。 突然の休刊案内にてたいへん恐縮ではございますが，何卒ご理解を賜りますよう，お願い申し上げます。 22年以上の長きにわたり，絶大なご支援をいただきましたことを，厚く御礼申し上げます。 弊誌で扱っていた分野のコンテンツは，今後も弊社刊行のSoftware Designやgihyo.jp，書籍などで提供させていただきます。また，必要な場合には「特別号」の編集・刊行なども検討してまいります。 最後に，皆様の一層のご活躍を心より祈念しております。
Introducing ChatGPT
ChatGPT is a sibling model to InstructGPT, which is trained to follow an instruction in a prompt and provide a detailed response. We are excited to introduce ChatGPT to get users’ feedback and learn about its strengths and weaknesses. During the research preview, usage of ChatGPT is free. Try it now at chat.openai.com. In the following sample, ChatGPT asks the clarifying questions to debug code. I
リリース用のpull requestを自動作成し、マージされたら自動でタグを打つtagpr | おそらくはそれさえも平凡な日々
常々GitHubにtag requestが欲しいと言ってきましたが、それを実現するツールを作りました。OSSなど、バージョニングとリリースが伴うソフトウェア開発のリリースエンジニアリングをとにかく楽にしたいという動機です。既に自分が管理している幾つかのOSSでは導入して便利に利用しています。 https://github.com/Songmu/tagpr アイデア 基本の発想は以下のようにシンプルです。 リリース用のpull requestがGitHub Actionsで自動で作られる バージョン番号が書かれたファイルやCHANGELOG.mdを自動更新 そのpull requestをマージするとマージコミットに自動でバージョンtagが打たれる semver前提 リリース用のpull requestを自動で作りマージボタンを以てリリースと為す、というのは、みんな(僕が)大好き git-pr
document.all の例外仕様を知っていますか
昨日、ツイッターで次のような JavaScript クイズを出しました。 久しぶりの JavaScript クイズ！ function hello(x) { if(typeof x === 'undefined') { alert(x.f()); } } この hello 関数で "Hello, World!" のアラートを表示させることが出来るか？ — Takuo Kihira (@tkihira) July 31, 2022 このブログ記事では、この問題について解説します。 解答 答えは「出来る」です。出題者の意図としては document.all を想定しておりました。 document.all は、ブラウザに存在する、非常に特殊なオブジェクトです。 document.all 自体は object 型である。console.log(document.all) とすると内容が確認出来る
次世代のカメラパッケージreact-camera-proの紹介
経緯 今回、社内で開発中のWebアプリにカメラの機能を実装する必要があり、npmでもダウンロード数が最も多いreact-webcamを使うことを検討していたのですが、色々あって断念した話です。 （react-webcamの批判ではなく、自分たちに合わなかったという事だけ誤解しないでいただければ助かります） 断念した理由 当然ですが、この開発中のWebアプリでは画質が要求されていてreact-webcamでは、その画質を満たすことができませんでした。 react-webcamの問題点 もしかしたら自分の技量不足で対処する方法があったのかもしれませんが、 時間的制約などがあり2つ問題が浮上しました react-webcamはカメラのスクリーンショットをbase64に変換する過程で画質が下がってしまう （説明が難しいのですが、）スクリーンショットの出力サイズがカメラのアスペクト比に依存する 画質
私の推しフロントエンドディレクトリ構成と気をつけたいポイント
どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構
GitLabがVisual Studio CodeベースのWebIDEへ移行すると発表
GitLabは、これまでGitLabが自社で開発し提供してきたWebIDEを、Visual Studio CodeベースのWebIDEへ移行していくと表明しました。 Here's what's coming next to GitLab Web IDE. https://t.co/1iHQrvR46a — GitLab (@gitlab) May 24, 2022 GitLabには以前から、Webブラウザの画面からコードを管理しつつ、そのままコードの編集などを可能にするWebIDE機能が統合されていました。このWebIDEはオープンソースのMonaco EditorをベースにGitLabが開発してきたものと説明されています。 今回の発表は、このWebIDEをVisual Studio CodeベースのWebIDEに置き換えるというものです（ちなみにVisual Studio CodeもMo
ヤフーのIE11 サポート終了の進め方
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。第11代黒帯（Webフロントエンド／ヤフー内のスキル任命制度）の伊藤（@koh110）です。 普段はCTO室にあるWebフロント技術室で、全社のフロントエンドに関わる仕事をしています。 最近の仕事のひとつとして、IE11 の非推奨の案内 がありました。 Yahoo! JAPANでは、Internet Explorer 11を推奨ブラウザーとしていましたが、Microsoft社のInternet Explorerサポート終了に伴い、2021年9月7日をもってYahoo! JAPANにおけるInternet Explorer 11でのご利用を非推奨とさせていただきます。 この案内についてTwitterや記事などで触れていた
技術記事を書く人を大事にしよう
TL;DR 技術記事を書いて公開してくれる人は貴重な資源なので、なるべく潰さないように大事にしましょう。 はじめに プログラムを書いてて、なにかわからないことがあれば検索すると思います。すると、世の中にはごく少数の役に立つ記事と、大多数の役に立たない記事があることがわかるでしょう。その役に立つ記事を求めてネットの海をさまよっていると、「あれ？またこの人の記事だ」と思うことがよくあるでしょう。C++の言語仕様を調べてると「あの人」の、Vim関連を調べていると「あの人」の、Go言語なら「あの人」の記事を見つけることでしょう。逆に言えば、ある程度限定された分野において、体系だった知識があり、わかりやすい記事を書いてくれる人というのは極めて貴重な人材ということになります。 しかし、そんな「つよつよエンジニア」も、はじめから強かったわけではありません。当然のことながら新人時代があり、よくわかっていな
Goの正規表現が遅いって言う人がいたから、（速い）正規表現エンジンを作ったよ
はじめに 「Goの正規表現は遅い」 そんなふうによく言われていました。（最近はあまり聞かなくなりましたが） たとえば、↓の記事ではPythonの正規表現と比較して1.5倍くらい遅いという結果になっています： この話には「Goの正規表現は最悪時間が短くなるように安定したアルゴリズムを採用しているから」という回答があります： ↑の記事の比較では、GoがPerlに対して約10倍以上高速という結果が出ているので、「Goの正規表現は遅くない！はい、論破ー！」というわけですね。 なんでこうなるのかも↑の記事で説明されているとおりですが、Perl（などのバックトラック型エンジン）が入力長に対して指数関数的に実行時間が伸びていくのに対し、Goの正規表現エンジンは入力長に対して線形時間で実行時間が伸びていくアルゴリズムを採用しているため、入力が長くなると急激にGoのほうが有利になるからです： 一方で、入力が
Web のセマンティクスにおける Push と Pull | blog.jxck.io
Intro 筆者は、 Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、 Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Pro
新しいHTTPメソッド、QUERYメソッドの仕様 - ASnoKaze blog
新しいHTTPメソッドを定義する「The HTTP QUERY Method」という提案仕様が議論されています。 もともとは、SEARCHメソッドという呼び名が候補としてあげられていましたが、長い議論ののち、一旦QUERYと呼ぶ方向となっております。最終的なFixについては、この draft 02の公開とともに改めてコンセンサスを求めた後に行われます。 QUERYメソッド 「GETリクエストにボディを付けたいという」という質問は長らく有りました。しかし、GETやHEADリクエストでボディをつけることは非推奨となっています (参考URL)。 そのような要望のなかで、リクエストでボディを含められる冪等性の保証された新しいHTTPメソッドが検討されました。それがQUERYメソッドです。冪等性があるため、ブラウザやProxyは自動でリトライすることができます。(なお、POSTはセマンティクス上冪等
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜
ちいさな Web ブラウザを作ってみよう
React Native for Webのこれまでから読み解くReact GUIのこれから
