すべてのカテゴリ

Vite で Ract のプロジェクトを作成するVue のフレームワークを中心にお届けしてきましたが、React でやったらどうなるのというお問い合わせも多いので今回は、これまで Vue で紹介してきた事を React でやったらどうなるかということで、React の実施例をお届けします。アメリカでは React の方が主流Vue は便利なフレームワークで初心者でも React に比べると少しですが入りやすいという利点があります。しかし、アメリカの開発現場では React の方が利用されるケースも多く求人も多くなっています。そこで、今回は、これまで Vue で紹介してきた事を React のフレームワークを使って書くとどんな感じになるかを紹介していく事にしました。Vue の際は、Javascript を利用するケースを中心にお伝えしてきましたが、今回は、アメリカの開発現場で React と組み合わせて利用される事の多い、Typescript でプログラムを書く方針でお届けしていきます。Typescript を利用する理由Typescript は Javascript の拡張版です。記述自体はとても似ています。Typescript が利用される理由は、Javascript に比べると変数の「型」の制約が厳格で、大きなプロジェクトなどで、複数の人が開発に関わる場合、インターフェースなどをより厳格に決める事ができることを初め、コードを管理する上で型が厳密に管理されるので有利など幾つかの理由が挙げられています。Typescript で記述されたコードはそのままでは、Web ブラウザなど

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する！前回の記事では、環境変数の基本的な使い方を紹介しました。今回は、Firebase のプロジェクト情報を環境変数で扱う具体的な方法を紹介します。Firebase のプロジェクト情報Firebase を利用するには、Firebase のプロジェクト情報を使って、Firebase を使うための初期設定が必要になります。Vue や React などのフレームワークを利用する場合には、npmなどのパッケージマネージャを利用する場合が多いと思いますが、その場合は、Javascript で Firebase の初期設定を行う際に Firebase のプロジェクト情報を使います。直接コードに埋め込む事もできるので、プログラムを再利用したり配布したりしない場合にはこの方法でも問題ありません。しかし、プログラムを再利用したり、配布・公開する場合には、特定の Firebase の情報をそのまま拠有するのはセキュリティ上余り好ましい事ではありません。もちろん、フロントエンドから Firebase を利用する場合には、いずれにしてもプロジェクト情報はソースコードの一部になるので、Web ブラウザを利用すれば取得できるわけですが、それでも、プロジェクト情報は共有しない方が無難です。また、再利用する方でも、プログラムのコードを変更するよりは、環境変数として設定する方が、間違いも少なく安全です。環境変数を利用した Firebase の初期化のコードでは、早速 Firebase のプロジェクト情報を環境変数として設定する方法を紹

こんにちは。 今回は Three.jsを使った「パフェの盛り付けアニメーション」 の実装を、ココナラのブログとしてご紹介します。実はこのパフェ、以前ブログで紹介した 「ハンバーガーを積み上げるアニメーション」 のシリーズ作品です。 「食べ物 × 3D × アニメーション」というテーマで、 見て楽しい・触って楽しいWeb表現 を目指しています。記事の最後には Short動画（見本デモ） も掲載しているので、 まずは動きを見てから読んでもらえる構成にしています。🍔 前回のハンバーガー積み上げアニメとの違い前回は、バンズパティレタスチーズといった具材を 上から順に積み上げる構成 でした。今回のパフェでは、そこから一歩進んで、グラスの中に具材を「落とす」高さ・位置・順番を調整できる盛り付けられていく過程を楽しめるという より“盛り付け感”のある表現 にしています。🍓 今回のパフェ盛り付けアニメの特徴① 具材ごとに位置を個別調整できるJavaScript側で、以下のように具材を配列管理しています。const items = [  { file: "parfait_glass.glb", x: 0, y: 0, z: 0 },  { file: "strawberry.glb", x: 0, y: 0.3, z: 0 },  { file: "icecream.glb", x: 0, y: 0.6, z: 0 }];あとから高さを変えたい横にずらしたい順番を変えたいといった調整が 数値を変えるだけで可能 です。② アニメーション付きで順番に表示具材は一気に表示せず、下の具材から順に上から落

