すべてのカテゴリ

最近zepeto でワールドを作り始めています。私は開発者なので、開発スキルを活かしたワールドを作ってみようと思い、試作開発を行っています。今回は試作の一部を動画にて紹介いたします。様々な表情をして動き回るハムスターと一緒に写真を撮ることができるワールドです。zepeto でこんなことができるんだ、ということが伝わればありがたいです。もしzepeto でゲームのように遊べるワールドを構築したい場合、以下のサービスにてご相談承っております。お気軽にお声がけください。

React で「部品」にデータを渡すには？React の「部品」に呼び出し元（親）からデータを渡すやり方は、Vue と殆ど同じです。プロパティ（property）と呼ばれるアトリビュートを呼び出すモジュールの HTML に相当する部分（JSX）で指定して渡します。プロパティを使って渡すReact でも Vue でも呼び出し元（親）からデータを渡す場合、プロパティ（property）と呼ばれるアトリビュートで指定します。記述方法も似ています。今回は、呼び出される部品（子）では、相当するプロパティ(property)が指定され中たあ場合には、「No props passed yet」を表示して、プロパティ(property)が指定されている場合には、指定されたプロパティの値を表示するようにします。まずは、呼び出される部品（子）の記述です。import React from "react";interface IProps {  msg: string | undefined;}export default function Step12Child(props: IProps): JSX.Element {  return (    <React.Fragment>      <div>        <h2>{props.msg ? props.msg : "No props passed yet"}</h2>      </div>    </React.Fragment>  );} 今回は、Typescri

Vue の学習フロントエンドのフレームワークの学習で初心者が React か Vue で迷ったら、とりあえず Vue をお勧めすると書きました。この記事では、Vue の学習についてもう少し詳しく触れてみたいと思います。Vue のフレームワークフロントエンドのフレームワークで React と Vue で迷うことは多いと思います。どちらを学習するかは、置かれている状況で変わってきます。例えば、就職を目指す場合、希望する会社が React を扱っている場合、学習するのは当然 React を学習した方が就職できる可能性は高くなります。 初めて学習する場合は、就職などの理由がない場合特にどちらでも良いので迷いやすいという事です。その場合は、学習しやすい方を選んだ方が学習は早く進められると言う事です。Vue の方が学習しやすい理由はいくつかありますが、ポイントとなるのは：＊　基本機能を組み込むのを前提に設計されている＊　HTML/CSS/Javascript を独立に記述できる＊　HTML/CSS/Javascript の基本に近い　逆に言うと、React は逆という事です。＊　組み込む基本機能を限定していない（自由な分、慣れないと設定が面倒）＊　Javascript の中に HTML を書く感じ（JSX）＊　HTML の記述がベースだが、Vue よりは違いがやや多い　という感じで、実は大差がないのですが初心者の場合、やや難しく感じる場合が多いと思います。これが、Vue を進める「僅かな」違いです。Vue の学習にも選択が必要ところで、Vue を学習する事を決めた場合でも、もう一つ選択する

Javascript と TypescriptWeb 開発では、Javascript は欠かせませんが、最近では Typescript も注目されています。Typescript を勉強しておいた方が良いのか迷う場合も多いと思います。どちらが良いのかを考えてみました！Javascript は必須Web 開発をする場合、バックエンドは別にしてもフロントエンドの Web ブラウザで動作するプログラムは Javascript になります。したがって、フロントエンドに関わる開発では Javascript は必須のプログラミング言語という事になります。そうした、理由もあって Javascript を学習する人はたくさんいますが、最近では企業のある程度の規模の開発では Typescript が使われるケースも増えています。そうなってくると、Typescript を学習しておいても損はなさそうな状況になりつつあります。ところで、Web 開発者を目指してプログラミングを学習する人の場合はどうでしょうか？この連載で既に書いてきたように、「今必要な事に絞って学習する」ことで、学習を効率よく進めて短期間で成果を出すという考え方で言えば、Javascript でプログラミングを書ければ、Typescript はなくても良い事になります。そう考えると、Typescript を初心者が学習するのは後でも良いという事になりそうです。Typescript の正体とは？ところで、Typescript の正体をご存知ですか？ 一言で言うならば、Typescript は Javascript をベースに、変数の型や初

