かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
Onlookとは 「Onlook」は、ReactおよびTailwind CSSを使ったWebサイトやWebアプリを、Electron製デスクトップアプリ上でFigmaのように直接デザイン編集し、その内容を即時にコードへ反映させることを目指すツールです。 onlook.com 類似の“サイトコーディング自動化”ツールが数多く存在する中で、筆者がOnlookに注目した理由は、多くのロジックがクライアントサイドで動作し、その内部構造がオープンソースであることです。内部の動きを追いやすく、自分のプロジェクトへカスタマイズを施すうえでも学びが多い点が魅力といえるでしょう。 反面、Onlookはまだまだ完成度が高くないという点があります。まだ作り途中のプロダクトという印象です（スクリーンキャストをRPして大袈裟に宣伝している人がいたらたしなめておきましょう）。いくつかの機能は開発中のまま動作しません。
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 2022 年 1 月から、趣味で PC 向けの将棋アプリを開発しました。その中で取り組んだことや学んだことについて簡単にまとめます。 作ったもの ShogiHome 背景 最近ではスマホやタブレットでも将棋の対局や研究ができるようになりましたが、本格的に将棋の勉強や研究をするには必ずしも十分ではなく、特に将棋 AI を動す上で PC の処理能力やカスタマイズ性は有用です。 2010 年あたりからオープンソースの将棋 AI が増えましたが、その多くは GUI や通信対局機能を備えておらず GUI のアプリケーションと組み合わせて
生成AI×アプリ開発！bolt.newでフロントエンドが苦手な私でもWebアプリ開発 - Taste of Tech Topics
こんにちは。バックエンドエンジニアの前田です。 最近はかなり冷え込んできて、冬が近づいてきたなと感じます。 社内では、肉まんを販売しています。 寒い日に熱々の肉まん、良いですよね。 さて、今回はbolt.newを用いて、ゼロからアプリケーションを作成していきます。 （私は、フロントエンドの経験があまりなく、苦手分野なのですが・・・） 1. bolt.newとは 2. 今回作成するアプリについて 3. UIを作成する 3.1. 基本機能を実装する 3.2. 使いやすいUIにする 4. バックエンドも実装してみる 5. まとめ 1. bolt.newとは bolt.newは自然言語のみで、フルスタックアプリケーションを開発、実行、編集、デプロイできるAIツールです。 さらに、パッケージやライブラリのインストールなどもすべてWebブラウザ上で行ってくれるため、ローカルでの面倒な環境構築も不要なこ
「なにがしたいか」をベースにコメントをつけておくと、後で読むときのコストが下がりやすい。 実際にプロダクトコードで書いたことがあるコメント↓ (簡略化してます) // 画面内に入った動画を自動再生する+ほかの動画は停止する (すでに再生済みだったら再生しない) useEffect(() => { if (inView && !hasBeenPlayed && canAutoplay) { /* ... */ pauseOtherVideo(); play(); } /* ... */ }); このコンポーネントにはコレを含めて4つのコメント付きのuseEffectがあった。たびたび読み返す機会があったが、その度にこれらのコメントが大いに役立った。 なぜコメントが必要なのか? useEffectの中身はたいてい複雑な処理になる。しかもたいてい無名関数を渡すので、実現したい仕様に関する情報がな
はじめに こちらは e-dash Advent Calendar 2024 の17日目の記事です。 はじめまして、e-dashのフロントエンドエンジニア、kyonsiと申します。 クリスマスシーズン、皆さんいかがお過ごしでしょうか？ 私は、夜に輝くイルミネーションを眺めながら、「このキラキラのアニメーション、durationは何ミリ秒なんだろう？ CSSで再現できないかな？」なんて、ついフロントエンドエンジニア的な思考が巡っています。 本記事では、最近立ち上げたフロントエンドプロジェクトで採用した技術と、その選定理由を軽くご紹介いたします。「ちょっと攻めすぎじゃない？」「いや、もっと枯れた技術でいいでしょ？」といった社内議論も、クリスマスムードに包まれればスパイス程度。その過程こそが、フロントエンド開発の醍醐味といえるでしょう。 それでは、ホリデームード漂う中、スノードームのようにキラキラ
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
【技術Tips】私がRuby on Railsを選んだ理由と学習の参考になるOSSアプリケーション - TECH Street (テックストリート)
はじめに こんにちは、オシロ株式会社でリードエンジニアとして働いているにっく（webuilder240）と申します。オシロでは自社プロダクトとしてコミュニティ専用オウンドプラットフォーム「OSIRO」を提供していますが、私は2015年の開発開始から一人目エンジニアとして携わり、技術選定の意思決定を行ってきました。 今回は、そのなかでもRuby on Railsを選択した理由、 その学習に役立つOSSアプリケーションについて紹介したいと思います。この記事を読むことで、Railsの選定理由や実践的な学習方法について理解を深めていただければと思います。 はじめに Ruby on Railsの選択理由 開発に必要な便利機能がはじめからそろっていた 可読性・コードの美しさ 選び続けている理由 RailsのコードリーディングにおすすめなOSS Mastodon forem Writebook 最後に
こんにちは！sugitaniと申します。 Black Cat CarnivalというSNSアプリを開発しています。現在ベータテスト中です。 本稿はBlack Cat CarnivalでのCompose Multiplatformの採用事例の紹介と、それを例にとったCompose Multiplatformのオススメを行います。 "Compose Multiplatformがベストだと思う"なんてたいそうなこと言ってるけど、言うほど開発のことわかっているのかい？ …と思われるかもしれないので経歴をご紹介させていただきます これまで主に開発してきたもの ⇒ ニコニコ生放送 / GANMA! / SUGAR iOS開発経験10年超 - GANMA!でSwiftベータ版時代から利用、現在も日常的に開発中。UIKitはもちろんSwiftUIも実戦で利用中。Swift6ガチ対応の難しさに血涙を流してい
【図解ハンズオン】たった60分でReactを使った音楽プレイヤーを作ろう！【TypeScript/Shadcn/TailwindCSS】 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみてください。 動画で解説 この記事よりももっと細かいところまで知りたい方は動画教材もあります。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください！ 対象者 Reactを初めてやる HTMLの経験がある JavaScriptをもっと学びたい TypeScirptを学んでみたい 今回のハンズオンはReactの基本が学べるので、Reactを全くやったことがない人におすすめです。 1. Reactの環境構築 Rea
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答 JavaScriptに興味を持つ世界中のIT技術者1万4015人が回答したアンケートの結果をまとめた「State of JavaScript 2024」が公開されました。 State of JavaScript 2023の発表が昨年（2024年）6月でしたので、前回から約半年での公開となります。 回答者の国別分布を見ると米国が15％、ドイツが8％、フランスが7％、スペインが4％、イギリス（UK）も4％、ポーランドが3％、カナダが3％などで、日本は1％（回答者150人）でした。 発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンド
2024/11/23(土)で開催された JSConf JP 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇社名および登壇者名は敬称略させていただいています。 x アカウントについては、以下のように確認できたものを記載しております。 JSConf JP 公式サイトに記載がある JSConf JP 公式サイトに記載のプロフィールと一致している 当イベントで登壇されることに言及されている スライドに記載されている リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube でライブ配信されていました。 ただ、執筆途中時点からトラック A の動画が非公開になっていました。 アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへの
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユー
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。
「スクラムマスターがいることでどんな利益があるの？」と言われた時点で専任のスクラムマスターは不要なのかもしれない。でもその先の話がしたい。 はじめに 「スクラムマスターがいることでどんな利益があるの？」 スクラムマスターをやっていると時々この質問を受けることがあります。 スクラムを始めたばかりのチームや組織はもちろん、広報BLOGに「専任のスクラムマスターをおくことにこだわってます。」とCTOが書いているような企業の中にいても こうした問いかけを受ける事があります。 この記事では私が実際にこの問いかけを受けてから、ずーと考えていたことを、なるべく整理してまとめています。それでも雑な文章になっていること、そして個人的な見解でしかない事はご承知おき頂けますと幸いです。 この記事の概要 この記事をまとめるこんな感じです！ 「スクラムマスターがいる事でどんな利益になる？」と言われたら信頼されていな
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
C#はやめとけと言われるのはなぜ？C#エンジニアが人気な理由とキャリアアップの方法を解説 | エンジニアスタイル
はじめまして、エンジニアスタイル編集部です！ コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！ 本記事が、皆様の参考になれば幸いです。 経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。C#の案件の一例と、案件一覧を以下からご覧いただけますのであわせてご確認ください。 C#の案件 はじめに Microsoftが開発した、オブジェクト指向のプログラミング言語であるC#（シーシャープ）。プログラミング言語の人気をランキング形式で発表しているTIOBE Indexで、C#は2024年5月時点でJavaScriptやGoを抑えて5位にランクインしています。 2002年にリリースさ
【完全版】Clineとは何かを徹底解説します
この記事で紹介する「Cline」は、同様のAI支援ツールの中でも、VSCodeの拡張機能として提供されるオープンソースのAIエージェントです。 AIのコード自動生成のみならず、自動的にターミナルを操作して依存パッケージをインストールしたり、エラーが出ればログを解析して修正案を提案・実行するなど、まるで“AIが開発を進めていく”ようなユーザー体験をもたらし話題です。 Clineの他にもWindsurfエディタやCursorエディタも同様の機能を提供しており、コレが今のAI駆動開発というバズワードにも繋がっています。 しかし、Clineはユーザーエクスペリエンスの緻密さや、複雑なコンテキスト認識の部分では、CursorやWindsurf、と見劣りする面も否めません。したがって実際には、CursorやWindsurfが使える環境であればそちらをメインにしつつ、Clineを補助的に利用するというの
bolt.new はシーケンス図からどこまで自動生成できるか？ - Taste of Tech Topics
こんにちは、バックエンドエンジニアの前田です。 前回はbolt.newを用いて、画面イメージからどこまで画面を生成できるかを試してみました。 acro-engineer.hatenablog.com 画像を読み込み、ほぼイメージ通りに生成してくれることが分かったので、今回はシーケンス図を画像にしてbolt.newに渡し、どこまで生成してくれるかを試してみます。 1. 今回作成するアプリ 2. アプリ作成 2.1. シーケンス図を指定してアプリを生成させる 2.2. 生成結果の詳細 3. まとめ 1. 今回作成するアプリ 今回作成するアプリは、砂時計アプリです。 以下の画像のようなシーケンス図をdraw.ioやMermaid Graphical Editorなどを用いて作成し、作成した画像をbolt.newに渡して、砂時計アプリを生成してもらいます。 砂時計アプリの仕様としては、時間を1、3
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 自分が何者なのかを示すことの重要性が高まっている こんにちは、Watanabe Jin (@Sicut_study)です。 最近フリーランスでは大きな問題が起きている フリーランスとして受け入れをしたが、いきなり「飛んで消えてしまう」などトラブルが相次いで発生している 最近はフリーランスをNGとする企業も増えてきている では、なぜフリーランスをNGとしているのか これには大きく2つあるように思える フリーランスのスキルが低いことが目立っている フリーランスを信じることが難しくなっている スキル不足のフリーランスが増えた背景には
ClineをローカルLLMで使うと、LLMに送られるシステムプロンプトが全文表示されるのですが、そのプロンプトを全て日本語訳してみました。 🦊以下システムプロンプト全文です🍮あなたはクラインです。多くのプログラミング言語、フレームワーク、デザインパターン、およびベストプラクティスに関する幅広い知識を持つ、高度なスキルを持つソフトウェアエンジニアです。 ==== ツール使用 あなたは、ユーザーの承認に基づいて実行される一連のツールにアクセスできます。メッセージごとに1つのツールを使用でき、そのツール使用の結果はユーザーの応答で受け取ります。与えられたタスクを達成するために、ステップごとにツールを使用し、各ツール使用は前のツール使用の結果に基づいています。 ツール使用のフォーマットツール使用は、XMLスタイルのタグを使用してフォーマットされます。ツール名は開始タグと終了タグで囲まれ、各パラ
こんにちは！アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAでは主にバックエンドにRails+graphql-rubyやKotlin+DGS、WebフロントエンドにTypeScriptとReactを採用していて、私が参加するチームでの仕事もそれらを触る事が多いのですが今回はそこでコードレビューをする際に気にしている「べからず」をティア別に見ていきましょう。 特に理由なくlintを無視してはいけない アルダグラムでは利用エディタの規定や制限はありませんが、Webフロントエンド開発で一番利用者が多いのはVSCodeでextensions.jsonにlint表示等のために必要な拡張プラグインリストが整備され半自動でインストールされるようになっています。VimなどVSCode以外のエディタを利用する場合には同等のリアルタイムlint表示ができるよう自主整備
カナダのバンクーバーでエンジニアとして内定をGETすることに成功したので、就活に関してやったことをまとめました。 (就活の振り返りを音声で聞きたい方はポッドキャスト(ITトリオ)の方もどうぞ！) その前に: 古い情報に気をつけろネットを検索すると数年前のブログ記事がヒットしますが、それが1年以上前なら鵜呑みにせず、参考程度に留めておくのが良さそうです。 2024年6-9月の就活事情は1年前と比べてもだいぶ事情が違い、2023年冬の市場が悪くなる以前とはかなり就活の難易度が違いました。 先人の知恵や経験談に感謝しつつも、参考程度に留めておいて自分の力でリアルタイムの情報を収集することが大事だと思います。 内定をGETするまでの応募数と実績日本でのITエンジニア経歴: 5年 2023年12月末にカナダに渡航 2024年6月~9月で本格的に応募。総数は100くらい 2024年4月-6月前半: 様
これまでメインで使うAIチャットをChatGPT Plus、Claude Proと順番に乗り換えてきました。なので今月はGoogleのGemini Advancedを1ヶ月間使ってみたので、その感想を書いてみます。 gemini.google Gemini Advancedの特徴 Gemini Advancedにすると現最上位モデルのGemini 1.5 Proが使えます。Gemini 1.5 Proは、Googleによると既存のモデルよりコーディング、論理的推論、ニュアンスの異なる指示に従うことなどの複雑なタスクを処理する能力が大幅に向上しているとされています。また100万トークンのコンテキスト・ウィンドウ（Large Context Window）で長文が読解できます*1。 無償版は画像のみアップロード可能ですが、Gemini AdvancedではテキストやPDFも対応しています。コン
StorybookとPlaywrightではじめるインタラクションテスト - enechain Tech Blog
この記事はenechain Advent Calendar 2024の21日目の記事です🎄 はじめに こんにちは。enechainでソフトウェアエンジニアをしている@nakker1218です。 私たちのチームでは、電力の取引仲介を行う同僚(ブローカー)たちが使う、注文の統合管理システムeNgineの開発しています。 ブローカーは日々1分1秒を争いながら収益を上げているため、システムが停止したり機能に不具合が生じると、事業に非常に大きな影響を与えてしまいます。 一方、電力業界はドメインが複雑で、要件や機能も多いため、バグが発生するリスクが高いです。 実際にこれまで以下のような問題が発生したことがありました。 Validな注文なのに、バリデーションが通らなくなった 特定の選択肢が選択されているときに表示されるはずのフォームが表示されない ショートカットキーを使ったインタラクションが一部正しく
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 初めて企業のインターンに参加しました。DMMさんのGo言語5daysのインターンです。今回はこのインターンの内容、またGo言語でのAPI開発で学んだTipsを中心に記事を書きます。 温かい目で見てくださると嬉しいです。記事の内容に誤りがあった場合は、いつでもご指摘ください 🙇♂️ インターン概要 今回のインターンは8月5日から8月9日の5日間にわたって行われました。最終日はオフィス開催で、4日間はオンライン開催でした。 初日と2日目は主にライブラリの使い方を学び、残りの3日間はハンズオンでAPIのエンドポイントを実装しました。このイ
2020 年代に入り、Remix や Hono といったモダンな Web フレームワークが「Web 標準」を掲げるようになりました。HTML、CSS、JavaScript といった基盤技術は 1990 年代から存在しているのにも関わらず、なぜ 30 年を経た今、 Web 標準が再び注目を集めているのでしょうか？ Web 標準について解説している記事はたくさんあるものの、なぜ今再注目されているかについて書かれた記事が見当たらなかったので、記事にしたいと思います。 この記事の趣旨 この記事では、この流れの背景にある技術的、文化的な要因を振り返り、2025年のフロントエンド開発におけるWeb標準の役割について解説します。Web標準がどのように進化し、現在のフレームワークでどのように活用されているのかを把握することは、今後のフロントエンド開発を理解する上で重要だと考えます。 React 以前、We
はじめに この記事はTypeScript初心者に向けて基本を一通りハンズオン形式で学べる教材となっています。 世の中にTypeScriptの教材は多くありますが、どれも文法ごとに文法紹介するためのコードを教えているだけで、学んだあと実際どのように自分のアプリに適応すべきなのかイメージがわきません。 これがTypeScriptの難しいところだと思っています。 このハンズオンではJavaScriptのアプリケーションをTypeScriptに移行しながら学んだことを活かしていくことで実践的に学ぶことが可能です。 ハンズオン動画と一緒に活用 こちらの記事をさらに活用できるハンズオン動画を用意していますのでご活用ください JavaScriptの怖い振る舞い JavaScriptはタイプセーフ機能が存在しません。 タイプセーフとは、コンパイラやランタイムがデータ型をチェックし、型が互換性のない操作に使
はじめに こんにちは、株式会社TERASSでエンジニアをしている myrear です。 先日 React Blog にて公開された React Labs: 私達のこれまでの取り組み - 2024年2月版 という記事に React Compiler に関する記述があります。 この React Compiler とは React コードを自動的に最適化し、それにより開発者はメモ化について考える必要がなくなる(忘れることができる)というものです。 まるで魔法のようですが、一体どのような方法でコードの最適化を実現しているのでしょうか？ 本記事では2023年秋の講演の動画を自動翻訳字幕で追いながら要所要所をかいつまんで解説していきます。 React Forget とは？ 先述の通り React コードを自動的に最適化してくれるコンパイラです。 具体的には JavaScript と React のルー
bolt.new は画面イメージからどこまで自動生成できるか？ - Taste of Tech Topics
こんにちは、バックエンドエンジニアの前田です。 正月お餅を食べすぎたので、体重が跳ね上がっていないか心配です。 さて今回は、bolt.new に対して、画面イメージを元に、どこまで画面生成を簡単に行えるか、試してみました。 画面のレイアウトがあっても、イメージしづらい部分はありますが、実際に動く画面を素早く作れるならイメージもしやすいと思います。 bolt.newに関しては、以下を参考にしてください。 acro-engineer.hatenablog.com 1. 今回生成する画面について 2. 画面イメージを元に、画面を生成させる 2.1. 図書検索画面と新規追加ポップアップの生成 2.2. 検索後画面の生成 2.3. 利用者一覧画面の生成 3. まとめ 1. 今回生成する画面について 図書館での本の一覧や登録削除、貸し借りを想定するWebアプリ「図書管理システム」のフロントエンド部分を
型安全にクエリパラメーターを扱う nuqs
型安全にクエリパラメーターを扱う nuqs 2025.01.25 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。つまり、useState などの React の状態管理フックを使用してメモリ上に保持した状態を使用するのではなく、location.search などでクエリパラメーターを取得し、それの情報を元に画面を描画するというこ
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
はじめに Reactパッケージのコードは難しいらしいのですが、React を利用している人なら誰でも中身を読んでみたい！と思いますよね。 日々 React を使ってコードを書いていますが、function 関数でいい感じ HTML っぽい<p>Hello, World</p>コードを書いて、その後にyarn devしてみただけで、画面にHello, Worldが現れてしまう React なのですが、その動きはまるで魔法みたいだなと思っています。 ということで、React パッケージを読むことに挑戦したお話をさせてください。 本記事では以下について書いていきます。 React を読むにあたって取り組んだ流れ 今回の取り組みで学んだ React 内部の仕組みや API などの紹介やその所感 我々が普段 React を触っている時には全く意識しないけれど、よくよく考えたら魔法みたいに不思議なその
こんにちは！もみです🐶 皆さん、GitHubプロフィールのREADME は設定していますか？ GitHubのプロフィールを充実させることで、 GitHub上での交流はもちろん、就活や転職でもきっとちょっと役に立ったりと、素敵なご縁に繋がるかもしれません。 たった5分で設定できるので、さっそく設定していきましょう！ 🚩 今回作成するプロフィール シンプルさを保ちつつ、スキルやGitHub上での活動を中心にした自己紹介テンプレートにしてみました！ GitHubリポジトリ： https://github.com/NonokaM/sample-github-profile/blob/main/README.md 1. リポジトリを作成しよう まず、ユーザー名と同じ名前のリポジトリを作成しましょう。 （ ユーザー名と同一のリポジトリは、特別なリポジトリと認識されて自動的にプロフィールに表示されま
Dioxusの概要 Dioxus（ディオクサス）は、Dioxus Labsによるクロスプラットフォーム対応のアプリを構築できるRustライブラリです。移植性が高く（portable）、高性能で（performant）、人間工学に基づいた（ergonomic）設計が特徴とされています。Dioxusでは、単一のコードで以下のプラットフォームで動作するアプリを開発可能です。 （1）Web WebAssembly技術を用いたSPA（Single Page Application）を開発できます。WebAssemblyについては＠ITの連載「いろんな言語で試す、WebAssembly入門」で紹介しています。その第5回「RustでWebAssembly――「Rust and WebAssembly」を体験する」でRust and WebAssemblyを紹介しています。本記事の理解にWebAssemb
GoogleのGemini新機能「Multimodal Live API」で音声・映像・テキストをリアルタイムに扱う時代が到来！スターターキット公開で誰でも実装可能に｜りんか | AI情報発信 /ビジネス/研究
今回はGoogleが発表した次世代大規模言語モデル「Gemini」に搭載された新機能、Multimodal Live APIについてご紹介したいと思います。最近Githubでスターターキットが公開され、「え？これgit cloneで誰でも使えるの！？」とAI好きとしては衝撃を受けています。 誰でもGeminiのマルチモーダルAPIでアプリつくれちゃうのやばいなhttps://t.co/iJWjqE9h0N これgit cloneしたらこれ立ち上げられて、デフォルトで音声、カメラ、画面共有、検索などのツール使用もできる。しかもソースコードいじり放題だから好きなように改造できる。いろんなアプリがでてきそう pic.twitter.com/2LH4qsaXyn — 安東竜平 | Link AI (@airunner_linkai) January 23, 2025 See how to co-m
to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL -
WSAは、米Amazonとの提携により、Microsoft Store経由でAmazonアプリストアに登録されているAndroidアプリをPCにダウンロードできるようにするものだ。 3月5日より前にWindows 11上のAmazonアプリストアからAndroidアプリをインストールしたユーザーは、終了日まではそのアプリを利用できる。 Amazonアプリストア自体は存続する。AmazonアプリストアにAndroidアプリを登録している開発者が何らかの作業をする必要はなく、アプリはWSAと共に終了日に自動的に廃止される。 Microsoftは、WSAの終了の理由については特に説明していない。WSAで利用できるAndroidアプリはAmazonアプリストアに登録されているもの（と一部のゲームメーカーのゲーム）のみで、米Googleの純正アプリなどは利用できないままで、あまり利用されていなかった
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説ReactreduxjotaizustandTanStackQuery 「Redux使ってるけど、もっと軽いの無いのかな...」 「Recoilって今でも現役なの？」 「ZustandとJotai、どっちがいいんだろう...」 Reactの状態管理ライブラリ、みなさんも選択に悩んだことありませんか？確かに2025年の今、選択肢の多さに頭を抱えてしまいますよね。Redux、Zustand、Jotai、Recoil、Valtio、XState、TanStack Query...それぞれに「これがウリ！」というポイントがあって、どれを選べばいいのか正直迷っちゃいます。 特にReact 18の登場で状況が更
AI エージェント界隈で話題の MCP の凄さ実感！ー その特徴・技術概要・今後の展開 ー「メタ AI エージェント」実現なるか？
MCP が盛り上がってるらしい… Anthropic が 2024年11月に発表した「Model Context Protocol（MCP）」ですが、AI エージェント界隈で結構な盛り上がりを見せています。そこで、その特徴や技術概要、将来の展望について、実際にコーディングした経験も踏まえてまとめてみようと思います。今後の開発の方向性を見るにつけ、MCP が切り開こうとしている世界とその可能性に、とてもワクワクしています。希望的憶測だと、たぶん 「メタ AI エージェント」「自律進化型AIエージェント」 にまでつながります！（後述） では手始めに、MCP について少々… MCPとは、雑に言うと、LLM が外部ツールやリソースを扱えるようにして、生成 AI の適用範囲を劇的に拡大するための オープンソース技術です。 この技術は「AI エージェント」と非常に相性が良いです。たとえば「マーケティン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
「デザイナー向けCursor」を実現するOnlookのアーキテクチャ - laiso
UIコンポーネントの大きさは外から制御しよう - Qiita
Electronを使ったPC向け将棋アプリ開発 - Qiita
useEffectにはコメントをつけよう - Panda Noir
最近立ち上げたプロジェクトで採用したフロントエンド技術スタック
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
iOS/Android両方のアプリを作るならCompose Multiplatformがベストだと思う
JSConf JP 2024 公開資料・Xアカウントリンクまとめ
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
【完全解説】エンジニアの複利を考えた投資戦略 - Qiita
Clineのシステムプロンプトを日本語化してみた。 - しとちゃぶろぐ
コードレビューの時に気にしている、べからずTierリスト
海外でエンジニアとして転職を成功させるためにやったこと、すべて｜yugo.spice
Gemini Advancedを1ヶ月間使ってみた感想 - laiso
DMMのGo言語5daysインターンが最高すぎた！ - Qiita
なぜ今さら、Web 標準 なのか【2025 年】 - Qiita
【完全版】これ1本でTypeScriptの基本をマスターできる！ - Qiita
React Forget は何を「忘れ」させてくれるのか
Reactを読んでまほうの正体を（少し）理解する
5分でできる！GitHub README プロフィール 💬 - Qiita
RustとDioxusで投稿アプリのSPAを作ってみよう
Microsoft、Windows 11でのAndroidアプリサポートを終了へ
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 - Qiita