環境変数を使って他の人にも使いやすいプログラムにする！前回はハードコーディングの話を紹介しましたが、開発者以外が既に作成されたプログラムを再利用する際、プログラムの設定を変更したい場合があります。ブログサービスの例では、提供するブログのタイトルなどを変えたい場合があります。そのような事を考えると、そうした変更がやりやすいプログラムにしておくと、再利用する場合に使いやすいプログラムになります。その際に利用できるのが「環境変数（Environment variable）」です。この記事では、Vite を利用して作成した Vue のプロジェクトで環境変数を利用する例を紹介します。どんな場合に環境変数を使うか？これまで紹介してきた、Vue を利用してブログサービスを提供するプログラムを考えてみます。 今までタイトルを入れていませんでしたが、例えばブログのタイトルなどに利用すると便利です。一番簡単にプログラムを書く場合、プログラムに直接、「タイトル」を埋め込んで仕舞えば良いことになります。<template>  <div>    <h1>{{ title }}</h1>  </div></template><script>export default {  data() {    return {      title: "Vueを利用したブログサービスの作り方",    };  },};</script> のように記述すれば、タイトルを表示する事が可能です。しかし、この場合は、このタイトルを

Vite でプロジェクトを作る従来は、Vue CLI や create-react-app などのスクリプトを利用してサンプルのプロジェクトを作っていました。最近は、「Vite」というビルドツールがよく利用されているようなので簡単に紹介します。色々なフレームワークで利用可能React や Vue などのフレームワークを利用する際は、多くの場合は、パッケージ管理アプリのnpmなどを利用して開発するケースが多くなっています。もちろん、HTML に組み込む形で、利用する事も可能ですが、多様なモジュールを利用する場合も多く余り現実的ではありません。以前は、Vue の場合は、「Vue CLI」や、React の場合は、「create-react-app」などのスクリプトを利用してサンプル（テンプレート）のプロジェクトを作って利用するというのが一般的でした。これに対して、Vite を利用すると、Vue でも React などのフレームワークでも、同じような要領でサンプルのプロジェクトを作成することができて、開発用のサーバーや公開用のイメージの作成もできるという結構便利なツールです。簡単な使い方使い方は極めて簡単です。$ npm create vite と入力するだけです。コマンドラインで細かい指定をすることもできますが、単純に上のコマンドを実行すると、プロジェクト名や、利用するフレームワークを聞いてくるので、質問に答えて行くと目的のサンプルプロジェクトを作成できます。プロジェクトを作成した後に、プロジェクトのフォルダに移動して$ npm install を実行して、必要なモジュールをインス

最近 Web制作やフロントエンド開発の分野で Vite という言葉をよく見かけるようになりました。Reactを学び始めた方や JavaScriptで動きのあるサイトを作りたい方にとって Viteは非常に便利な開発ツールです。この記事では Viteを初めて触る方向けにViteとは何かなぜ便利なのか基本的な使い方をできるだけ分かりやすく解説します。Viteとは何かViteは Web制作のための開発環境を作るツールです。難しく考えずに言うと WebサイトやWebアプリを作るときの作業をとても速くしてくれる道具です。最大の特徴は 開発中の動作がとにかく速いことです。なぜViteは速いのか従来の開発ツールでは プロジェクトを起動するたびに多くのファイルをまとめて処理していました。そのため 起動や更新に時間がかかりがちでした。Viteでは ブラウザの仕組みをそのまま活かし 必要なファイルだけを読み込みます。その結果保存するとすぐ画面が更新される開発サーバーがほぼ一瞬で起動するといった 快適な開発環境が実現します。ViteでできることViteは次のような制作に使えます。HTML CSS JavaScriptを使ったWebサイト制作ReactやVueなどのフレームワーク開発Three.jsを使った3D表現やアニメーション画像 音声 3Dモデルなどの素材管理特に 動きのあるデモやエンタメ性のあるWeb表現と相性が良いのが特徴です。Viteの基本構成Viteの特徴として index.html がプロジェクトの一番上に配置されます。このHTMLファイルから JavaScriptを直接読み込む仕組みに

