円安が加速して150円台になった頃、今ってドルを稼ぐべきでは？と思うようになりました。 調べてみると海外のクラウドサービスって色々ありますね。 最初Telusのプロジェクトに応募してみましたが、最終テストがなかなか通過できません。 次にオーストラリアのAppenに登録してみました。こちらは書類の選考だけで単発のプロジェクトにすぐに参加できました。 システムに慣れずに面食らったり、放置していると「こりゃ〜！週最低＄5ドル分は作業せんかい〜！！」とチケットが発行されます。 これはまずいとガチ勉強始めることひと月、2022年11月は（たった）64ドル達成。しかしこの時はすでに円安が落ち着いていました。Appenの支払いは <a style="color:#1995b7" href="https://www.payoneer.com/ja/" target="_blank" rel="noopener noreferrer">Payoneer</a> と言うサービスを利用して受け取ります。ここで手数料が取られて、さらに為替レートもだいぶ割高なレート（-2円くらいな印象）。そしてその翌月がほぼ同じ時間投下で12月が130ドル。学習時間は全く収入にならないので、時給換算したら多分500円を下回るでしょう。 故に、ここでのモチベーションはただ、英語で試験を受けて合格し、何か問題があれば英語でレポートするという実務経験を重ねること、これにつきます。ただ今年に入ってからは学習なしですぐに作業に入れるプロジェクトが徐々に増えてきたのと（1月はまだ終わっていませんが、好きに時間を使って家事の合間で既に100ドル超）、業務の詳細は、守秘義務がどの範囲あたりまでなのか把握していないので、控えますが、これは面白いなと思えるタスクがあったりして、趣味の延長線上でお小遣いが稼げるなんてありがたいと言うところです。 しかし、英語なしで収入を狙いたいなら、AppenにはChinaプラットフォームというものがあります。こちらのプラットフォームの単発ものは英語がほぼ必要ないものがちらほらあります。問い合わせ関連は英語でしなくてはいけないケースがあるものの、作業は日本語オンリーで完結して時給30ドル越えのものに出会えます。 技術力を備えて転職、副業ということでなければ、クラウドワーカーという選択肢もあるのではないかと思います。私みたいなシニアに完璧片足突っ込んでいる層には、実力評価っていうのは魅力的ですし、自分の好きな時間に自宅からパソコン一つでこのようなサービスに貢献して、主婦とか今の社会でなかなかチャンスが貰えない人たちに広がっていったらいいのではないかなー、と思っています。 生活が不規則な娘に、起きてきたら「おもち食べる〜？」とか言って焼いてあげたりできる生活を大事にしてるので、小さいこと言っています。 <a style="color:#1995b7" href="https://connect.appen.com/qrp/public/jobs?uref=22c4793471dd89ec02062a409613d307" target="_blank" rel="noopener noreferrer">Appen アカウントこちら</a>から作成できます。

海外クラウドワーカー

ひとりGitを卒業してそろそろgit rebaseなどを使ってブランチ間差分をマージするようになりましたが、特定のコミットだけを取り込みたい時ってありますよね。そんなときに使い得るのが「git cherry-pick」です。 こんなふうに使います。<pre><code>$ git checkout［コードを取り込みたいどこかのブランチ］ 
$ git log //コミットIDを確認
$ git cherry-pick [取り込みたいコミットID]</code></pre> 上記コマンドでは取り込んでコミットが完了しますが、取り込みだけを実行したいときは「-n」をIDの前につけます <pre><code>$ git cherry-pick -n [取り込みたいコミットID]</code></pre> gitの階段登る〜♪

git cherry-pick

