はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 株式会社クラフトマンソフトウェアでは、Kubernetesに力を入れており、11名ほどのKubernetesエンジニアが働いています。社内のKubernetesエンジニアに「これは知らないともったいないツールを教えて！」と聞いて回ったので、そのまとめをこの記事にしました。ちなみにこの記事は、私個人による執筆ではなく、チームのメンバーで協力して執筆したものです。 Lens Kubernetesクラスタの管理と監視を簡単に行うためのオープンソースのデスクトップアプリケーションです。 k9s Kubernetesクラスタを操作するためのターミ

時間に依存する機能を持つアプリケーションのテストは、しばしば複雑で時間を要する作業です。「24時間後にログアウトしていること」といったテストのために1日待つのは辛いものがありますね…。 システムの時計を変更することなく、特定の日時でコードが正しく動作するかをテストする方法はないでしょうか。 ここでは、libfaketimeを利用してNode.jsのアプリケーションで時間を自由に操る方法をご紹介します。 libfaketimeとは libfaketimeは、プロセスに報告される現在日時をマシンのシステムクロックとは異なる値に偽装することを可能にするライブラリです。これは、システムコールに介入し、ユーザーが定義した日時を返すことで実現します。システム全体の日付を変更せずに、特定のプロセスだけのシステム日付を変更することが可能です。テスト環境で時間を操作し、特定の時点でのアプリケーションの動作を

JavaScript、TypeScript、およびJSX用のツールチェーンであるBiomeを実際のプロジェクトで試しました。Biomeは、高性能なフォーマッター、リンター、およびその他の開発者向けツールを提供します。本稿では、Biomeの特徴、インストール方法、設定ファイルのカスタマイズなどについてのレポートを書きます。 Biomeの特徴 高性能なフォーマッターとリンター Prettierとの97%の互換性 CLIおよびLSPを介した利用可能性 コミュニティ駆動の継続的な改善 インストール

TypeScript: const type parameterを用いるとas const(constアサーション)が省略できるTypeScript この記事では、TypeScriptにおけるconst type parameterという概念と、それがどのようにas const（constアサーション）の使用を省略できるかについて説明します。これは初心者にとって少し複雑に感じるかもしれませんが、実際には非常に便利で強力な機能です。では、早速見ていきましょう。 基本的な関数の例 まずは、基本的な関数を2つ見てみましょう。 function withoutConst<T>(value: T): T { return value; } function withConst<const T>(value: T): T { return value; } ここで、withoutConstとwithC

僕は現在、TypeScript入門書『サバイバルTypeScript』を書いています。この本を書く過程で、わかりやすくて効果的な学習体験を提供するため、サンプルコードの制作には特別な注意を払っています。 サンプルコードは教育的な文書で重要な役割を果たします。しかし、よく考えられていないサンプルコードは学習者を混乱させ、思考の妨げになることさえあります。そのため、以下の6つのポイントに基づいてサンプルコードを制作するように心がけています。 シンプルにする クリアにする コメントで解説する 未導入の機能を避ける 完全な動作を示す コードの長さに注意する 1. シンプルにする コードは学習者が取り組んでいる特定の問題を解決する最短・最も簡単な方法を示すようにします。無関係な要素は省いて、特定のコンセプトや機能に焦点を当てます。 例: TypeScriptのforループを解説したいとき ✅Do:

ライブラリがこんな構成になっていませんか？ TypeScript製のライブラリをnpmで配布するとき、そのパッケージの構成は次のようなフラットな構造になっていませんか？フラットな構造とは、TypeScriptファイル(.ts)と、型定義ファイル(.d.ts)が同じディレクトリにあるような構成です。 ├── index.ts ...... TypeScriptファイル ├── index.d.ts .... 上の型定義ファイル | package.jsonのtypesフィールドで指定してる。 ├── index.js ...... 上のJavaScriptファイル | package.jsonのmainフィールドで指定している。 | ├── module.ts ..... TypeScriptファイル | index.tsからimportされている。 ├── module.d.ts ...

オブジェクト指向プログラミングにおいて、シングルトンはクラスのインスタンス化を1つのインスタンスに制限し、そのインスタンスへのグローバルなアクセスポイントを提供するデザインパターンです。Rustでは、staticキーワードとunsafeブロックを使用してシングルトンを実装することができます。 以下のコードを見てみましょう。 use derive_getters::Getters; use std::env; #[derive(Debug, Getters)] pub struct SingletonInteger { value: i64, } pub fn singleton_integer() -> &'static SingletonInteger { unsafe { if SINGLETON_INTEGER.is_none() { SINGLETON_INTEGER = Some

