この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取

生成AIのビジネスへの利活用の一環として、AIプログラミング補助ツール「GitHub Copilot」の導入に踏み切る企業が増えている。ファッションECサイト「ZOZOTOWN」を運営するZOZOもその一つで、2023年5月に法人向けサービスである「GitHub Copilot Business」を全社導入した。 ZOZOには約500人のエンジニアが所属しており、その全員がGitHub Copilot Businessを利用できるようにした。一方で、AIツールの全社導入に当たっては、セキュリティや費用対効果など、検討すべき点も多い。ZOZOではどのような検討の結果導入に至ったか、同社のテックリードを務める堀江亮介さん（技術本部技術戦略部CTOブロック）が公開している外部向け資料からひもとく。 全社導入を進める際、ZOZOでは「セキュリティ上の懸念」「ライセンス侵害のリスク」「導入による費用

5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov

» 【マジ穴場】「焼肉食べ放題1650円」の店に入ったら、食べ放題の対象が広すぎてビビった / 池袋『九田家』 特集 池袋西口の繁華街をブラブラしていたら、「ランチ60分食べ放題1650円」と書かれた看板を見つけた。店の名前を確認すると、『焼肉 九田家（くだや）』とある。 なるほど。焼肉の食べ放題なんだな。それにしても、焼肉食べ放題が60分1650円はかなり安い。ランチということを考えても相当安い。 それだけに、味が美味しかったらマジで穴場ってことになる。まぁ、安いだけって可能性もあるが……どっちだろう？　と気になったので入ってみた。 ・うれしい誤算 入店すると、「食べ放題ですか？」と聞かれたので「はい」と即答。ちなみに、表の看板では焼肉食べ放題のほかに普通の定食も紹介されていた。 一方、食べ放題のお肉も記載されており、以下の通り。 「タン塩、赤タン、デジカルビ、鶏カルビ、ごまハラミ、ハツ

Feature-Sliced Designというフロントエンドアーキテクチャ設計方法論をプロジェクトに導入してみたところ、 個人的には良いと感じているので、どのような設計方法論なのか、具体的にどのような部分が良いと感じたかを紹介していきたいと思います。 Feature-Sliced Designとは？ Feature-Sliced Designは、フロントエンドアプリケーションを対象としたアーキテクチャ設計方法論です。公式サイトでは、「コードを整理するためのルールと規約の集大成」と記載されています。 Feature-Sliced Designの設計方法論 Feature-Sliced Designでは、プロジェクトはLayerで構成され、各LayerはSliceで構成され、各SliceはSegmentで構成されます。 Layer Feature-Sliced Designの第一階層をLay

庶民で賑わうような大衆居酒屋で岸田と二人でサシ飲みした。 飲みながらは趣味の話や最近のこと、あともちろん政治の話なんかもしたんだ。酒はどんどん進み、酔いも回って俺たちは馬鹿話に花を咲かせて大いに笑い合った。 今ではもう何を話したのかはよく覚えてないが、それでもとても楽しかったことだけは覚えている。 世間は岸田のことを悪く言うようだが、それは彼のことをよく知らないからだ。飲めば気の良い奴だってすぐに分かるだろうし、それにこれだけは断言できる。岸田はそれほど悪い奴じゃない。サシ飲みした俺が言うんだから間違いないよ。

GitHub Copilot、みなさん使ってますか？すでに多くの方が利用しており、「ないと困る」という方から「提案の質に問題がある」「まだまだ使えない」という方まで、様々な意見を聞きます。 筆者はGitHub Copilotに対して非常にポイティブな立場です。GitHub Copilotは使い方次第で開発速度を格段に向上させることを身をもって体験しており、これからの時代においてはGitHub CopilotなどのAIツールを使いこなせるかどうかで、個人の開発速度に非常に大きな差が出ると考えています。 重要なのは使い方次第と言う点です。前述のように様々な感想が溢れているのはAIツールの習熟度が大きく影響しているようにも感じます。AIツールは静的解析同様、利用者側の手腕が大きく問われるツールであると筆者は感じています。コマンドプロンプトエンジニアリングという言葉もあるように、AIツールを使いこ

Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して