React で変数を表示する！React のフレームワークを利用して、Vue の公式チュートリアルと同じことをやっています。二回目は、Javascript の変数を表示する方法です。あまり Vue と変わりません！Javascript の変数Vue では HTML、CSS、Javascript を記述する場所が、xxxx.vueファイルのタグで決められていました。React で Typescript を利用する場合には、xxxx.tsxというファイルがこれに相当するファイルになりますが、基本的にこのファイルは、Typescript を記述するファイルです。したがって、普通に Typescript の変数（定数）を作れば良いだけなので簡単です。Tαypescript で書いているので、変数（定数）の型名を明示的に書くとコンパイル時に、変数（定数）を利用する際の型のチェックをしてくれるので、実際にプログラムを実行する前にミスを見つける事ができます。今回の例では、「count」という定数を作って表示させているので、変数の宣言はconst count: number = 0; のように行います。この定数の型は数値（number）なので、その型を宣言しておくと、プログラムでこの定数を使う際にチェックしてくれます。この例では、使うのは表示の部分のみなのであまり、大きなメリットはありませんが、例えば、この定数を関数に渡したりする場合には、関数側の型と一致しているかをチェックしてくれるので、型が違っている場合には、コンパイル時にわかるという仕組みです。ステップ２のコードの例以下のコードがステッ

Vue をパッケージ管理アプリを利用して使う！前回は、HTML の中に Vue の記述を書いて Vue を利用する方法を紹介しました。今回は、パッケージ管理アプリを利用して、Vue を使うやり方です。この方法は、公式チュートリアルで学んだ方法と同じやり方で Vue を利用する事ができます。この記事を読むのに必要な前提条件は：プログラムを入力するためのエディタがインストールされている（VSCODなど）NodeJSがインストールできるコマンドラインの使い方がわかる（Windows の PowerShell や Mac/Linux のターミナル）まずは、この記事をお読みになる前に、VSCODE などのエディタをインストールして、簡単にアプリを開いてみてください。パッケージ管理アプリとは？パッケージ管理アプリは、インターネット上に公開されている誰かが既に開発したモジュール（部品）を自分の開発のプロジェクトに取り込むためのアプリです。よく利用する基本的な機能は、大抵は誰かが作ってインターネット上で公開されています。そうしたモジュール（部品）を活用することで、アプリの開発を効率的に行う事ができます。よく利用されている、パッケージ管理アプリは幾つかありますが、この記事では、「_npm_」というパッケージ管理アプリを利用して、Vue を使うやり方を紹介します。「_npm_」は、「_NodeJS_」という Javascript のプログラムを、Web ブラウザではなく、PC 上で動かす際に利用するパッケージに入っています。NodeJS のサイトからダウンロードできます。インストールのやり方は N

Vite（ヴィート）とは、Webアプリ開発をとても高速かつ快適にしてくれる開発ツールです。主に React・Vue・Svelte などのモダンなフロントエンド開発で使われています。一言でいうと、「開発中の表示がめちゃくちゃ速い環境を用意してくれる仕組み」です。初学者向けに一言で説明するとViteは、Webアプリを作るときの「作業場」を一瞬で用意してくれる道具です。画面の表示が速く、修正した結果もすぐに反映されるので、ストレスなく開発できます。これまでの開発環境の問題点少し前まで、React などの開発では以下のような問題がありました。開発サーバーの起動が遅いファイルを少し修正するだけで再ビルドに時間がかかる小さな変更なのに画面反映まで待たされるこれは、すべてのファイルをまとめて処理（バンドル）してから表示していたためです。Viteが速い理由Viteが速い最大の理由は、仕組みが根本的に違うからです。開発中は「必要な分だけ」読み込むViteは、開発中に「今表示に必要なファイルだけ」をその都度読み込みます。そのため、サーバー起動が一瞬画面の更新がほぼ即時ファイル数が増えても重くなりにくいというメリットがあります。実際のイメージ例えば、ボタンの文字を少し変えたとします。従来の環境→ 全体を作り直す → 待つ → 表示Vite→ 変更した部分だけ反映 → 即表示この体験の差が、かなり大きいです。Viteで何ができる？Viteは単なる「速いツール」ではありません。React / Vue / Svelte などに対応TypeScript（型付きJavaScript）がすぐ使える開発用サーバー