こんにちは！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が付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユー
とてもニッチな用途で使えるコンポーネントですがその場の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年にリリースさ
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の登場で状況が更
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スタイルのタグを使用してフォーマットされます。ツール名は開始タグと終了タグで囲まれ、各パラ
【2025年最新】プログラマー必見！バイブコーディング(Vibe coding)を加速するWindsurf代替ツール10選 - Qiita
ツール選択ガイド 大規模企業向け: Cursor、GitHub Copilot、Tabnineが特に適しています。セキュリティとスケーラビリティを重視する場合はTabnineがおすすめです スタートアップ/個人開発者向け: Codium、Trae、VS Code + AI拡張機能が費用対効果に優れています 特定環境に特化: Microsoft環境ならIntelliCode、AWS環境ならCode Whisperer、Python開発ならAIプラグイン付きPyCharmが最適です。 リモートチーム: Replitはブラウザベースで環境構築不要なため、分散チームに最適です バイブコーディング体験重視: Traeは特にバイブコーディングワークフローに最適化されています それでは、各ツールの詳細を見ていきましょう！ 1. Cursor: 精密さを極めたAIコーディングの新星 まず最初に紹介するのは
こんにちは！アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAでは主にバックエンドにRails+graphql-rubyやKotlin+DGS、WebフロントエンドにTypeScriptとReactを採用していて、私が参加するチームでの仕事もそれらを触る事が多いのですが今回はそこでコードレビューをする際に気にしている「べからず」をティア別に見ていきましょう。 特に理由なくlintを無視してはいけない アルダグラムでは利用エディタの規定や制限はありませんが、Webフロントエンド開発で一番利用者が多いのはVSCodeでextensions.jsonにlint表示等のために必要な拡張プラグインリストが整備され半自動でインストールされるようになっています。VimなどVSCode以外のエディタを利用する場合には同等のリアルタイムlint表示ができるよう自主整備
AI エージェント界隈で話題の MCP の凄さ実感！ー その特徴・技術概要・今後の展開 ー「メタ AI エージェント」実現なるか？
MCP が盛り上がってるらしい… Anthropic が 2024年11月に発表した「Model Context Protocol（MCP）」ですが、AI エージェント界隈で結構な盛り上がりを見せています。そこで、その特徴や技術概要、将来の展望について、実際にコーディングした経験も踏まえてまとめてみようと思います。今後の開発の方向性を見るにつけ、MCP が切り開こうとしている世界とその可能性に、とてもワクワクしています。希望的憶測だと、たぶん 「メタ AI エージェント」「自律進化型AIエージェント」 にまでつながります！（後述） では手始めに、MCP について少々… MCPとは、雑に言うと、LLM が外部ツールやリソースを扱えるようにして、生成 AI の適用範囲を劇的に拡大するための オープンソース技術です。 この技術は「AI エージェント」と非常に相性が良いです。たとえば「マーケティン
これまでメインで使う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はタイプセーフ機能が存在しません。 タイプセーフとは、コンパイラやランタイムがデータ型をチェックし、型が互換性のない操作に使
カナダのバンクーバーでエンジニアとして内定をGETすることに成功したので、就活に関してやったことをまとめました。 (就活の振り返りを音声で聞きたい方はポッドキャスト(ITトリオ)の方もどうぞ！) その前に: 古い情報に気をつけろネットを検索すると数年前のブログ記事がヒットしますが、それが1年以上前なら鵜呑みにせず、参考程度に留めておくのが良さそうです。 2024年6-9月の就活事情は1年前と比べてもだいぶ事情が違い、2023年冬の市場が悪くなる以前とはかなり就活の難易度が違いました。 先人の知恵や経験談に感謝しつつも、参考程度に留めておいて自分の力でリアルタイムの情報を収集することが大事だと思います。 内定をGETするまでの応募数と実績日本でのITエンジニア経歴: 5年 2023年12月末にカナダに渡航 2024年6月~9月で本格的に応募。総数は100くらい 2024年4月-6月前半: 様
生成AIを活用したシステム開発の現状と展望
Copyright (c) The Japan Research Institute, Limited 生成AIを活用したシステム開発 の現状と展望 - 生成AI時代を見据えたシステム開発に向けて - 株式会社日本総合研究所 先端技術ラボ 2024年09月30日 <本資料に関するお問い合わせ> 伊藤蓮(ito.ren@jri.co.jp) 近藤浩史(kondo.hirofumi@jri.co.jp) 本資料は、作成日時点で弊社が一般に信頼できると思われる資料に基づいて作成されたものですが、情報の正確性・完全性を弊社で保証するもので はありません。また、本資料の情報の内容は、経済情勢等の変化により変更されることがありますので、ご了承ください。本資料の情報に起因して閲覧者 及び第三者に損害が発生した場合でも、執筆者、執筆取材先及び弊社は一切責任を負わないものとします。本資料の著作権は株式会社日
型安全にクエリパラメーターを扱う nuqs
型安全にクエリパラメーターを扱う nuqs 2025.01.25 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。つまり、useState などの React の状態管理フックを使用してメモリ上に保持した状態を使用するのではなく、location.search などでクエリパラメーターを取得し、それの情報を元に画面を描画するというこ
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
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ ByteDanceが、モバイル/Web向けのクロスプラットフォームの新たなフレームワーク、「Lynx」を公開しました。 普段iOS/AndroidのネイティブやReact Native、Next.jsなどで開発している筆者が、Lynxを触ってみた感想を書いてみます。 Lynxのファーストインプレッション 良い部分 1つのコードでiOS/Android/Webようにアプリケーションを開発できる Web開発者に優しいMobile/Appの開発体験 HTML/CSSに近いスタイル 独自のPrimJSによって、高いパフォーマンスを実現 Mainスレッドとバックグラウンドスレッドが別れた設計になっており、UIの更新遅れなどが起きづらくなっている Grid Layoutなど、React
たった5分で分かる！ Reactのコンセプトや用語をやさしく解説
Reactは、WebサイトやスマホアプリのUIを構築する人気が高いJavaScriptのライブラリです。再利用可能なコンポーネントを作成し、複雑なUIでも効率的に管理できるようにすることで、フロントエンドの開発に革命をもたらしました。 Reactを始めたいけどなんだか難しそう、、、そんな人にReactを簡単に理解できるようにReactのコンセプトや用語をやさしく解説した記事を紹介します。Reactにおけるコンポーネントとはどんなものなのか、reconciliation, state, propsなどの用語についても分かりやすく解説されています。 Every React Concept Explained in 5 Minutes by Jitendra Choudhary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
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)です。 ReactのフレームワークというとNext.jsが最初に浮かぶ人も多いのではないでしょうか？そこから様々なフレームワークが開発されて、RemixはWeb標準でステートを使わない思想からNext.js一強時代にメスをいれることになりました。 私自身もRemix(React Router)を選択するケースが増えましたが、やはりNext.jsにあるキャッシュ周りやAPIなどはRemixにないメリットだと思っています。Next.jsは便利なものが揃っている分、機能
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
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
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アプリ「図書管理システム」のフロントエンド部分を
この記事は、NFLaboratories Advent Calendar 2024 6日目の記事*1です。 研究開発部 研究開発担当のda13daです。 今回の記事では、パスワードレスな認証を可能とするパスキーを提供する「Hanko」というサービスをご紹介します。 はじめに パスキーとは Hankoの提供形態 OSSプロダクト Hanko Cloud 利用方法 projectタイプについて Hanko Passkey Infrastructure 実装について ログイン ユーザー情報の取得 パスキーAPIについて 主なAPIエンドポイント 終わりに はじめに 従来のID/パスワード認証は、多くのサービスで採用されてきましたが、フィッシングやパスワード漏洩など、セキュリティ上の課題が指摘されています。このような背景から、セキュリティを強化しつつ、ユーザー体験を向上させるパスワードレス認証が注
はじめに 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. リポジトリを作成しよう まず、ユーザー名と同じ名前のリポジトリを作成しましょう。 （ ユーザー名と同一のリポジトリは、特別なリポジトリと認識されて自動的にプロフィールに表示されま
はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストール方法をご紹介します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをクリックする この4ステップで簡単に拡張機能をインストールできます。 オススメ拡張機能 ここからは、オススメの拡張機能をカテゴリごとに紹介します。 これは絶対入れるべき！基本機能 Japanese Language Pack
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
TOPコラム新発見！フロントエンド技術の今フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ 2024年9月2日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念
公開日 2025/01/10更新日 2025/02/19AWS Amplify Gen 2入門- AWS社員が解説する詳細ハンズオン みなさんこんにちは。AWS Solutions Architectの吉村です。 私たちは、お客様から日々開発に関するさまざまな相談をいただきます。例えば、バックエンドエンジニアの方であれば、「バックエンド環境構築のためのコマンドリストやドキュメントの作成、整備はとても負担」。フロントエンドエンジニアの方であれば、「UIやロジック開発についてよくわかるが、AWSサービスを利用したバックエンド構築は複雑でよくわからない」「チーム開発をしており、検証用のバックエンド環境をAWS上に用意したいが、開発者同士でAWSリソースの競合が発生したり、環境を壊してしまったりしないか不安」などです。本記事では、これらの問題を解決する一つのアプローチとして、AWS Amplify
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
はじめに こんにちは、WatanabeJin(@Sicut_study)です。 最近「技術選定」についての話がXで広く繰り広げられていました。 私は全然キャッチアップができておらず、最近技術選定についての話題が多いなくらいの感覚でしたが、 「MySQLを使っても会社は潰れない」という記事が回ってきとをきっかけに、とある記事が炎上？論争？されていることを知りました(この記事は非公開になっています) 今回はこの論争の結末について個人的に思う発信についての考え方をまとめていきます。 技術選定の論争について 「技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL」という記事が公開されたのがきっかけに大きな議論が起きました エンジニアのインフルエンサーの方が取り上げたことも、多くの人に広まるきっかけにもなりました。 多くの人に個人の記事が広まっ
はじめに こんにちは。ドワンゴ教育事業でエンジニアをしているユーンです。 N予備校アプリケーションやその他複数のプロジェクトで pnpm を採用しました。pnpm とは何か、npm とどう違うのかというのを node_modules の構造を追いながら理解しつつ、教育事業での採用した結果についてお話します。 pnpm とは pnpm とは、npm や yarn とレイヤーを同じくするパッケージマネージャであり、サードパーティのものです。 pnpm.io pnpm は他のツールと比較して高速でありディスク効率が良いと謳っています。 その pnpm の最大の特徴は、 node_modules の構造にあります。 例えば npm では v3 からフラットな node_modules を使うようになっております。yarn もデフォルトでは同様にフラットな node_modules を提供しています
2023年に公開したこちらの資料「今年導入したソフトウェア、魅力的だったソフトウェア（2023）」のその後について書いてみたいと思います。 いろいろ導入してみて、その後も使い続けているものと、結局使わなくなったものがあります。昨年を振り返りながら、自分なりの良し悪しを考えてみます。そして今年もいくつか導入したソフトウェアがあるので、それについても後半で言及します。 昨年導入したソフトウェアのその後Procreate Dreams、Sleeve 2、Unclutter、Dropover、TextSniper、Workspaces 2、Bike Outliner、Scapple、Name Mangler、Lasso、Hand Mirror、Dark Noise、DaisyDisk Procreate Dreamshttps://procreate.com/jp/dreams私にとって、Proc
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS/Android両方のアプリを作るならCompose Multiplatformがベストだと思う
JSConf JP 2024 公開資料・Xアカウントリンクまとめ
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 - Qiita
【完全解説】エンジニアの複利を考えた投資戦略 - Qiita
Clineのシステムプロンプトを日本語化してみた。 - しとちゃぶろぐ
コードレビューの時に気にしている、べからずTierリスト
Gemini Advancedを1ヶ月間使ってみた感想 - laiso
DMMのGo言語5daysインターンが最高すぎた！ - Qiita
なぜ今さら、Web 標準 なのか【2025 年】 - Qiita
【完全版】これ1本でTypeScriptの基本をマスターできる！ - Qiita
海外でエンジニアとして転職を成功させるためにやったこと、すべて｜yugo.spice
次世代クロスプラットフォームフレームワーク「Lynx」 ファーストインプレッション
【図解解説】話題の神Reactフレームワークreact-serverで技術記事投稿サイトを開発するチュートリアル【@lazarv/react-server/Convex/TypeScript】 - Qiita
RustとDioxusで投稿アプリのSPAを作ってみよう
Hankoによるパスキーを利用してみた - NFLabs. エンジニアブログ
Reactを読んでまほうの正体を（少し）理解する
5分でできる！GitHub README プロフィール 💬 - Qiita
Visual Studio Codeに入れるべき拡張機能【2024年最新版】 - Qiita
【保存版】React Hooks 使用上の注意点が多すぎ問題 _(┐「ε:)_ - Qiita
AWS Amplify Gen 2入門- AWS社員が解説する詳細ハンズオン - Findy Tools
GraphQL あるいは React における自律的なデータ取得について
『MySQLを使うと会社が潰れる』から学ぶ初心者の情報発信 - Qiita
pnpm の node_modules を探検して理解しよう - ドワンゴ教育サービス開発者ブログ
2023年に導入したソフトウェアのその後／2024年に導入したソフトウェア｜usagimaru