はてなブックマーク

本記事はsyumai Advent Calendar 2024 4日目の記事です。 内容としては、主にWeb Developer Conference 2024の休憩中に@NozomuIkutaさんと行った雑談を記事化したものです。 内容に何か問題があれば、本記事のコメント欄や、Xなどでご連絡ください。 require(esm)の登場 2024年、ついにNode.jsのCommonJS modulesから、ES modulesを利用できるようになりました。 使い方は簡単で、これまでCommonJS modulesから別のCommonJS modulesを利用するために使っていた require をそのままES modulesに対して使います。 // ES modules側 (counter.mjs) let count = 0; export const currentCount = ()

はじめに 2024年8月13日、Go 1.23がリリースされ、ついにイテレータが利用可能となりました。 この記事では、Goのイテレータについて、 どうやって使うのか どこまで知っておく必要があるのか を理解することをゴールとします。 基本的な知識 基本的な知識としては、以下の内容を知っていれば問題ないです。 for文のrangeループの仕様が変わった 関数を対象にrangeループを回せるようになる rangeループの対象にできる種類の関数をイテレータと呼ぶ イテレータには3種類ある for文のrangeループの仕様が変わった Go 1.22までは、for文によるrangeループの対象にできたのは、配列, slice, 文字列, map, channel, 整数だけでした。 Go 1.23で、ここに関数（ただし、特定の形式に限る）が加わりました。 ここで、rangeループの対象にできる形式の

Segmentation Models Pytorch の バックボーン(Backbone) を設定したいように変更する時の方法と注意点 はじめに ディープラーニングのための自動微分をしてくれる PyTroch において、セグメンテーションのタスクのモデルを簡単に提供してくれるのが Segmentation Models Pytorchです。 モデル作成の初学者から Kaggle などのコンペ、業務でも仕様できるくらい便利なライブラリーです。 もう既にバックボーンとなるエンコーダーは自由に選べるほど豊富にあります。 しかしながら、最新のモデルや3Dカスタムなどをする時に簡単にカスタムする方法がわからなかったので備忘録のつもりで例を記載しております。 実装 Python 実装を記載します。 基本のおさらい import segmentation_models_pytorch as smp m

Godot Engineで2Dゲームを作るときに知っておくと良さそうな知識をまとめておきました。 基本 シーンとゲームオブジェクトの関係 Unityに例えるとシーンは「Prefab」であり「Scene」でもあると言えます。 上記はシーンの構成の一例で、ゲームを動かすためのメインシーン「Main.tscn」が存在し、そこにプレイヤーシーン「Player.tscn」や敵シーン「Enemy.tscn」を配置していく…といった使い方になっていきます。 シーンはエディタ上で直接シーンにぶら下げても良いですし、スクリプトから生成してぶら下げることもできます。（画像では "Enemies"と"Bullets" を Node2D としていますが、CanvasLayer ノードにすると描画順を制御できて便利です。このことについては「描画順の制御」の項で説明します） スクリプトから生成する場合は、preloa

Kaggleにて、人間の血管細胞を見分ける画像コンペティションHuBMAP - Hacking the Human Vasculatureが開催されていました。 受賞者の皆様おめでとうございます!そして参加者の皆様お疲れ様です！ こちらに筆者も短い期間ですが、参加して楽しみました。上位解法を勉強と復習のためにまとめます。 コンペ概要 与えられた画像の中の指定された細胞を検知するのが目的です。 精度指標は IoU: 0.6 の Average Precision です。 細胞ごとの領域を求める検知のため、COCO Instance Segmentation の Mask mAP の領域の重なり具合が IoU: 0.6 で計算されると考えるとわかりやすいかもしれません。 人によるアノテーションは禁止された９時間制限のノートブックコンペです。 なので割とインターナルな戦いになったと思います。 コ

Cloudflare Workersで簡単にGoのHTTPサーバーを動かすためのライブラリを作ったので、紹介させていただきます。(まだかなり実験的な実装です) 特徴 http.Handlerを作って、 workers.Serve に渡すだけでCloudflare Workers上でHTTPサーバーとして動作する 必要なツールはtinygoとwrangler (Cloudflare WorkersのCLI) だけ JavaScript側のコードを触る必要が無い Cloudflare R2のバインディング（一部）を提供している 今後、KV等の対応も頑張る予定 デモ 下記のURLにアクセスすると Hello, world! と表示され、例としてURL末尾の world を syumai に差し替えると、 Hello, syumai! と表示されます。 ソースコードは、以下のような非常にシンプルな

2022/12/30 追記 今はもう Public Buckets の機能があるので、このスクラップの内容は基本的に必要ありません。 Bucket Accessの設定からDomain Accessを有効化することで、キャッシュも効くようになります。 下記の記事が参考になりそうです。 Cloudflare R2の画像をCache APIでキャッシュして返したのでそのメモ。