この投稿では、JavaScriptのモジュールを定義する方法について説明します。この記事で紹介する方法は、文字列形式でモジュールコードを定義し、それを動的にインポートする方法になります。 モジュールコードを文字列で定義する まず、以下のように、文字列形式でJavaScriptのモジュールコードを定義します。 このコードでは、export文を使用して、デフォルトのエクスポートと定数aをエクスポートしています。 文字列のモジュールコードをURL形式に変換する関数を定義する 次に、createModule関数を定義します。この関数は、文字列形式で渡されたJavaScriptのモジュールコードをURL形式に変換します。これは、後でimport文で使用するためです。

Google Chromeをスクリーンショットを撮るためだけに起動する場合、ブックマークや拡張機能などの設定を無効にすることが望ましい場合があります。以下のコマンドを使用することで、ブックマークや拡張機能などを無効にした状態で、Google Chromeを起動することができます。 まっさらなChromeを起動するコマンド /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --disable-extensions \ --disable-plugins \ --bwsi \ --no-first-run \ --no-default-browser-check \ --user-data-dir=/tmp/temporary-chrome-profile \ --window-size=800,600 各オプショ

TypeScript 4.9で追加されたsatisfiesオペレーターですが、「これ何に便利なの？」「使いみちある？」という声を聞くところですが、使いどころのひとつとして、あるかなと思ったのがあったので紹介したいと思います。 僕もsatisfiesオペレーター自体、使い所を模索しているところなので、いちアイディアとして読んでいただければと思います。そのうえで、感想やツッコミなど頂けると嬉しいです。 JavaScriptで書いてた頃 一旦、TypeScriptは忘れて、JavaScriptを書いてた頃のマインドセットでコードを考えてみます。 たとえば、次のようなオブジェクトリテラルをJSONにしたいと考えたとします。

Unicodeの異体字セレクター(variation selectors)を使い、ユニコード文字列内に隠し情報を埋め込む方法です。 異体字セレクターとは 異体字セレクターは、文字の字体を詳細に指定するモディファイアのようなもの 異体字セレクターは16種類のコードポイントがある(FE00~FE0F) 仕組みの概要 隠したい文字列(hidden)を文字単位にバラす (例: js → j, s) 文字ごとに16進数に変換する (例: j → 6A) その16進数をひと桁ずつ異体字セレクターのコードポイントにマッピングする (例: 6→FE06, A → FE0A) 異体字セレクターの配列をひとつの文字列にまとめなおす 最後にそれを埋め込み先の文字列(body)に混ぜ込んで隠す。 よくあるユニコードステガノグラフィーとの違い ゼロ幅文字を使ったステガノグラフィー 次のようなゼロ幅空白文字を用いたス

「TypeScriptとは」などシングルワードの検索結果に強いTypeScript入門記事の多くに、誤解を招く内容があることを確認しています。 以下にあげる記事を参考にされた方は情報のアップデートをしていただきたいですし、記事を公開しているメディアにおきましては内容を見直していただけるとありがたいです。 TypeScriptならクラスが書ける 「JavaScriptにはクラスがない、TypeScriptにはクラスがある」「ゆえに読みやすい短いコードが書ける」といった記述が見られますがこれは誤解です。 Udemy メディア - TypeScriptとJavaScriptの違い「TypeScriptではクラスの作成ができる」 侍エンジニア - 「TypeScriptでは、JavaScriptでできなかった「クラス」の作成を実現しています。複雑で大規模な開発を行うとき、JavaScriptではコ

この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。 文字数とは？ 要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。 そもそも文字数とは何でしょうか。 たとえば、アルファベットの「A」は1文字と数えられそうです。 次の絵文字は、何文字になるでしょうか？ この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも😵💫のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。 以上のように、ひとことで文字数と言ってもデータと見た目と環境の3つのややこ