galax @F5533182 小学生の頃親に「ソ連はなんで滅んだの？」と聞いたことがあり、「資産が平等に分配されてみんな働かなくなったからだよ」と言われたが、今思うとあれは資本主義側から見たポジショントークだったなあ　良い悪いではなく 2024-04-30 11:58:55

WEBアプリケーション開発者です。 特別セキュリティのスペシャリストになりたいというわけでないですが、アプリケーション開発者として徳丸本に記載されている内容レベルのセキュリティ知識はあります。 システムのセキュリティに関してはベンダーの脆弱性診断を通して運用しており、個人的にはセキュリティに関して何か困ったことがいままでありません。 ただ、ふと考えてみると「情報漏洩やサイバー攻撃が発生した際などの有事にどのような行動をとるべきか」という観点ではあまり自信がないなと感じました。社内でもそのような場合の指針が整っているわけではないです。 徳丸先生は、一般的な開発者には最低限どのレベルのセキュリティ知識を求められていますか？ 回答の難しい質問ですが、ここは本音をさらけ出したいと思います。 私が「安全なWebアプリケーションの作り方（通称徳丸本）」を出したのが2011年3月でして、それから13年以

Electron で半透明のウィンドウを作ってみたくなったので調べてみた。 大まかなやり方はパターンが２つあって、どちらにも異なる制約がある。 opacity を使う transparent を使う 設定場所 BrowserWindow を作るときのオプションで設定できる。 ここでは、２つのやり方を両方とも設定してみてある。 const win = new BrowserWindow({ transparent: true, opacity: 0.3, frame: false, }); 1. opacity を使う この設定方法は、文字も含めて、ウィンドウ全体が半透明になる。 使えるよう場所は少ないように思う。 2. transparent を使う こちらは部分的な半透明にも対応できる。 ただ、制約があって、Windows ではフレーム無しのウィンドウの場合にしか使えないらしい。 ここの

おれは鎌倉市で二十年近く暮らした。おまえらは鎌倉の一部しか知らない。 「鎌倉には鎌倉駅か北鎌倉駅から行けばいいんでしょう？」と思っているのか？　違う。大船から行け。 湘南モノレールに乗るのだ。 そして、「西鎌倉」へ行け。「北鎌倉」ではないぞ。おれは昔、和装をした女性二人が「西鎌倉」で降りて、「えー、お寺とかないんですか？」とか言っていたのを目にしたことがある。ここにはない。しかしなんで、あえて「西鎌倉」を選んだのか。鎖大師へ行け。 西鎌倉駅前、ここは昔コンビニだった。ニートだったおれは早朝ここに週刊ジャンプを買いにきて、車で接触事故を起こした。 とにかく湘南モノレールだよ、兄貴。え、おれの兄貴って誰だ？ SUZUKIYAはおれの身体を構成する食品を供給していていたスーパー。 まあ、七分おきにモノレールはやってくる。 子供のころの外食といえば、このロイヤルホストか昔対面にあったすかいらーくだ

はじめにこんにちは、PIVOTでソフトウェアエンジニアをしている裾分です。PIVOTは2024年2月にアプリ・Webを本格始動しました。私はPIVOTにジョインして以降、サブスクリプション機能の開発をしてきたので設計の概要と決済プラットフォームが係る実装の難しさについてまとめてみました。 本題冒頭のリリースの通り、PIVOTはYouTubeからプロダクトに集中するにあたり、サブスクリプション機能をリリースしています。 サブスクリプションを実装するにあたり考慮すべき点として、以下の状態を考慮する必要があります。 自サービスで管理する状態 ユーザーのサブスクリプション ユーザーのプラン 他サービスで管理する状態 ユーザーへの課金を行うプラットフォームに登録されているサブスクリプションの状態 決済状態（成功 | 失敗 | …） PIVOTの場合では、決済プラットフォームとして App Store