先日、安かったと言う理由だけで、ついSUNMI V1sを購入してしまいました。 SUNMI V1sは、レシート印刷機能内蔵のオシャレなAndroid端末です。通常は、QR決済に対応したレジなどに置いてありますが、最近は中古品が大量に流通しているようです。 また、家電量販店でも同シリーズの端末を購入することが出来るそうです。 これを有効活用するには自分オリジナルのコンテンツを印刷出来るアプリを作るしかない！と思ったので作ってみました。 アプリを作る過程で知った情報についてまとめることで、似た境遇の方が助かるのではと思ったので書いておきます。 本記事の内容は、基本的にPrinting Service - Sunmi Developer Docsを参考にしています。 大前提 SUNMI端末のプリンタを自由に使うには、Androidアプリを作ることが絶対に必要になります。 最終的に、何かしらの手段

RethinkDNS About RethinkDNSは、AWS、IBM、Scientific Gamesで働いていたエンジニアが、監視経済への嫌悪感と、20億人の無防備なAndroidユーザーに使いやすいセキュリティアプリがないことへの不満から開発しました。 今は無料で10月から有料プランも追加される RethinkDNS のアプリは無料のオープンソースであり、今後もその状態を維持します。しかし、RethinkDNS のコンテンツブロッキング DNS サービスとしてのクラウドサービスには、無料と有料の両方があります。 Androidに特化しているみたいでファイアウォールや広告ブロッカーとして使える、AdGuardやBlokadaのライバルになりそう Mozilla Builders MVP programから助成金を獲得 もちろん普通のDNSサーバーとしても使える、ユーザー登録とか必要な

こちらはGo Advent Calendar 12日目の記事です。 Go 1.18 で interface{} の代わりに any が使えるようになるという話が出ていたので、これの使い方について書いてみようと思います。 any が入った詳細な経緯などについては10日目のsg0hsmtさんの記事で解説いただいていましたので、こちらをご覧ください。 (内容がやや被っていてすみません) any とは何か any は Go 1.18 で入る予定の、事前宣言された interface{} に対する型エイリアスです。 Goのプログラム全体のスコープ (ユニバースブロック) で、次のようなエイリアス宣言が行われているものと考えると理解しやすいと思います。