# はじめに前回、Next.js について調べてみたので、今回はよく使うアカウント認証について、アプリケーションを作ってみようと思います。Next.js を開発している Vercel が作っている NextAuth.js を使用します。# アプリを作ってみるsample という名前でアカウント認証付きのアプリケーションを作成します。## 1. まずは、Hello world！```$ yarn create next-app --typescript$ cd sample$ yarn add next-auth$ yarn add -D [at]types/next-auth$ yarn dev```## 2. いらないファイルを削除以下のファイルを削除します。- sample/pages/api/hello.ts- sample/styles/Home.module.css## 3. API route を追加`pages/api/auth/[...nextauth].ts` を作成します。```import NextAuth from 'next-auth'import Providers from 'next-auth/providers'export default NextAuth({    providers: [        Providers.GitHub({            clientId: process.env.GITHUB_ID,            clientSecret: process.env.GITHUB_SECRET       

Typescriptの基本設定は？先日投稿した記事で、機会があれば Typescript を学習することをお勧めするという事を書きました。今日は実際にどのように Typescript を使うのかもう少し具体的な事を記事にしてみました。実行は Javascript!ご存知の方も多いと思いますが、実際に Web ブラウザが実行できるのは、Typescript ではなく、コンパイルして作られた Javascript です。従って、Typescript で書いたからと言って Typescript を実行するわけではありません。理由は簡単で、互換性の制限もあって、Web ブラウザーが実行できるのはあくまで Javascript だからです。つまり、Typescript で書いたプログラムはコンパイルをして、Javascript に変換しないと実行できません。Typescript を使うメリットは？実行されるのが Javascript なら、なぜ Typescript を使うのが良いのかと疑問に思う方がいるかもしれません。実は、この Typescript から Javascript に変換するコンパイルが最大のメリットです。このコンパイルが Javascript では見つけづらいコーディング上の問題をチェックしてくれるのが Typescript が利用される理由です。型の宣言をきちんと守って書かれた Typescript の場合、宣言と違う型の代入や、要素の一致しない JSON や、関数のインターフェース、変数の初期化などをコンパイルする際にチェックして、知らせてくれます。従来の Java

TypescriptとJavascriptのどちらを勉強するかで迷ったら最近は、少し規模の大きな Web 開発になると Typescript を利用するケースが増えています。 特に、グループで開発する際には有利なことも多いので採用するケースが増えているようです。 Web 開発の技術を勉強する場合、基本は HTML・CSS・Javascript ですが、Typescript を勉強した方が良いのか迷ってしまうことも多いと思います。そんな時はどうしたら良いのかを書いてみました。Typescript は Javascript の拡張Web アプリのプログラムを書く上で厳密に Typescript で書く場合は、Javascript より多少面倒に感じます。理由は、Typescript は Javascript は Javascript より変数の型を厳密に管理するプログラミング言語だからです。逆にいうと、この型を厳格に管理するので、コンパイル事に型のチェックを行うことができるのでコードの品質が高くなるのが Typescript を利用する最大のメリットです。ご存知の方も多いと思いますが、Typescript のコードはコンパイルされた後は Javascript です。実際に Web ブラウザで実行されるのは Javascript なので性能などは殆ど変わりません。結局、型を静的に管理して厳格に扱う事で、コンパイル時に変数の型や初期化、関数へ渡す値の型をチェックをできるようにしたのが Typescript です。Typescript 自体の書き方自体は、フレキシブルで Javascri

Javascriptで簡単に作れるデスクトップアプリを作る〜ElectronJavascript（Typescript）を使って Web 開発が出来るスキルを身につけると、デスクトップアプリも簡単に作れるようになります。この記事では、複数のプラットフォーム（Windows/Mac/Linux）のアプリを簡単に開発できる、Electron フレームワークについて解説しています。Electron とは？既にご存知の方も多いかと思いますが、Electron はプログラミングで良く使われているエディタの VSCODE や Atom の開発に使われている他、Slack などの開発にも使われています。これらのアプリが、Mac/Windows/Linux をサポートできるのも Electron の恩恵を受けているからです。しかも、Web 開発の知識があれば、新たに別のプログラミング言語を学習しなくても、デスクトップのアプリの開発もできてしまうというのが最大の魅力です。Electron アプリは、React や Vue などの Web 開発のフレームワークと組み合わせて利用できるので、Web アプリをほぼそのままデスクトップアプリとして変換する事も簡単にできますが、この記事ではまずは、Electron の概念を理解するために、簡単にできる「Hello World!」を表示するだけの Electron アプリの作り方を紹介します。Electron アプリの簡単な作り方今回は、「Hello World!」を表示させるだけのシンプルなアプリを作成する流れを紹介します。 まずは、何が必要かを理解するの