米カリフォルニア大学サンディエゴ校に所属する研究者らが発表した論文「Taking ASCII Drawings Seriously: How Programmers Diagram Code」は、ソースコード内で使用するアスキーアート（ASCII art）を収集し分析した研究報告である。 ▲ソースコード内で活用されたアスキーアートの一例 keyboard_arrow_down 研究背景 keyboard_arrow_down 研究内容 オープンソースのソフトウェア開発では、プログラマーがコードの中にアスキーアートを使って図を描き、アイデアを視覚的に表現することがよくある。アスキーアートはコードや自然言語では表現しにくい概念を視覚的に明快に説明でき、またコードよりも詳細度は低いものの、コードを理解するうえで「サムネイル」のような役割を果たす。 こうしたアスキーアートは、実際のソフトウェア開発

GitHub、「Copilot Workspace」テクニカルプレビューを開始。ほとんど全ての開発工程をAIで自動化 テクニカルプレビューは上記のCopilot Workspaceのページからウェイトリストボタンをクリックして申し込みます。 Copilot Workspaceはほとんど全ての工程を自動化 Copilot Workspaceは、自然言語で書かれたIssue（課題）を基に、Copilotが仕様案と実装計画を示し、コーディングや既存のコードの修正を行い、ビルドをしてエラーがあればデバッグも行うという、プログラミングのほとんど全ての工程をCopilotが自動的に実行してくれる、というものです。 人間は各工程でCopilotから示される内容を必要に応じて修正するか、そのまま見守ることになります。 GitHub CEOのThomas Dohmke（トーマス・ドムケ）氏は、Copilot

より良いコミットメッセージを残すことは Git を使った開発をする上で重要なことです。優れたコミットメッセージは、それを読んだ人がコードを理解するのに大いに役立ちます。 では、どのようなメッセージが良いもので、どのようなメッセージが悪いものなのでしょうか？ それについて掘り下げていきたいと思います。 基本的な Git Commit Message の書き方 詳しいところは、以下の3サイトを参照してください。特に「How to Write a Git Commit Message」には基本がすべて書かれています。 How to Write a Git Commit Message https://cbea.ms/git-commit/ Gitのコミットメッセージをうまく作成する7つのルール （「How to Write a Git Commit Message」の和訳記事） https://

かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ

14位：カレーパンマンとしょくぱんまんは人気がない

2000年代以降、日本のTVアニメにおけるクレジットアニメーションは単なる世界観のプレゼンテーションに留まらない映像表現を見せている。その背景には映像制作のデジタル化はもちろん、動画プラットフォームのコミュニティから輩出されたモーショングラファーがグラフィックとセルアニメを高度に統合したクレジットアニメーションを制作するようになった状況がある。本稿ではこれらのTVアニメのクレジットアニメーションがどのような歴史文脈の上にあるのか考察してみたい。 バナー画像：Oskar Fischinger, An Optical Poem, 1938 ◎モーショングラフィックスとは そもそも「モーショングラフィックス」という言葉を最初に用い始めたのは、CGアニメーションの父と呼ばれるジョン・ホイットニーだ。ホイットニーは第二次世界大戦後、爆撃や対空砲火の照準装置のメカニズムを応用したアニメーション装置によ

こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 最近、プロダクトやサービスの内容を紹介する手段として、イラストやモーショングラフィックなどを用いた動画が使用されているのをよく見かけます。 そこで今回は、サービスの内容を1~2分でまとめたサービス紹介動画を複数ピックアップし、その構造を分析してみることにしました。 はじめに本記事を書くに至った経緯私は現在、映像のデジタル合成やモーショングラフィックの制作などができるAdobeのソフト“After Effects”の学習をしています。 直近のゴールとして、モーショングラフィックを用いたサービス紹介動画を作れるようになろう！ということで、今回の記事はその学習の一環としてまとめました✍️ 動画で伝えるために大切なことAfter Effectsのスキルも重要なのですが、サービス紹介をする上でより重要なのはそのストーリー構成