IT KINGDOM共同開発でTwitterのフィードをTwitter APIを使用して取得するというお題がありました。 Twitter APIの情報ってあまりネット上にないのですよね。Twitterの公式ドキュメントは鬼難しい。 サロンのつよつよエンジニアさまのコードを丸パクって実装しましたが、大変勉強になったものの、不完全燃焼感しかありません。 よくよく考え、そうだTwitter社は簡単にフィードを読み込める機能を提供してくれているではないか！ライブラリーを使って実装しよう。 方向が決まれば簡単です。react-twitter-widgetsというライブラリを見つけました。 👉　<a href="https://www.npmjs.com/package/react-twitter-widgets" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/react-twitter-widgets</a> 次のコマンドでライブラリーをインストールして <pre><code>yarn add -D react-twitter-widgets</code></pre> 次のように記載して必要な場所から呼び出すだけです。 <pre><code>//src/components/twitter/twitterFeed.tsx

import { Timeline } from "react-twitter-widgets";
 
 &lt;Timeline
 dataSource={{ screenName: "yokoiwasaki6", sourceType: "profile" }}
 options={{
 height: "1200", //お好みの高さ
 lang: "en", //お好みの言語
 width: "400", //お好みの幅
 }}
 /&gt;</code></pre> 次のように表示されます。レスポンシブ対応はこれだけが頼りのCSSで仕上げます💪 自分で調べて実装できたのでハッピー✨、しかも1時間で (๑&gt;◡&lt;๑) <img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/c3e6833801d3421cb48f8c9310fa51f7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-27%2010.31.54.png?w=500&amp;h=658" alt="twitter feed">

Twitterのフィードを読み込むのに、react-twitter-widgetsが最高だった

