coiai Logo
Featured

25年3月現在最善のReactプロジェクトの作り方

Vite（ヴィート）を使おう。Viteは、高速なフロントエンド開発環境を提供するビルドツール です。https://vite.dev/


create-react-app は古い方法になってしまいました。create-react-app は、React チームが開発していた公式ツールですが、2023 年以降、ほぼ開発が停止 しました。

Vite は ESモジュール（ESM）とホットリロード（HMR） を使って、開発時のリビルドを 超高速化 しています。また、
デフォルト設定で十分使いやすく、webpack.config.js のような面倒な設定が不要です。

やり方

Node.js をインストールしましょう。

以下コマンドでプロジェクトを作成できます。my-react-app は好きな名前を入れてください。

npm create vite@latest my-react-app -- --template react

依存関係をインストールしましょう

cd my-react-app
npm install

開発サーバーを起動させてみましょう。

npm run dev

コマンドラインに出てきたlocalhost を立ち上げたら完了です！

投稿日: 2025年3月16日
カテゴリ: React
タグ:
coiai

coiai

この記事もおすすめ

Claude Code Fable 5 を /model から選択できない

Claude Code Fable 5 を /model から選択できない

これは何？ Terminalから操作を行う Claude Code から、 をすると Fable 5 が選択肢に出てこない。という問題の対処法についてです。 実際にclaude code を起動して /model を打つと Opus, Sonnet, Haiku の３つの選択肢しか出ていないのが確認できます。 環境 対処法 直接モデルの選択を実行してください。 Terminalにこのように Set model to claude-fable-5 and saved as your default for new sessions と表示されていれば成功です。 参考

デザインガイドラインをAIでもわかるようにMarkDown 形式で作った

デザインガイドラインをAIでもわかるようにMarkDown 形式で作った

弊社のデザインガイドラインをAIでもわかるようにMarkDown形式で作成しました。今までプロダクトやサービスのUI設計を任されることがあり、その際はデザインガイドラインをFigmaにエンジニアにわかるように設定していたのですが、エージェント型AIが普及するにあたり、ヴィジュアルでわかるよりも文章でわかるものを用意する必要を感じ制作しました。 実際に作ってみると、ヴィジュアルを言葉として理解するのは難しいという当たり前のことがわかったのと、LLMと人間の違いをまた見たなと思いました。 人間用デザインガイドライン 今回作成したガイドラインは人間にもみやすいようにヴィジュアルでも作成しました。なるべく変更がしやすいようにMarkDown形式で作成したものをHTMLに変換し、PDFで書き出すという手順をとっています。 マークダウンのデザインガイドライン design-guideline.md

ポッドキャストを取った後Auditionですべきこと

ポッドキャストを取った後Auditionですべきこと

この記事はポッドキャストなどの音声コンテンツを取った後にAuditionで編集する方法について解説しています。 環境 やること 基本的に以下の4つの工程をすると、かなりクオリティアップにつながります！ ノイズリダクション 無音部分を選択します。開始地点をi, 終わりをo キーを押すと選択できます。選択できたらエフェクト→ノイズリダクション/リストア→ノイズプリントをキャプチャを押します。 続いて、全体を選択します。cmd, a で全選択になります。エフェクト→ノイズリダクション/リストア→ノイズリダクションを選択します。 以下のようなパネルが表示されうので、ノイズのみをきたりして、削減ちを調整して、良い感じになったら適応ボタンを押します。 シングルバンドコンプレッサ 左のパネルのエフェクトトラックから▶️ボタンを押し、振幅と圧縮→シングルバンドコンプレッッサを選択します。 選択すると下記のようなパネルが開きます。それぞれ、 といった意味があります。設定値は下記画像のようにしています。 設定がめんどくさい場合はプリセットからラジオレベラーを選択してください。 EQ（声をクリアにする） パラメトリックイコライザーを使用します。エフェクト→フィルターとイコライザ→パラメトリックイコライザーを選択します。 私の場合は下記のように設定しています。 無音カット エフェクト→診断→無音をカットをすると左パネルに診断が表示されます。 効果を無音を削除、プリセットをポッドキャストにするとちょうどよくなると思います。設定したら、スキャンボタンを教えて、全て削除で無音がカットされます。 かなりカットされてしまうので、短いCM等に使うのはありかなという感じです。 参考 Adobe 無音カット https://helpx.adobe.com/jp/audition/using/strip-silence.html

Oculus Link での開発でパススルーをオンにする

Oculus Link での開発でパススルーをオンにする

環境 Unity で Quest 対応のアプリを構築している際に Link での確認で、パススルーをオンにするとエラーが出て砂時計のまま開けないというエラーが出ました。 コンソールでは以下のエラーが表示されています。 やり方 PC で Meta Holizon アプリを開きます。 Settings を開いて Developer タブを開きます。Developer Runtime Features を ON にします。 続いて、Passthrough over Meta Horizon Link をオンにします。 前提 OVR Manager の Passthrough & Guardian Boundary の中の Enable Passthrough にチェックを入れてださい。 参考 https://developers.meta.com/horizon/documentation/unity/unity-passthrough-use-over-link/?locale=ja_JP おわりに 株式会社coiaiではOculus向けのアプリも構築しています。受託開発、一次受けも設計から可能ですのでお問い合わせください。

この記事を書いた会社

株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。

商号株式会社 coiai創業2022年1月設立2025年1月23日資本金1,500,000円（設立時点）本社所在地東京都練馬区関町北 3-6-9代表者代表取締役 竹村 啓佑 / 代表取締役 服部 陽良

主なご相談内容

会社概要・役員紹介を見る

詳しい会社情報は会社概要ページでご覧いただけます。

資料請求・無料相談

導入要件のヒアリングからPoC、本番運用まで伴走します。まずはお気軽にご相談ください。

フォームで問い合わせメールで相談

お問い合わせの前に 個人情報保護方針 をご確認ください。