今日はエープリルフールなので、JavaScriptに関する、にわかに信じがたい話(実話)をしたいと思います。実用的な話ではないので、息抜きがてらお読みいただき、「嘘だろ!?」とツッコミながらJavaScriptへの関心を少しでも深めていただければと思います。 思いつきでゆるめにとりとめもなく書いたため、内容がざっくりしているところがあります。詳しい方はコメントなどで補足いただけると助かります🙇🏻‍♂️ できるだけ十分に調査したつもりですが誤りなどあればご指摘いただければ幸いです。 JavaScriptは10日で作られました JavaScriptは最も利用される言語のひとつで、JetBrainsの統計によれば70%近くの開発者が使ったことがあるほど、広く普及している言語です。 ここまで普及したとなると、JavaScriptはどれほど練りに練って、じっくり作り込まれた言語だったのでしょうか

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

本稿では、JavaScriptのWeb Workerを手軽に試すために、Web Workerを動かすための最小限の手順とコードを示します。 使わないもの 最小限構成でいくので以下は使いません: コンパイラ: TypeScriptなどは使わず、素のJavaScriptで。 バンドラー: webpackなどは使いません。 フレームワークやライブラリ: ReactやNPMモジュールも一切なしでいきます。 コード量も最小限 コードも過剰にならない範囲でシンプルにします。 ファイル数もできるだけ少なく済ませます。 Web Workerとは Web Workerは、雑に言うと、ブラウザ上でCPU負荷が大きい処理を動かすのに役立つ仕組みです。ワーカーの処理は、UI側の処理をブロックしないのが特徴です。ワーカーにはUIとは別のスレッドが割り当てられます。CPUを複数台積んでるパソコンなら、ワーカーはマルチ

この投稿はTypeScriptのジェネリクスの型変数(type parameter)をどこに書くのかのチートシートです。 <T>の書く位置まとめ 関数宣言 関数式 アロー関数 メソッド宣言 関数型 コンストラクタ型 関数シグネチャ コンストラクタシグネチャ: 引数リスト()の直前 クラス宣言 インターフェース宣言 型エイリアス: 識別子の直後 <T>の書く位置チートシート 関数宣言

この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ

