はじめに 佐藤:佐藤歩です。現職では開発からしばらく離れていたんですが、最近またまとまった量のリプレイス開発に携わってるので、モデレーターとして、よしこさん、うひょさんからいろいろお話を伺っていきたいなと思っております。 よしこ:こんばんは。よしこです。株式会社ナレッジワークに創業期に入社し、フロントエンドエンジニアをしています。プロダクトの0→1のところから、今の1→10のフェーズに入るまで、SPAのアプリケーション設計や運用をしてきました。 うひょ:うひょです。株式会社バベルに在籍しています。これまでずっとTypeScriptとReactでフロントエンドのアプリ開発に携わってきました。昨年はTypeScriptに関する本も出版しています。 佐藤:今回は、Reactのコンポーネント設計におけるこちらの5つのテーマごとに、よしこさんとうひょさんに順番に簡単にお話をしていただきつつ、都度ディ
はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 今回はTypeScriptのinferについて紹介したいと思います。 はじめに inferとは? 具体的な使用例 関数の戻り値の型を推論する Promiseの内部の型を推論する 配列の中身を推論する 文字列リテラルと組み合わせる まとめ inferとは? inferは型推論する際に使われるキーワードで、ジェネリクス型と条件型(Conditional Types)と合わせて使われます。 inferを使うことで、関数の戻り値や配列の中身など、ジェネリクス型の内容によって変化する型情報をConditional Typesの条件分岐の中で推論することができます。 具体的な使用例 関数の戻り値の型を推論する inferは組み込み型のReturnTypeの内部で実は使われています。 型変数のRが、型推論
はじめに 以前 uhyo さんにより「HTML はプログラミング言語である」と示されたことは記憶に新しいところですが、昨年末の HTML, The Programming Language の登場により、その主張はより強固なものとなりました。現代ではもはや、HTML は立派なプログラミング言語であるということは疑いようがありません。 この記事では、プログラミング言語 HTML, The Programming Language について、その概要と基本的な文法について説明します。そして最後に、HTML プログラミングの応用例として FizzBuzz やフィボナッチ数列の実装例を見ていきます。 HTML, The Programming Language HTML, The Programming Language (以下 HTML と略します) は、HTMX を開発していることで有名な B
2023年12月に静的サイトジェネレータであるLumeのバージョン2がリリースされました. 私は個人ブログを書くのに GitHub Pages + Lume を利用しているので,年末はLumeのバージョンアップなどの作業をしていたのですが,改めて体験が良いなと思ったのでLumeの紹介をしたいと思います. 前提知識 GitHub Pages GitHub PagesはGitHub社がプロジェクトのプロジェクトのウェブサイトを提供することを目的に,リポジトリに配置してある静的ファイル(HTMLやJSなど)をホスティングしてウェブサイトを公開してくれるサービスです.@a-skuaというアカウント名の場合,a-skua.githu.io をというリポジトリを作成すると,https://a-skua.github.io[1]というURLのウェブサイトを作ることができます. GitHub Pages
公開日 2024/01/23更新日 2024/02/15あのサービスの監視・オブザーバビリティ アーキテクチャ選定【前編】 ユーザーや顧客へ信頼性を担保した価値提供をしていく中で、監視・オブザーバビリティの取り組みは非常に重要です。 今回の特集記事では、合同会社DMM.com、株式会社MIXI、株式会社マネーフォワード、パイオニア株式会社、Sansan株式会社、株式会社ZOZOの6社の各サービスを支える監視・オブザーバビリティの仕組みとして各社がどのようなアーキテクチャを組んでいるのか、またそのアーキテクチャにしている背景や意図についてお伺いしました。 自社に近いアーキテクチャやどのようにツールを活用しているかについて、実際の事例を元に参考になれば幸いです。 なお、後編も近いうちに公開させていただきますのでお楽しみに。 合同会社DMM.com(DMMブックス) アーキテクチャ設計の背景・意
はじめに Go言語用のEbitengineというゲームエンジンに興味があったので、試しにスイカゲームもどきを作りってみました。Ebitengineを使うと意外と簡単にスイカゲームもどきを作る事ができたので、なるべく分かりやすく作り方を紹介してみようと思います。 まずは先に完成品をお見せします。ちなみにフルーツの回転は面倒くさいので実装しないことにしました。 ちなみにEbitengineはwasmでも普通に動きます。ビルドしたものをこちらに置いたのでブラウザから実際に動かす事ができます。 それではスイカゲームもどきを作って行きましょう。 描画する まず一番初めにフルーツの画像を作るところから始めます。これはリンゴ、オレンジ、ブドウ、パイナップル、メロン、スイカのつもりです。 続いてフルーツを定義します
「個人開発してるWebサービス」というのは Pixela のことで、runn とは @k1loW さんが開発しているオペレーション自動化ツール/パッケージです。 pixe.la github.com Pixela は、そのユーザーインターフェースとして基本的に Web API のみを提供しているサービスで(サービスを利用するための各種操作は基本的にすべて Web API に対する HTTP リクエストによって行う必要がある)、現在そのローンチから6年目を迎えるサービスです。 blog.a-know.me ありがたいことに、世界中のユーザー(特に、プログラミング初学者の方によくご利用いただいているようです)に継続的に使っていただけているサービスになっており、登録ユーザー数はもうすぐ7万人に到達しようとしているところです。開発・メンテナンスに係る私の人件費を除けば、黒字運営を続けることもできて
Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues t
この前職務経歴書を書いたので、そのとき色々考えたり調べたりしたことを書きます。 一般的な転職活動の職務経歴書は微妙だった 僕の転職は二回目です。 一回目の転職のときは、リクルートエージェントのサービスを使って転職しました。 リクルートが公開している、一般的な職務経歴書のサンプルは↓こんな感じです。 Wordで表をつくって、編年体に、何をやってきたかを書くことで、自分の職務経歴を書きます。 ただ詳細はちょっと長くなるので、職務経歴書の冒頭に数行でサマリーが書いてあって、親切ですね。 一般的な日本の職務経歴書というのは、このフォーマットで問題ありません。 実際一回目の転職のときは僕もこのフォーマットで転職しています。 二回目の転職活動も、この職務経歴書に二社目の経験を追記すればいいか、と思っていましたが、 見れば見るほどこのフォーマットで書いた自分の職務経歴書が微妙に感じてきました。 何が微妙
しばたです。 昨年10月にGoogle(Gmail)および米国Yahoo!においてスパム対策の強化がアナウンスされました。 この件に関してつい先日まで他人事でいたのですが、実は全然他人事では済まないことが発覚し突貫で知識を仕入れています。 アナウンスに対する具体的な対応策についてはこちらのZennの記事を見れば全部わかる感じです。 最高ですね。 また、メール送信にAmazon SESを使っている場合はAWSのブログを確認すると良いでしょう。 「これらの記事を読み解けば万事解決!」という感じではあるのですが、私自身が学んだなかで予め知っておくと良さそうに思えた点がいくつかありました。 本記事ではその辺を共有するのと、実際にAmazon SESの環境を作って動作確認をしたのでその結果も合わせて共有します。 はじめに覚えておくと良い基礎知識 Zennの記事でも詳細な解説がありますが、個人的に「最
import "@typespec/http"; using TypeSpec.Http; model User { id: string; name: string; birthday?: utcDateTime; address: Address; } model Address { street: string; city: string; state: string; zip: string; } @route("/users") interface Users { list(@query limit: int32, @query skip: int32): User[]; create(@body user: User): User; get(@path id: string): User; } openapi: 3.0.0 info: title: (title) versio
const getNodesByXPath = (xpath) => { const result = document.evaluate( xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); return [...Array(result.snapshotLength)].map((_, i) => result.snapshotItem(i)); }; const nodes = getNodesByXPath('//div'); nodes; // [div, div, div, ...] 3. XPath とは 3.1. 概要 XPath とは XML 文書(HTML 含む)のさまざまなノードを指し示すことができるパス文字列のことです。 XPath は XML Path Language の略
VS Code でコミットするときに GitHub Copilot を使っていると コミットメッセージを生成してくれたりします。 図 1 コミットメッセージを Copilot で生成 英語苦手な自分からすると「マジうれしいんですけど」という感じなのですが、コミットメッセージはできればエディターで記述したいと考えてしまいます。 そこで今回は「コミットメッセージをエディターで編集する利便性」を維持しつつ、「GitHub Copilot による生成機能もできるだけ利用しよう」という内容のメモになります。 VS Code のエディターでコミットメッセージを記述するとは VS Code でコミットメッセージを記述する方法としてはソース管理タブの利用が一般的かと思われます。 図 1-1 ソース管理タブのフィールドから普通に入力 一方で上記とは別に、コミット用のコマンドを実行しエディターの中で記述する方
HTMX とは? の記事を見ればわかるが、Javascript の知識なしで ajax通信や高度なUIの実装ができるライブラリになっています。 賛否両論はあると思いますが、自分はあまり実装がどうなっているか分からず気になったので、ソースコードを少し見てオレオレHTMXを作ってみることにしました(誰にでも分かるように簡易な実装にとどめています)。 ではまずは、ソースコードを見てみましょう! HTMX のソースコードを読んでみる HTMX のソースコードは、主に の 3900行程度のコード(2024年1月27日現在)になっています。 最初からこのコードを読むのは骨が折れますが、どうやらエントリーポイントは、 // initialize the document ready(function () { mergeMetaConfig(); insertIndicatorStyles(); var
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く