CSS Gridのアニメーションが全モダンブラウザ対応! 手軽に楽しめる表現豊かなナビゲーション
Chrome 107およびEdge 107にて、CSS Gridで行や列のアニメーションが可能になりました。SafariおよびFirefoxは対応済みなので、全ブラウザで使えることになります。 本記事では、CSS Gridのアニメーションについてデモを交えながら解説します。 目的のレイアウト 次のようなレイアウトを作りながら解説します。 左側のナビゲーションと右側の写真表示エリアからなる2カラムのコンテンツです。 左側ナビゲーション内のボタンをクリックすると、次のことが起こります。 左側がアニメーションしつつ広がる 右側エリアがアニメーションしつつ狭まる 使用するHTML / CSS / JavaScript HTMLは次のようになっています。 ▼ HTML <heder> <button class="menu-button">メニューボタン</button> </heder> <div
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), email: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge
１０行を２千兆行に水増し プログラム複雑化するＡＩを開発
ＡＩベンチャーのサイドテック社（福岡市）は、複雑なコンピュータープログラムを生成するプログラミングＡＩ（人工知能）「スパゲティ」を開発した。プログラムの可読性を低下させることで、ＩＴ業界の雇用安定化が見込めるという。 スパゲティは、ユーザーの要望に応じたプログラムを自動で生成するＡＩ。同様の機能を備えたＡＩは既に存在するが、複雑な非合理プログラムを生成できる点が異なるという。また既存のプログラムを解析して、動作を変えることなく、複雑なプログラムに書き換える機能も備える。 同社が「スパゲティ化」と呼ぶ、複雑化機能は大きく２点からなる。１つは、同じ処理を何度も繰り返して回りくどくしたり、意味のない処理を入れたりするなど不必要な動作を組み込んでプログラムの行数を増やす「水増し」、もう１つはプログラムの可読性を下げてプログラマーに精神的負荷を与える「煩雑化」だ。 同社では１０行のプログラムを２千兆
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
