本記事は「珠玉のアドベントカレンダー記事をリバイバル公開します」企画のために、以前Qiitaに投稿した記事を一部ブラッシュアップしたものになります。 はじめにみなさん、docker composeを利用しているでしょうか？ 複数のdockerコンテナをまとめて立ち上げたり、環境変数を定義できたり便利ですよね。 この記事ではある程度docker composeを利用している方向けに私が便利、便利そうと感じたdocker composeの機能を挙げてみました。 docker compose cli v2を利用docker-composeではなく docker composeコマンドも利用可能になっています。 Docker Desktopでは v3.4.0から利用可能で、基本的にはコマンドの互換性あります。 ファイル監視による自動更新docker compose 2.20.0からCompose
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
TL;DR プレビュー対象はcdk synthで出力されたCloudFormationのテンプレートファイル 構成図はVSCode拡張機能aws toolkitのApplication Composerでプレビュー表示(変更検知機能利用) nodemonを用いて、プレビューを開いた状態でtsファイル保存時にcdk synthを実行することで再表示させる nodemon -e ts --ignore cdk.out --exec 'cdk synth' 情報元: aws-summit-2024-iac-booth-demo/realtime-draw-diagram at main · aws-samples/aws-summit-2024-iac-booth-demo · GitHub 前準備 ※コンテナ開発/TypeScriptを前提とする。 1. CDKプロジェクト作成 すでに作成済み
【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法＆ハック部門の解説〜 - KAYAC engineers' blog
こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書いているであろう方々 JavaScript を学んでいる学生の方々 などたくさんの方々が挑戦してくださいました。 とても嬉しいです。ありがとうございます！ 『JS体操』とは？ 『JS体操』とはカヤックが主催する JavaScript のコードゴルフ大会です。 もともとは社内の勉強会として始めた施策です。 その詳細は以下のブログ記事を御覧ください！ techblog.kayac.com 第2問の詳細はこちら https://hubspot.kayac.com/js-taiso-002 も
Serverless Frameworkの有償化に伴いAWS CDKとAWS SAMへの移行について検討してみた | DevelopersIO
なおこの「Credits」という単位は serverless.yml ファイルのregion,stage,serviceパラメータの組み合わせによって定義されるようです。 したがって、例えば開発者やチケット毎の検証環境をstageで分けている場合は、その分Creditsが嵩むという形になります。 また、serviceもどのように分割するかで総Credit数が変わってきますので、この辺は見積りのし辛さに繋がってくるのかなと思います。 例えばregionとして東京, シンガポールを用意し、stageとしてprod, stg, dev, user1, user2があり、serviceとしてxxx, yyyがある場合、単純に掛け算をすると2x5x2の20 Creditsとなります。 また、Serverless Dashboardの機能を使うと、トレース50,000あたりで1 Credit、メトリク
TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるか ESLintとのカバー範囲の違い 本記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
Node.js には --require=module と --import=module というオプションがあります。このオプションを使うと、エントリポイントとなるプログラムよりも前に、任意のモジュールを実行できます。 例えば以下のようなコマンドを実行すると、Node.js ランタイムはまず最初に preload.cjs を実行し、それから main.mjs を実行できます。 node --require ./preload.cjs main.mjs エントリポイントよりも前に、何かしらの処理を実行したい時に使うことを想定しています。 --require と --import の違い --import も --require と同じように、モジュールをプリロードするためのオプションです。両者の違いはプリロードするモジュールの読み込み方です。 --require は require(...
生成AIグラビアをグラビアカメラマンが作るとどうなる？第26回：ローカルで使えるSD3 Mediumリリース！実力を試す(西川和久) | テクノエッジ TechnoEdge
API形式の利用だと、コストがかさむのはもちろん、Promptや生成した画像を調べ肌色過多の場合は表示できないという、グラビアを扱う筆者にとって致命的な問題がある(笑)。 SD3 Mediumがリリースされたことで、ようやくSD 1.5やSDXL同様、普通にローカルPCで生成可能になった！ただし、商用利用不可。個人レベルでの商用利用は、クリエイターライセンス($20/月)を契約しなければならない。 なお普通に肌の露出が多い程度はOKだが、いわゆるNSFWな肌色過多は出せない様、意図的にコントロールされている。またこの影響で、ある意味致命的な問題も発生する。この辺りの話は次回にしたいと思う。 SD3 MediumのMediumとは、2B(20億)パラメータでの構成という意味となる。対してAPI版はLargeと呼ばれ8B(80億)パラメータで構成されている。従って、全く同じ設定でも、解釈の度合
Intelが「Intel 3」プロセスでの大量生産開始を報告しました。Intel 3プロセスで製造する半導体は前世代のIntel 4と比べて消費電力当たりの処理性能が18％向上しているそうです。 Intel Delivers Leading-Edge Foundry Node with Intel 3 Technology; on Path Back to Process Leadership - Intel Community https://community.intel.com/t5/Blogs/Intel-Foundry/Intel-Foundry/Intel-Delivers-Leading-Edge-Foundry-Node-with-Intel-3-Technology/post/1607454 Intelは「Intel 14nm」「Intel 10nm」といったように「In
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の山岡です。この記事では、Webアプリケーション開発の際によく用いられるReactについて解説します。 Reactとは何なのか。どんな特徴があるのか。どうやって勉強すればいいのか。まだアプリケーションの開発に馴染みのない方や、プログラムを勉強したての方にもわかりやすくなるよう、適宜用語を噛み砕いて説明していきますので、ぜひご覧になってください。 Reactとは、Webサイトやアプリケーションの開発の際に用いられる、JavaScriptライブラリの一つです。Facebook社が開発し、2013年にオープンソース化されました。 Reactは、JavaScriptライブラリの中でもSPA（シングルページアプリケーション）の開発に特化しており、可読性やパフォーマンスの高さが評価されています。 Reactの特徴として、以下3つが挙げられます。 宣言的なソースコード コンポーネン
TypeScriptユーザーに贈るGleam入門
最近v1に到達したGleamという静的型付けな関数型言語があります。 GleamはErlangとJavaScriptをターゲットに実行できるため、今TypeScriptを使っている領域でも使うことができます。 この記事ではTypeScriptユーザー向けにGleamの文法を解説していきます。 記事を通してGleamの良さを感じていただければ幸いです。 Gleamの公式サイトでは以下の言語のユーザー向けのチートシートもあるため、この中に知っている言語があるのならそちらを読んでみるのがオススメです。 Elixir Elm Erlang PHP Python Rust また、個人的にGleamの情報をCosense(Scrapbox)にまとめているので、リファレンスがてら覗いてみてください。 organizationとして管理していきたいと考えているので、編集のリクエスト等も歓迎です。 編集した
Dockerコンテナを活用したテストツール【Testcontainers】 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに Testcontainersとは Testcontainersのメリット ハンズオン 環境設定 goプロジェクトの作成 必要なパッケージのインストール テストコードの作成 コンテナリクエストの設定 コンテナの起動 コンテナのホストとポートの取得 結果の確認 まとめ はじめに こんにちは！ エンジニア２年目のTKDSです！ 前回はDaggerを紹介しました。 今回もコンテナ技術を活用して、テストを容易にするツールについて紹介します。 今回取り上げるのは、統合テストやエンドツーエンドテストのためにDockerコンテナを利用するライブラリ、Testcontainersです。 Testcontainersとは Testcontainersはさまざまなプログラミング言語（Java、Go、Python、Node.jsなど）向けに提供されており、Daggerと同様にテスト用のコンテナを簡単に作
こんにちは！ VPoEの青木啓剛です。 現在、QA領域のマネジメントを兼務しておりまして、半年ほど前に コンパウンドスタートアップにおける理想のQAについて考えた という記事を執筆したものです。このときに思い描いた理想のQAへ少しずつ近づくために色々なトライをしているのですが、そのひとつとしてAPIシナリオテストツール「runn」を試してみた中で感じた利点などについて紹介したいと思います。 runnとは？ runn（ランエヌ）はオープンソースのシナリオテストツールです。YAMLのフォーマットで宣言的にテストシナリオを記述することができ、定型的なテストの実行に大変便利です。APIのシナリオテストを実行するのに便利な機能もいろいろと組み込まれており、そういった周辺機能も含めてコードでテストを定義することで再利用性の高いテスト整備が可能となります。 github.com 技術検証の背景 検証をは
slide-ai-codegen.md
slide-ai-codegen.md marp theme paginate true gaia true LLMによるフロントエンド生成自動化 mizchi | Plaid Inc TechFeed Expert Night 31 LLM 使ってますか？ 便利ですよね ChatGPT / GitHub Copilot WebUI じゃなくて CLI で自動化したいですよね？ 黎明期でまともにモジュール化しても無駄そうだし、 Deno の書き捨てスクリプト量産するぞ！ Deno for LLM 設定や依存のインストール不要のTS実行環境 書き捨ての CLI スクリプトが書きやすい => 実験しやすい npm 資産が使える import {z} from "npm:zod" コード評価に Deno Sandbox を用意できる(後述) @luca/esbuild-deno-loader で
KubeVirtを使って自宅VM基盤を構築する
VM基盤を管理するツールとして、KubeVirtがあります。KubeVirtを使うとKubernetes上でコンテナと同じようにVMを管理できます。自宅で簡単にVMを立てられるようにするためにKubeVirtを試してみたので、方法と感想をお伝えします。 KubeVirtとはVMをmanifestsとして記述すると、KubeVirtのControllerが良い感じにVMを作成してくれます。この時VMはコンテナと同じネットワーク上に存在するので、コンテナとの通信やアクセス制御などもKubernetesの仕組みに基づいて管理できます。 virtctl(kubectl virt)というCLIツールが提供されており、これを用いてVMをstart, stopしたり、ssh, console, vncなどでVMに接続したりできます。 またContainerized Data Importer(CDI)と
デジタル認証アプリについて
デジタル認証アプリについて 令和6年6月21日 安心・安全の社会の実現のためにオンライン本人確認は必要不可欠 2 本人確認を行うことで確実にプレミアム商品を 1人1個で販売し買い占めを防止 本人確認を通しフリマサイトやSNSなど ネットを空間でのコミュニケーションを安全に 本人確認を行いアカウントにログインすることで 個人情報漏洩と不正利用を防止 転売目的の買い占め防止 取引相手とのトラブル防止 不正ログインの防止 どのサービス・どのIDに対しても、スマホで本人の確認を提供 3 ※2024年6月時点では、Androidのスマホ用電子証明書に対応しておりません。 政府 サービス 市役所 サービス 金融 サービス メンバーシップ サービス マイナンバー 市民ID 金融機関口座 メンバーアカウント デジタル認証アプリで、それぞれのIDやサービスに対し、 ご本人であるかどうかの確認（認証）を行いま
CloudShell VPC environment から VPC内のEC2インスタンスやRDS DBインスタンスに接続してみた | DevelopersIO
CloudShell VPC environment から VPC内のEC2インスタンスやRDS DBインスタンスに接続してみた もっと簡単にVPC内のリソースにアクセスしたい こんにちは、のんピ(@non____97)です。 皆さんはもっと簡単にVPC内のリソースにアクセスしたいと思ったことはありますか? 私はあります。 VPC上のRDS DBインスタンスやRedisクラスターなどのリソースに接続したい場合、Site-to-Site VPNやClient VPN、Direct Connectがなければ踏み台が必要になります。 踏み台へのアクセス方法は以下のようなものがあります。 直接SSH SSMセッションマネージャー EC2 Instance Connect SSMセッションマネージャーとEC2 Instance Connectについては以下記事をご覧ください。 しかし、上述のいずれの
森ビル（東京・港）が都内で開発した大型複合施設の「麻布台ヒルズ」と「虎ノ門ヒルズ ステーションタワー」。2つの巨大開発で集客装置として重要な役割を果たしているアート文化施設の仕掛け人が、2024年6月19日付で森ビルを退職して独立する。日経クロステックの取材で明らかになった。 23年10月に開業した虎ノ門ヒルズ ステーションタワーの高層部にできた文化施設「TOKYO NODE」と、麻布台ヒルズで24年2月にオープンしたデジタル美術館「森ビル デジタルアート ミュージアム：エプソン チームラボボーダレス」（以下チームラボボーダレス）をチームラボ（東京・千代田）と共に立ち上げた現場責任者は、森ビルの杉山央（おう）氏である。 杉山氏はチームラボボーダレスとTOKYO NODEのオープンという、2つの大仕事をほぼ同時期に終えた。どちらも多くの来場者が訪れる施設になったことを見届け、「このタイミング
Github Actionsによる継続的デリバリーの構築 - SO Technologies 開発者ブログ
CTO室所属の高橋と申します。皆からはニャンさんと呼ばれております。そして私は特に無茶振りはされていません。 さて、developブランチに変更が入ったらdev環境にリリース、mainブランチに変更が入ったら本番環境にリリースを行う仕組み、いわゆる継続的デリバリーを構築しているプロジェクトは多いことと思う。我々のチームではCircle CIで行なっていたが事情があってGithub Actionsに移行することになった。ところがGithub Actionsではdevリリースと本番リリースの手順をどう共通化すればいいのか分からず迷ってしまった。 近年のソフトウェア開発の現場ではCI/CDは当たり前になっているが、もはや当たり前すぎて逆にまとまった情報がネット上にないのかもしれない。であれば得られた知見は共有しておくべきだろう。 結論から言うとジョブの共通化には再利用可能なワークフロー用いるのが
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はMisskeyで使用可能なサードパーティのエラートラッキングサービス、Sentryとその活用について紹介します。 エラートラッキングとは Misskey 2024.5.0から、外部のエラートラッキングサービスとしてSentryをサポートするようになりました。 エラートラッキングサービスは、ソフトウェア内で発生したエラーを一元化して収集・管理できるサービスです。Misskey Projectでは開発用のステージング環境を用意しており、そのサーバー内で発生したエラーを捕捉し、開発チーム内で共有する必要があったため導入しました。 エラートラッキングサービスはいくつか存在しますが、SentryはWebブラウザ・Node.jsのほか、様々なプラットフォームで動作します
人々がサ終リスクに怯えるGoogleの実験的サービスNotebookLMをしばらく試してみたのでレビューする notebooklm.google どのような用途に利用できるか 論文やレポート、記事、プレゼンテーション資料などの執筆のための情報収集 書籍データをソースにして読書と読書メモをつける ソースを元にAIを使ってアイデアの創出、ブレインストーミングなどを生成する のような、保持しているソースをもとに要約・抽出・読解を補助する一般的なタスクで活用できる。 ソースはGoogle Driveにある文書やスライド、PDF・テキストファイルあるいはテキストをコピペして自由に追加できる。 GeminiやGoogle AI Studioを使っても画像やファイルをアップロードして似たような単発のチャットは可能だが、NotebookLMでは複数のソースを蓄積してそれに対して逐次検索と生成を行ってくれる
【2024年6月】フリーランス案件の単価における市場動向【フリーランスボード】フリーランスエンジニア案件の月額平均単価は71.5万円 INSTANTROOM株式会社（本社：東京都渋谷区、代表取締役：曽根弘介）が運営する、フリーランスエンジニア・ITフリーランスの案件検索サイト「フリーランスボード（https://freelance-board.com）」は2024年6月のフリーランス案件の単価における市場動向の調査結果を発表いたします。 ◆数字で見る「フリーランス市場動向」 フリーランスボードでは2024年6月6日時点の141,500件の掲載案件を対象に開発言語・フレームワーク・職種別の月額平均単価を調査いたしました。 ■フリーランス案件の月額平均単価 2024年6月のフリーランス案件の月額平均単価は71.5万円、最高単価は320万円です。 ▼掲載中のフリーランス案件はコチラから http
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
Webエンジニアのhikaeです。 皆さんは「SOLID原則」についてどの程度知っているでしょうか？ ソフトウェア開発においてメンテナンスしやすいコードを書くことは、とても重要な要素です。 今回はD（Dependency inversion principle）「依存性逆転の原則」にあたる内容で、 対象のパスで対象のファイルをインポートするのを禁止する仕組みを整えてみました。 日本語の記事が見当たらなかったので、始めてみたい人はこの記事を参考にプロジェクトに導入してみてはいかかでしょうか？ 今回の実装PRは以下に含まれています。 インストール 依存性逆転の原則に関しては以下の記事を参考にしてください。ここではルールの設定方法について説明します。 使用するライブラリはeslint-plugin-importです。メンテナの方、ありがとうございます。 npm install --save-de
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
個人的docker composeおすすめtips 9選 | フューチャー技術ブログ
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
AWS CDKのコード変更時にリアルタイムで構成図のプレビューを表示する
TypeScript 5.5 で追加された正規表現構文チェックを理解する
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
Announcing TypeScript 5.5 - TypeScript
Node.js の --require/--import オプションについて - mizdra's blog
ついにIntelが3nm相当のプロセスルール「Intel 3」での大量生産を開始
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
runnによるAPIシナリオテスト自動化を試してみた - estie inside blog
「チームラボボーダレス」「TOKYO NODE」の立役者、杉山央氏が森ビルから独立
Sentryで始めるエラートラッキング | gihyo.jp
NotebookLM便利活用情報 - laiso
【2024年6月】フリーランス案件の単価における市場動向【フリーランスボード】
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
「このパスでこのファイルのインポートをさせたくない、、、」をESLintでルール化する