Tailwind cssは便利ですが、独自のCSSを当てたい時やより表現豊かな装飾を施したい時、セレクタで一括指定できるといいなと考えることはありませんか？ 例えば<a href="https://textgradients.com/" target="_blank" rel="noopener noreferrer">css gradient generator</a>などで生成した複雑なCSSをそのまま使えたら便利ですよね。そんな時はTailwind CSSを定義しているファイルに、次のように指定すればOK! <pre><code>/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.text-gradient{
background: #121FCF;
background: linear-gradient(to right, #121FCF 0%, #CF1512 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.nm-container {
border-radius: 50px;
background: #e6ebf4;
box-shadow: inset 20px 20px 67px #c4c8cf,inset -20px -20px 67px #ffffff;
}

</code></pre> 呼び出し側 <pre><code> return (
 &lt;div className="text-gradient ...."&gt;
 ....
 &lt;/div&gt;

とか

 &lt;div className="nm-container　..."&gt;
 &lt;Title&gt;GitHub&lt;/Title&gt;
 &lt;ul className="..."&gt;

</code></pre>はい、こんなふうに表示できます。 【テキストのグラデーション】 <img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/cd429cd80d554748bf9e317a78952865/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-17%2019.55.38.png" alt=""> とか 【neumorphismの背景】 <img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/9ba83c15538b4cef99e8a378b874f5b3/container.png?w=451&amp;h=800" alt=""> あまり多用するとTailwind cssの利点を相殺してしまいますので、ご利用は最小限かつ計画的に！

Tailwind cssと自分のCSS クラスのセレクタを併用する

microCMSにお問い合わせをPostして、Slackに通知を送ることができます。 <h2 id="h685501ae7e">microCMS側の設定</h2><h3 id="h7e605794c8">APIの作成</h3> <ol><li>お問い合わせを受け取るための新しいAPIを作成を作成します。エンドポイントは任意の文字列です。ここでは 「contact」としています。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/7b53fc2381f04f4db1a7132b2d958909/image.png?w=500&amp;h=316" alt="microcms api setting"></li><li>APIに［リスト形式］を選択します。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/a677fc0688aa4d3bb133b8d66b770437/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-12%2017.41.38.png?w=500&amp;h=243" alt="microcms api setting"></li><li>APIスキーマを設定します。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/98b16781a5904cd0a6a9540e7511f523/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-12%2017.42.19.png?w=500&amp;h=337" alt="microcms api setting"></li></ol><h3 id="h7b29856e39"> APIキーの作成</h3><ol><li>歯車マーク &gt; APIキーから［APIキー管理］に移動します。必要に応じて［＋追加］からAPIを作成してください。対象APIをタップして、次の個別設定画面に進みます。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/ce0fb51be2d94e55bb81cb31dd9388bb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-12%2019.19.34.png?w=500&amp;h=197" alt="microcms api setting"></li><li> 個別権限の［お問い合わせ］に、POSTを設定します。<img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/e697c1d6b95c4d00814b0cfc5fa12ab6/contact.png?w=500&amp;h=212" alt="microcms api setting"></li><li>右上の［変更］ボタンを押してAPIの設定を完了します。</li></ol> <h2 id="h6e1927878f">Next.jsでフォームを作成する</h2><h3 id="ha3fa6a9ca9">お問合せフォームの作成</h3> 1.「src/pages/api/contact/index.ts」を作成します。次のように記述します。<pre><code>import type { NextApiRequest, NextApiResponse } from "next";
import { createClient } from "microcms-js-sdk";

export const client = createClient({
 apiKey: process.env.PORTFOLIO_API_KEY!,
 serviceDomain: "yoko-portfolio",
});

export default async function handler(
 req: NextApiRequest,
 res: NextApiResponse
) {
 try {
 console.log(req.body);
 await client.create({
 content: req.body,
 endpoint: "contact",
 });
 res.status(200).json("OK");
 } catch (err) {
 console.error(err);
 res.statusCode = 500;
 }
}

</code></pre>2. 「src/pages/contact.tsx」を作成します。<pre><code>import { NextPage } from "next";
import { AppTitle } from "src/components/atom/appTitle";
import { ContactForm } from "src/components/form";
import { Layout } from "src/layout";

const ContactPage: NextPage = () =&gt; {
 return (
 &lt;Layout&gt;
 &lt;AppTitle title="contact" description="お問合せページ" /&gt;
 &lt;ContactForm /&gt;
 &lt;/Layout&gt;
 );
};

export default ContactPage;</code></pre>3. 「src/components/form.tsx」を作成します。<pre><code>import { Button, Group, Textarea, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { FC, useState } from "react";
import { Title } from "src/components/atom/title";

export const ContactForm: FC = () =&gt; {
 const [sendMessage, setSendMessage] = useState&lt;string&gt;("Need help?");
 const form = useForm({
 initialValues: {
 name: "",
 email: "",
 message: "",
 },

 validate: {
 email: (value) =&gt; (/^\S+@\S+$/.test(value) ? null : "Invalid email"),
 },
 });

 const onSubmit = async (values: typeof form.values) =&gt; {
 try {
 // microCMSに送信
 await fetch("/api/contact", {
 body: JSON.stringify(values),
 headers: {
 Accept: "application/json, text/plain, */*",
 "Content-Type": "application/json",
 },
 method: "POST",
 });
 form.reset();
 setSendMessage("Thank you! We'll be in touch.");
 } catch (error) {
 console.error("Fetch error: ", error);
 alert(JSON.stringify(error));
 }
 };

 return (
 &lt;div className="container mx-auto w-screen py-20 px-3 md:max-w-5xl"&gt;
 &lt;Title&gt;Contact&lt;/Title&gt;
 &lt;div className="mx-auto max-w-2xl"&gt;
 &lt;div className="mb-3 font-bold"&gt;{sendMessage}&lt;/div&gt;
 &lt;form onSubmit={form.onSubmit((values) =&gt; onSubmit(values))}&gt;
 &lt;TextInput
 required
 label="Email"
 placeholder="your@email.com"
 {...form.getInputProps("email")}
 className="mb-3"
 /&gt;

 &lt;TextInput
 required
 label="Name"
 placeholder="Taro Yamada"
 {...form.getInputProps("name")}
 className="mb-3"
 /&gt;

 &lt;Textarea
 required
 label="Your message"
 placeholder="I want to order your goods"
 {...form.getInputProps("message")}
 className="mb-3"
 /&gt;

 &lt;Group position="center" mt="md"&gt;
 &lt;Button
 type="submit"
 &gt;
 Send message
 &lt;/Button&gt;
 &lt;/Group&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
};</code></pre> <h2 id="h09888f3683">Slackと連携して通知を受け取る</h2>microCMSにはコンテンツの公開時にSlackのWebhookを使って通知できる機能があります。この機能を使って、お問合せえPOST時に通知を飛ばせます。 👉　<a style="color:#0186ab" href="https://slack.com/intl/ja-jp/help/articles/115005265063-Slack-での-Incoming-Webhook-の利用#incoming-webhook-u12398u35373u23450" target="_blank" rel="noopener noreferrer">Slackに詳しい説明がありますので参照してください。</a>

microCMSとSlackでお問合せ機能を実装する

このポートフォリオ作成で使用した、便利なESLintプラグインのメモです。 <pre><code>//package.json 

 "eslint-config-prettier": "8.5.0",
 "eslint-plugin-import": "^2.26.0",
 "eslint-plugin-simple-import-sort": "^8.0.0",
 "eslint-plugin-sort-keys-custom-order": "^1.0.3",
 "eslint-plugin-unused-imports": "^2.0.0",
 "prettier-plugin-tailwindcss": "0.1.11",

</code></pre> <h1 id="h72f434d105">eslint-config-prettier</h1>👉　<a href="https://www.npmjs.com/package/eslint-config-prettier" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-config-prettier</a> Turns off all rules that are unnecessary or might conflict with [Prettier]. Prettierとコンフリクトの起きる不要なルールをすべてOFFしてくれます。 <h1 id="h4b2bc1873a">eslint-plugin-import</h1>👉　<a href="https://www.npmjs.com/package/eslint-plugin-import" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-import</a> This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. import / export シンタックスの整合性をチェックします（スペルミスなど警告が出ます）。 <h1 id="hc7d24f83fc">eslint-plugin-simple-import-sort</h1>👉　<a href="https://www.npmjs.com/package/eslint-plugin-simple-import-sort" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-simple-import-sort</a> This is for those who use&nbsp;<code>eslint --fix</code>&nbsp;(autofix) a lot and want to completely forget about sorting imports! importsをアルファベット順に自動で並び替えます（on saveをで実行されるよう設定する必要あり）。便利！ <h1 id="h6765ec22d6">eslint-plugin-sort-keys-custom-order</h1>👉　<a href="https://www.npmjs.com/package/eslint-plugin-sort-keys-custom-order" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-sort-keys-custom-order</a> This plugin enforces alphabetically sorting keys in objects and typescript types with auto-fix. You can add a list of priority sorted keys for custom sorting (ex: if you want "id" to be the first property). オブジェクトや型定義のキーを自動でアルファベット順に並び替えます。並び順を指定することもできます（指定方法は下記.eslintrc.json参照）。<h2 id="hcf83e1357e"> </h2><pre><code>eslint-plugin-unused-imports</code></pre>👉　<a href="https://www.npmjs.com/package/eslint-plugin-unused-imports" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/eslint-plugin-unused-imports</a> Find and remove unused es6 module imports.&nbsp; 使わなくなったモジュールのimportを特定して自動で削除します。 これらのプラグインをインストールしたら.eslintrc.jsonでプラグインの追加とルールを設定します。細かな設定は必要に応じて調整してください。<pre><code>//.eslintrc.json
{
"plugins": ["sort-keys-custom-order","simple-import-sort","import","unused-imports"],
"extends": ["next/core-web-vitals", "prettier"],
 "rules": {
 // For JS objects sorting
 "sort-keys-custom-order/object-keys": ["warn", { "orderedKeys": [
 "id",
 "name",
 "title"
 ] }],
 // For TS types sorting
 "sort-keys-custom-order/type-keys": ["warn", { "orderedKeys": [
 "id",
 "name",
 "title"
 ] }],
 "simple-import-sort/imports": "warn",
 "simple-import-sort/exports": "warn",
 "import/first": "warn",
 "import/newline-after-import": "warn",
 "import/no-duplicates": "error",
 "unused-imports/no-unused-imports": "error"
 }
}</code></pre> その他<h1 id="hf81b30e57a">prettier-plugin-tailwindcss</h1>👉　<a href="https://www.npmjs.com/package/prettier-plugin-tailwindcss" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/prettier-plugin-tailwindcss</a> A&nbsp;<a style="background-color:#ffffff" href="https://prettier.io/" target="_blank" rel="noopener noreferrer">Prettier</a>&nbsp;plugin for Tailwind CSS v3.0+ that automatically sorts classes based on&nbsp;<a style="background-color:#ffffff" href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted" target="_blank" rel="noopener noreferrer">our recommended class order</a>. <code>yarn add -D prettier prettier-plugin-tailwindcss</code> Tailwind cssのクラス名を推奨する順番に並び替えてくれます。地味に便利✨

eslint prettierメモ

<a href="https://next-auth.js.org/" target="_blank" rel="noopener noreferrer">Next-auth</a>プロジェクトを公式ページのコードを参照して実装しましたが、ローカルでは問題なく動作するものの、デプロイ先のサーバーで「no secret」というエラーが出たときの解決策を、Twitter認証を例に、紹介します。（現時点では備忘録なので追々説明を補足したいと思います。） <a href="https://github.com/nextauthjs/next-auth-example/blob/main/pages/api/auth/%5B...nextauth%5D.ts" target="_blank" rel="noopener noreferrer">公式exampleのコード</a><pre><code>//pages/api/auth/[...nextauth].ts

import NextAuth, { NextAuthOptions } from "next-auth"
import TwitterProvider from "next-auth/providers/twitter"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export const authOptions: NextAuthOptions = {
&nbsp; // https://next-auth.js.org/configuration/providers/oauth
&nbsp; providers: [
&nbsp; &nbsp; TwitterProvider({
&nbsp; &nbsp; &nbsp; clientId: process.env.TWITTER_ID,
&nbsp; &nbsp; &nbsp; clientSecret: process.env.TWITTER_SECRET,
&nbsp; &nbsp; })
&nbsp; ]
}

export default NextAuth(authOptions)</code></pre>公式ではこのように紹介されており、ローカルでの認証に問題は起きません。 しかし、Vercelにデプロイすると<code>no secret</code>というエラーでこのsecretとは？？がわからず3週間。。 エンジニアの方と相談している時に「next-auth, secret, environment variables, local, production」のキーワードが思いつきググったところ<a href="https://stackoverflow.com/questions/71490457/image-is-missing-required-src-property-make-sure-you-pass-src-in-props-to-t" target="_blank" rel="noopener noreferrer">こちらの記事</a>に辿り着きました。 以下のコマンドでランダムな文字列を生成し、<pre><code>openssl rand -base64&nbsp;</code></pre> 環境変数に設定（secret: process.env.NEXTAUTH_SECRET）することで解決します。<pre><code>import NextAuth, { NextAuthOptions } from "next-auth";
import TwitterProvider from "next-auth/providers/twitter";

export const authOptions: NextAuthOptions = {
 // https://next-auth.js.org/configuration/providers/oauth
 providers: [
 TwitterProvider({
 clientId: process.env.TWITTER_CLIENT_ID!,
 clientSecret: process.env.TWITTER_CLIENT_SECRET!,
 version: "2.0",
 }),
 ],
 callbacks: {},
 secret: process.env.NEXTAUTH_SECRET,
};

export default NextAuth(authOptions);


</code></pre>

Next-authプロジェクトを本番環境にデプロイしたときにエラーになる「no secret」

Twitter ID (uer id)は、＠で始まるユーザー名です。 特定のユーザーのツイートを取得するには、ユーザー名を指定する必要があります。 TwitterのDeveloper Portalでアプリを作成すると沢山のsecretやTokenが生成できますが、Developer PortalではこのIDを取得できません。 以下のサイトでユーザー名を入力してTwitter ID (uer id)を取得しましょう。 <h2 style="text-align:center" id="hbecf102655"><a href="https://tweeterid.com" target="_blank" rel="noopener noreferrer">Twitter ID and username converter</a></h2> Bearerトークン（ここではTWITTER_TOKENとTWITTER_ID）と組み合わせて次のようにユーザーのツイートを呼び出せます。<pre><code>//src/lib/axios.ts

import axios from "axios";

const client = axios.create({
 baseURL: `https://api.twitter.com/2/users/${process.env.TWITTER_ID}`,
 headers: {
 Authorization: `Bearer ${process.env.TWITTER_TOKEN}`,
 },
});

export { client };</code></pre> メモ： ユーザー取得のためのパラメータ： https://developer.twitter.com/en/docs/twitter-api/users/lookup/api-reference/get-users Twitterのツイートからも様々なパラメータの確認： https://pc-karuma.net/find-your-twitter-user-id-number/

Twitter api: Twitterアカウントのユーザー IDの確認

microCMSでブログを作成中です。 参照コードをコピーして作っているのに、TypeScriptエラーに遭遇しますね😅 ガシガシググって解決したことをメモしていきます。 <h1 id="hbfa6b0fbdf">◇non-null assertion</h1><pre><code>(property) __html: string
Type 'string | undefined' is not assignable to type 'string'.
 Type 'undefined' is not assignable to type 'string'.ts(2322)

</code></pre><img src="undefined" alt=""> ググって辿り着いた回答： 👉　<a href="https://stackoverflow.com/questions/54496398/typescript-type-string-undefined-is-not-assignable-to-type-string" target="_blank" rel="noopener noreferrer">https://stackoverflow.com/questions/54496398/typescript-type-string-undefined-is-not-assignable-to-type-string</a> You can now use the&nbsp;<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator" target="_blank" rel="noopener noreferrer">non-null assertion operator</a>&nbsp;that is here exactly for your use case. It tells TypeScript that even though something looks like it could be null, it can trust you that it's not:<pre><code>let name1:string = person.name!; 
// ^ note the exclamation mark here </code></pre> 末尾に「!」（non-null assertion operator）を挿入すると、nullに見えるかもしれないけど、nullじゃないからね！と伝えることができる！🤩 のですって✨ <img src="undefined" alt=""> <h1 id="h40de36c01a">◇TypeScriptエラーを無効化する魔法の呪文</h1>👉　<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-6.html#suppress-errors-in-ts-files-using--ts-ignore-comments" target="_blank" rel="noopener noreferrer">次の行を無視</a> データは渡っている。渡っているじゃないかー😭 とりあえず先に進みたい時の呪文 <pre><code> // @ts-ignore</code></pre> <img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/f024a80d119340c192a2d4bb91053556/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-28%2016.31.09.png" alt=""> <h1 id="h1466a29cde">◇Property does not exist on type 'JSX.IntrinsicElements'</h1><img src="https://images.microcms-assets.io/assets/2a658bd3cab7402abf367e5d63b702b5/848d4d4eaef2430e828d27cf38990c88/yokos_portfolio.png" alt=""> React基本のきの字ですが、コンポーネント名の頭文字は大文字にしましょう。 以上。 めでたし、めでたし✨

TypeScript解決できたエラーメモ

<a href="https://mantine.dev/" target="_blank" rel="noopener noreferrer">Mantine</a> はカスタマイズ可能なコンポーネントを提供してくれるコンポーネントライブラリです。Mantineを使うと、さまざまなフロントデザインが簡単に実装できてしまいます。

Blog