useEffectで非同期関数を設定する際に落とし穴にハマったのでメモっておきます。 非同期関数をuseEffectに設定するとエラーになる useEffectフックで非同期関数を実行したい場合、以下のように設定するとエラーになります。 useEffect(async () => { const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=AWS"); const data = await response.json(); console.log(data); },[]); なぜ非同期関数をセットするとエラーになるのか？ なぜ、エラーになるのかというとuseEffectの第1引数の関数の戻り値にはクリーンアップ関数を設定する必要があるためです。 asyncを使って非同期関数にするとPromise

本記事では、GoのGenerics関連のProposal一覧のまとめと、簡単な解説を行います。 内容については随時更新を行います。 (本記事の内容をGo 1.17 リリースパーティーにて発表しました。) Generics関連のProposal一覧 (2022/2/3 更新) GoのGitHub Issueと、Gerritから見付けたGenerics関連のProposalを表にまとめました。 Proposal Status Author GitHub Issue Design Doc / Gerrit

Reactでスタイリングする際に人気のライブラリーはstyled-componentsなのではないでしょうか。 事実、githubでは31.8kものStarをもらっています。しかし、まだまだ使ったことないという人が多いのが現実です。 styled-componentsについて知らない方も多いので、使うメリットや基本的な使い方について見ていきましょう。 styled-componentsとは？ CSS in JSのライブラリの一つです。CSS in JSとはその名の通りJSの中にスタイルを記述する方法。 このCSS in JSを使うことでReact思想のコンポーネント単位での管理がスタイルにも可能になります。従来はJSとCSSで分けられていたものが、CSS in JSで統合できたためです。 styled-componentsを使うメリット styled-componentsを使うメリットは主

軽い気持ちでTwitterに投下したクイズに思った以上に反響があったので、解説記事を書きました。 クイズについて 投下したクイズは次のような内容です。 func main() { println(f()) } func f() (a, b int) { defer func() { a += 1 b += 1 }() return 2, 3 } この時の出力結果を問う問題で、選択肢は下記の4つです。 0 0 1 1 2 3 3 4 問題のポイント このコードの挙動を知るためのポイントは下記の3つです。 関数は何を返しているのか return 文は何をしているのか defer 文で遅延された関数の実行タイミング まず、関数宣言の構文のおさらいを行って、その後解説に進みます。 おさらい 下記に、今回の内容に関係する部分のEBNFを抜粋[1]したものを示します。 FunctionDecl (関数

本記事は、2021年3月18日(木)に開催の、入門Go言語仕様輪読会 第2回のために執筆したものです。 はじめに Goには 型 の機能が存在します。 型を利用することで、 変数の型を指定し、その変数に対して代入できる値を限定する 値の型を指定し、その値に対して行える演算処理を限定する 同じ型を持つ値に対して共通した処理を記述する といった事ができます。 例として、代入や足し算について考えてみましょう。 // OKな例 var i1 int = 10 var i2 int = 1 i1 = i2 // OK fmt.Println(i1 + i2) // OK // NGな例 var i int = 10 var f float64 = 1.0 i = f // compile error fmt.Println(i + f) // compile error 上記の NGな例 のように、整

概要 この記事は、Godot Engineでフラッピーバードを作成するチュートリアルとなります。 もし Godot Engineに慣れていない場合は、以下のクリックゲームの方がシンプルでわかりやすいのでおすすめです。 プロジェクトの作成 まずはプロジェクトを作成します。 ここでは「FlappyBird」という名前にしました。 Mainシーンの作成 まずはゲームのメインとなるシーンを作成します。 「2Dシーン」クリックします。 2Dシーンが作成されるので、ノード名を「Main」に変更して Ctrl+S (Cmd+S) でシーンを保存します (そのまま "Main.tscn" として保存) 保存したら、F5 (Cmd+B) または右上の「▶」をクリックしてゲームを実行します。 メインシーンが設定されていないの確認ダイアログが表示されます。「選択」をクリックします。 メインシーンに "Main.

Next.jsとAuth0を使って読んだ本を管理するサイトを作ったので使った技術等を紹介します。 github どんなサイトか？ まずは、どんなサイトを作ったのかを紹介します。読んだ本の管理を行うサービスで、主な機能は3つです。 Google Book APIに登録されている本を検索して本棚に保存できる 登録されていないなくてもアプリ内で新しく登録できる。 今まで本棚に登録した本の合計ページ数・本の高さ・本の重さを表示。1ページ当たり0.5g、0.15mmで計算します。 画面遷移 1.トップ画面 アプリのトップ画面。「アカウント作成・ログイン」ボタンを押すことでログイン画面に遷移します。 2.ログイン画面 Auth0を使ったログイン画面。認証方法は2種類あります。 Googleアカウントを使ったログイン メールを使ったログイン 3.ホーム画面 今まで読んだ本を管理する画面。最近読んだ本の表

Next.jsでAuth0を使う方法について解説しているページが少ないので、ここにまとめておきます。 Auth0とは? Auth0とは、認証・認可のサービスをクラウドで提供している会社。いわゆるIDaaS (Identity as a Service)ベンダーと呼ばれるものです。 ライブラリーが豊富で簡単に実装でき、アプリ内で個人情報を保持しないため安全にログイン機能を実装できるのが魅力です。また、ログインできるSNSアカウントの種類も豊富なのが特徴です。 Google facebook github twitter amazon yahoo などでログインできます。 また、フリープランでは以下の制約があるものの個人で利用するには十分です。 7000人までのアクティブユーザー 2種類までのソーシャルログイン さらに、ReactやVue、Angularなど有名どころのフレームワークのチュート

useEffectを使っていると初期表示時のちらつきが気になりますよね。そんな時に使えるのがuseLayoutEffectです。 なので、この記事ではuseEffectとuseLayoutEffectの違いについて解説します。 useLayoutEffectとuseEffectの違い useEffectとuseLayoutEffectはコールバック関数が実行されるタイミングが違います。 useEffect ステータスを変更して、再レンダリングする Reactはレンダリングを開始する 画面に描画する useEffectを実行 useLayoutEffect ステータスを変更して、再レンダリングする Reactはレンダリングを開始する useLayoutEffectを実行 画面に描画する つまり、useEffectは画面に表示された後に実行されるが、useLayoutEffectは画面に表示さ

fetchとaxiosはどちらも外部リソースを取得するためのライブラリーで非同期で動くためPromise型を返します。 似ているライブラリーですが、主に4つの違いがあるのでそれぞれを解説してきます。 インストール方法 HTTPメソッド通信 JSONデータの取得方法 エラーハンドリング 1.インストール方法 fetchはブラウザの標準ライブラリーでインストールせずに使うことができます。 一方、axiosはインストールが必要です。以下のコマンドで取り込むことができます。 yarn add axios npm install axios そして、モジュールのインポートも必要です。 import axios from "axios" 2.HTTPメソッド通信 HTTPメソッド通信毎の呼び出し方がfetchとaxiosで異なります。 fetchによるPOST通信 fetchでPOST通信を行う際は第

ReactでWebページを作成していると無限スクロールを実装する機会があると思います。スクロールしたら非同期でデータを取得して、無限にスクロールできる機能のことです。YouTubeにも実装されているので見たことがあると思います。 今回はこの無限スクロールをReactで実装するライブラリのreact-infinite-scrollerを紹介します。 react-infinite-scrollerのインストール まずはreact-infinite-scrollerのインストールを行います。以下のどちらかのコマンドを実行してインストールします。 npm install react-infinite-scroller --save yarn add react-infinite-scroller react-infinite-scrollerを使ってみる インストールが完了したら、実際に使ってみま