JavaScriptでDateをyyyy/MM/dd HH:mm:ssにフォーマットする方法 (date-fnsなどのライブラリなしで)JavaScript JavaScriptでDateオブジェクトをdate-fnsなどのライブラリなしに年月日形式(yyyy/MM/dd HH:mm:ss)に変換する方法です。 日付のフォーマットにはIntl.DateTimeFormatを用います。 const date = new Date(2001, 0, 2, 3, 4, 5); const d = new Intl.DateTimeFormat("ja-jp", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", }).format(d

下図のようにコードブロックにCSSで行番号を表示する方法を紹介します。 前提 CSSで行番号を表示するにあたって、コードブロックのHTMLは行が<span>などの要素で表現されている必要があります。 行番号を表示するCSS 行番号を表示するCSSは次のようになります。 .code { counter-reset: line-number; } .code span { counter-increment: line-number; display: list-item; padding-left: 1rem; margin-left: 1rem; } .code span::marker { content: counter(line-number); color: #aaa; }

ファイルの変更日時(modify date)を写真の撮影日時に変更する方法です。 exiftoolというEXIF情報を扱えるCLIツールを入れます。 $ exiftool -time:all -a -s CIMG2461.JPG FileModifyDate : 2019:10:23 10:38:14+09:00 FileAccessDate : 2019:10:23 10:42:15+09:00 FileInodeChangeDate : 2019:10:23 10:38:15+09:00 ModifyDate : 2015:03:15 09:21:53 DateTimeOriginal : 2015:03:15 09:21:53 CreateDate : 2015:03:15 09:21:53

PostGraphile(ポストグラファイル)は、PostgreSQLのスキーマからGraphQL APIを構築するミドルウェアです。 PostGraphileのメリットは工数削減 PostgreSQLのデータベースをすでに使っているなら、PostGraphileを配置するだけで、GraphQLのAPIが手に入ります。一般的な開発方法でGraphQL APIを作ろうとすると、データベースに問い合わせするコードをApollo Serverなどを利用して、プログラマー自身が実装する必要があります。PostGraphileを使うと、そのようなバックエンドプログラミングの工数を大幅に削減でき、開発時間を節約できます。 PostGraphileの特徴 PostgreSQLのスキーマからGraphQL APIを自動生成 PostGraphileはPostgreSQLのスキーマから、GraphQL AP

ndjsonとは、JSONの値を改行文字で区切ったデータのこと。ndjsonはnewline delimited JSONの略です。 ndjsonの例 各行がひとつのJSONの値を表現します。次の例では、3つのJSONの値が表現されています。 {"method":"GET","path":"/","code":"200"} {"method":"GET","path":"/","code":"200"} {"method":"GET","path":"/","code":"200"} 改行文字 ndjsonで区切り文字に使う改行は、\nまたは\r\nどちらでもいいことになっています。 ndjsonの用途 fluentdなどで、ログのストリーミング配信で用いられます。普通のJSONと比べて、一度に沢山のJSON値を送信できるので、ログの一括処理がしやすいです。また、普通のJSONで配列でログ

この投稿では、JavaScript(Node.js)でディープコピーするにあたって使えるコードスニペットやライブラリの処理速度を比較した結果をお見せします。 比較対象 JSON.stringify/JSON.parse Nodeビルトインモジュールv8のserialize/deserialize lodashのcloneDeep deepcopy - deep copy data clone - offers foolproof deep cloning of objects, arrays, numbers, strings, maps, sets, promises, etc. in JavaScript. clone-deep - Recursively (deep) clone JavaScript native types, like Object, Array, RegExp,

SIGTERMとSIGKILLのざっくりした理解 SIGTERMとSIGKILLをざっくり説明すると以下のとおり: SIGTERM: 終了要求のシグナル。プロセスはこれを受信後も動くことはできる。 SIGKILL: 強制終了。プロセスはこれ以上動作できない。 グレイスフルシャットダウン (graceful shutdown) グレイスフルシャットダウンとは、プロセスなどが、新規の作業の受付を締め切り、仕掛り途中の作業をキリのいいところまで処理してから安全に終了することを指します。イメージとしては、「店じまい」です。 強制終了が発生すると、システムの状態が中途半端になったり、データに不整合が起きてしまったりします。グレイスフルシャットダウンはそうならないようにする保護策です。 例えば、HTTPサーバのグレイスフルシャットダウンを例に考えると、HTTPサーバが終了フェーズに入ると、新規のリクエ

この投稿では、JavaScriptで実装されたプラグインシステムにおいて脅威になりうる、プロトタイプ汚染攻撃の手法を説明します。 対策についてはまだ検証中なので説明しませんが、プラグインシステムを設計するにあたって、プロトタイプ汚染攻撃が脅威であることを一度整理しておきたかったので記事にしました。 プロトタイプ汚染攻撃とは プロトタイプ汚染攻撃(prototype pollution attack)とは、ざっくり言うと、攻撃者がJavaScriptオブジェクトのプロトタイプを書き換えることで、情報を盗んだり、オブジェクトの振る舞いを変更したりする攻撃のことです。 JavaScriptの言語的特徴を巧妙に悪用した手口 JavaScriptでは、オブジェクトを生成すると、プロトタイプオブジェクトと呼ばれる生成元のオブジェクトへの関連を持つことになります。 例えば、Fooオブジェクトを定義した場

オブジェクト指向プログラミングには、「コレクションオブジェクト」「ファーストクラスコレクション」と呼ばれる、オブジェクトのリストをカプセル化したオブジェクトを作るテクニックがあります。 コレクションオブジェクトとは コレクションオブジェクトは、値オブジェクトの一種で、次のような特徴を持ったオブジェクトです。 特定のオブジェクトのリストである。 ビジネスロジックを持っている。 例えば、「商品コレクションオブジェクト」は、複数の「商品オブジェクト」を持ちます。ビジネスロジックとしては、商品オブジェクトの価格を合計して、合計金額を返すといった処理を持たせたりします。 JavaScriptでコレクションオブジェクトを実装してみる コレクションオブジェクトはJavaScriptに固有の概念ではありませんが、JavaScriptでも実装することができます。 例えば、記事のリストである、記事コレクション

関数に渡された値が重複していたときに投げるエラーメッセージの文言や、ユーザが入力した値が既に使われているときに出すエラー文言に使える例文英語フレーズです。 〜が重複しています 重複した値が許可されないことを表現するフレーズです。 X is duplicated (Xが重複しています) Duplicates not allowed (重複は許可されません) Duplicates are not allowed in this list (このリストでは重複が許可されません) X is a duplicate key (Xは重複したキーです) Duplicated title field for the article "X" (記事「X」と重複したタイトルフィールドです) 〜は既に使われています 「既に使われている値のため同じ値が使えない」といったニュアンスのフレーズです。 Username