Heap Technology

<h1>忙しい人の救世主！電子レンジ変換アプリが登場</h1>
<p>こんにちは！今日は、お昼休みの時間を効率的に使いたいと思っている方々に朗報です。待望の電子レンジ変換アプリがついにリリースされました！<br>
アプリの詳細はこちら：<a href="https://microwave-oven-conversion.heap-technology.com">電子レンジ変換アプリ</a></p>
<h2>このアプリが生まれた理由</h2>
<p>僕は会社のお昼休みを冷凍食品で済ませることがよくあります。<br>
しかし、いつも同じ疑問が頭をよぎるんです。それは、「この冷凍食品、600Wで5分と書いてあるけど、900Wの電子レンジだと何分でいいんだろう？」ということ。<br>
そんな問題を解決できるアプリがあればいいなと思い、開発に着手しました。</p>
<h2>アプリの特長</h2>
<h3>瞬時の時間変換:</h3>
<p>任意のワット数での調理時間を入力すると、目的のワット数に対応した新しい調理時間を瞬時に計算します。</p>
<h3>直感的なインターフェース:</h3>
<p>シンプルなデザインで、誰でもすぐに使いこなせます。</p>
<h3>複数のワット数設定</h3>
<p>様々なワット数の電子レンジに対応しています。</p>
<h3>完全無料:</h3>
<p>お金は一切かかりません。気軽に使ってください！</p>
<h2>なぜこのアプリが便利なのか？</h2>
<ol>
<li>調理時間の誤算を防ぎ、料理の品質が向上します。</li>
<li>経験不足の料理人でも簡単に調理時間を計算できます。</li>
<li>スマートフォンやタブレットからすぐにアクセスできます</li>
</ol>
<h2>簡単な使い方について</h2>
<ol>
<li>アプリを開き、現在使っている電子レンジのワット数と調理時間を入力します。</li>
<li>「変換」ボタンをクリックすると、新しいワット数と調理時間が表示されます。</li>
<li>それに従って料理をして、美味しく召し上がれ！</li>
</ol>
<h2>最後に</h2>
<p>この電子レンジ変換アプリは、調理時間を手軽に計算できる画期的なツールです。忙しい日々の中で少しでも料理のプロセスをスムーズにしたい方は、ぜひ使ってみてください。それでは、美味しいお昼をお楽しみください！</p>


アプリの画面

【個人開発】電子レンジ変換アプリをリリースした件

<h2>SPA(React)のログイン処理の脆弱性について</h2>
<p>railsでログイン処理を作ったときに勉強になったことがあったので書き記したいと思います。</p>
<p><a href="https://github.com/heartcombo/devise">devise</a>と<a href="https://github.com/lynndylanhurley/devise_token_auth">devise_token_auth</a>を使った時のことです。<br>
ログイン時にリクエストが成功した際は<code> access-token,client,uid</code>の3つのheader情報をreact側に返すようにしていました。</p>
<p>そして、その情報をreact側でcookieに保存していました。（webstorageよりcookieの方が安全と聞いていたため）<br>
その時は、react側であらゆるAPIに対してのリクエストをこんな感じで書いていました。</p>
<pre><code>export const client = axios.create({
    baseURL: 〇〇
});
</code></pre>
<pre><code>import Cookies from &quot;js-cookie&quot;

client.get(&quot;/auth/sessions&quot;, { headers: {
    &quot;access-token&quot;: Cookies.get(&quot;_access_token&quot;),
    &quot;client&quot;: Cookies.get(&quot;_client&quot;),
    &quot;uid&quot;: Cookies.get(&quot;_uid&quot;)
  }})
</code></pre>
<p>しかし、この方法ではセキュリティ的に安全とは言えませんでした。<br>
なぜなら、cookieではhttponly属性と言うものがありこれを使うことによりjavascriptを使った攻撃を弾くことができます。（cookieを取得できないようにできる）</p>
<p>ですが、<strong>javascriptでcookieファイルを作り出して、httponly属性を付与すると取得ができないファイルと化してしまうため、必然的にhttponly属性の付与が不可能でした。</strong><br>
(根本的にhttponly属性はサーバー側に付与してもらうのが普通のようです。)<br>
<a href="https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript">https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript</a></p>
<p><strong>つまり、フロント側で生成したcookieはhttponlyを付けていないcookieとなるため、webstorageと全く一緒でセキュリティ的リスクがあります。</strong><br>
あとは単純にユーザがブラウザの開発者コンソールから見た時に「このアプリのtoken、httponly付けてないじゃん、、」と思われ、不安を煽ってしまうのもデメリットだと思います。</p>
<p>そのため、apiからhttpolnyを付与したcookieファイルをgetしてcredetialsオプションを付けてあげる必要があります。</p>
<pre><code>export const client = axios.create({
    withCredentials: true,
    baseURL: 〇〇
});
</code></pre>
<p>そしてrails側(API側)でも<code>credentials</code>をオンにすることでクロスドメインでcookieのやりとりをできるようにします。<br>
そうすることによってAPIからhttponly属性を付与したcookieをreactに共有することができました。<br>
ログイン処理のセキュリティリスクは出来るだけ排除したいので気をつけながら開発しましょう！</p>


SPA(React)でログインを実装する時にフロント側のCookieにtokenを保存してはいけない

<p>今回はreact（フロントエンドだけ）でwebページをpdfにして出力する方法をいくつか<br>
紹介していきたいと思います。</p>
<h3>jspdfとhtml2canvasを使って一旦画像に変換してからをpdfにする</h3>
<p>メリットとしては画像なので文字化けや表示がおかしくなることがほとんどありません。<br>
デメリットなのはpdfといっても画像を埋め込んでいるだけなので文字の選択やコピーができません。</p>
<p><a href="https://www.npmjs.com/package/jspdf">jspdf</a><br>
<a href="https://www.npmjs.com/package/html2canvas">html2canvas</a></p>
<p>下記が例のコードです。</p>
<pre><code>import React from &quot;react&quot;;
import &quot;./styles.css&quot;;
import jsPDF from &quot;jspdf&quot;;
import html2canvas from &quot;html2canvas&quot;;

export default function App() {
  const printDocument = () =&gt; {
    const input = document.getElementById(&quot;test&quot;);
    html2canvas(input).then((canvas) =&gt; {
      const imgData = canvas.toDataURL(&quot;image/png&quot;);

      const pdf = new jsPDF();
      pdf.addImage(imgData, &quot;PNG&quot;, 20, 20);
      pdf.save(&quot;download.pdf&quot;);
    });
  };

  return (
    &lt;div className=&quot;App&quot; id=&quot;test&quot;&gt;
      &lt;p&gt;test&lt;/p&gt;
      &lt;button onClick={printDocument}&gt;PDF&lt;/button&gt;
    &lt;/div&gt;
  );
}

</code></pre>
<h3>jspdfでhtmlElementからpdfにする</h3>
<p>文字やcssが消えることが多いです。<br>
使い方によっては上手く運用できるかもしれませんが私の試した限りだとダメでした。</p>
<h3>kendo-reactを使う</h3>
<p><img src="https://storage.googleapis.com/p_6263ddbb8c2f5900186544b5/1da40d4a-ffda-46ee-9d05-1a20fe29c6dc%2Fkendo-react.png" alt="kendo-react.png"><br>
<strong>これが一番綺麗に出力できました。</strong><br>
有料ですが、npmにpackageが公開されているのでお試しに挙動を確認するだけなら一応無料で使えます。<br>
(運用するならちゃんとライセンスを購入しましょう..)</p>
<p><a href="https://www.telerik.com/kendo-react-ui/components/">kendo-reactのURL<br>
</a></p>
<p>下記がpdf出力をする際に使うnpmのpackageです。</p>
<ul>
<li><a href="https://www.npmjs.com/package/@progress/kendo-drawing">@progress/kendo-drawing</a></li>
<li><a href="https://www.npmjs.com/package/@progress/kendo-licensing">@progress/kendo-licensing</a></li>
<li><a href="https://www.npmjs.com/package/@progress/kendo-react-pdf">@progress/kendo-react-pdf</a></li>
</ul>
<h3>googleの印刷機能からpdfを出力をする</h3>
<p>正直これでも問題ないかと思います。<br>
ちゃんと文字をpdf文書の文字もコピーできますし、文字化けの心配もありません。<br>
表示できるページからしかpdf出力できないのは仕様上仕方ないですが微妙ですね....<br>
<img src="https://storage.googleapis.com/p_6263ddbb8c2f5900186544b5/072fce3f-76fd-4757-8f92-4e21140f5ed0%2Fgoogle_pdf.png" alt="google_pdf.png"></p>
<hr>
<p>個人的には有料にはなりますがkendo-reactが一番使いやすく綺麗に文書をコピーできるpdfが出力できたのでおすすめです！</p>
<p>また、実際に詳しいコードが見たい方は<a href="https://codesandbox.io/search?query=&amp;page=1&amp;configure%5BhitsPerPage%5D=12&amp;refinementList%5Btemplate%5D%5B0%5D=create-react-app">codesandbox</a>で検索をすると参考になるプロジェクトがたくさん見つかるのでぜひ試してみてください！</p>


pdfのアイコン

React(フロントエンド)でpdfを出力したい時の方法まとめ

<h2>なぜRecoilを推しているのか</h2>
<p><a href="https://recoiljs.org/docs/introduction/getting-started/">recoil</a>はreactで使う状態管理ライブラリの一つで、とてもコンパクトにグローバルステートを作り出すことが出来ることと学習コストの低さ、管理のしやすさが魅力です。<br>
下記でrecoilや他の状態管理のhooksやライブラリを解説していきます。</p>
<h3>Recoil</h3>
<p>metaが提供しているというのが一つ目の利点です。　reactもmetaが提供しているのでサポート的な面で見ても安心でしょう。<br>
また、reactではどこかのstateを更新すると全ての子コンポーネントが更新されるみたいなことが起こりえます。<br>
recoilではそれぞれのstateの状態を<code>atom</code>に持たせてあげるだけでstateの更新による再レンダリングの問題は解決します。</p>
<h3>useContext</h3>
<p>ReactHooksの一つなのでライブラリを入れずに解決できるのが利点だと思ってます。<br>
また、学習コストも低いので最初はuseContextから始めるのもアリだと思います。</p>
<p>欠点としてはuseContextのでstate管理した場合は再レンダリングが走ります。<br>
再レンダリングが走って困る場合と困らない場合があるので一概に悪いとは言えませんが、もしも再レンダリングを無くして解決したい問題があるならrecoilを使うことをおすすめします。</p>
<p>そして、あまり使いすぎるとproviderタワーが肥大化するのも欠点でしょう。</p>
<h3>Redux</h3>
<p>古参の状態管理ライブラリで一定の人気がありますし、大規模なプロジェクトに向いています。</p>
<p>欠点　<strong>めんどくさい</strong>（これにつきます。すみません）</p>
<h2>recoilでGlobalStateを作ってみる</h2>
<p>まずはグローバルに状態管理をするためにatomを作りましょう。<br>
store.ts</p>
<pre><code>import { atom }  from &quot;recoil&quot;;

export const authMessage = atom&lt;string&gt;({
    key:'auth-message',
    default:&quot;&quot;
});
</code></pre>
<p>index.tsx</p>
<pre><code>import {useRecoilState} from &quot;recoil&quot;;
import {authMessage} from &quot;../store.ts&quot;

const [message,setMessage] = useRecoilState(authMessage);
</code></pre>
<p>後はこうしてあげればグローバルに使用できるstateの完成です。　<br>
どこからでもatomを経由して同じstateのデータにアクセスできるからとても簡単ですね。</p>
<p>以上でrecoilの説明について終わります。ではでは良いreactライフを！</p>


recoilの画像

Reactでの状態管理はRecoilがおすすめ

<h2>railsApiが大量のバリデーションエラー文を吐いた..</h2>
<p>railsを使ったバリデーション結果をreact(フロント側で)表示した時に起こったトラブルです。</p>
<pre><code>  validates :email, presence: true
  validates :email, format: { with: /\A[a-zA-Z]+\z/}
</code></pre>
<p>例えばこんなバリデーションをmodleに書いてるとして、フロント側(今回はReact)で空白の文字を入れると<br>
&quot;<strong>〇〇を入力してください</strong>&quot;,&quot;<strong>〇〇は不正な値です</strong>&quot;と2つのバリデーションエラー文が返ってきます。</p>
<p>基本的に空白の文字の際に出力したいエラー文は&quot;<strong>〇〇を入力してください</strong>&quot;くらいなので<br>
これは少し過剰なわけです。</p>
<p><strong>before</strong></p>
<pre><code>  validates :email, presence: true
  validates :email, format: { with: /\A[a-zA-Z]+\z/}
</code></pre>
<p><strong>after</strong></p>
<pre><code>  validates :email, presence: true
  validates :email, format: { with: /\A[a-zA-Z]+\z/}, allow_blank: true
</code></pre>
<p>こんな風に <code>allow_blank: true</code>を追加してあげるだけで空白時はバリデーションが実行されなくなります。<br>
補足としては、空でないことを判定する<code>presence: true</code>は空白時にも実行してあげたほうがいいので、<br>
<code>presence: true</code>には<code>allow_blank: true</code>を追加しないほうがいいですね。</p>
<h2>終わりに</h2>
<p>Railsのバリデーション結果を表示したい時は必須の設定なので、ぜひ覚えてみましょう！</p>


railsのロゴマーク

railsで空白をpostした時に全てのバリデーション結果が出力された時の解決法

<h2>swrについて</h2>
<p>皆さんはReactでgetアクションをする際、どんな方法を使っていますか？<br>
fetechだったりaxiosだったりReact Queryだったり色んな方法がありますよね。</p>
<p>今回Reactでのgetアクションの方法でおすすめしたいのは<a href="https://swr.vercel.app/ja">swr</a>で<strong>useStateライクな関数を作ってgetしたデータを入れるというものです。</strong><br>
<a href="https://swr.vercel.app/ja">swr</a>とは1度読み込んだ時のデータをキャッシュとして保存し、2度目からアクセスする時はキャッシュから表示することで高速で表示させることができるライブラリです。</p>
<p>それでは実際にswrを使ったuseStateライクな関数にgetしたデータを入れるコードを書きます。</p>
<h2>swrを利用したstate管理</h2>
<p>まずはこうしてuseStateライクな関数をuseSWRで作りましょう。</p>
<pre><code>import useSWR from 'swr';

export const useSwrState = (key:string,fallbackData: any) =&gt; {
    const { data:state, mutate:setState }  = useSWR(key,{ fallbackData });
    return [state,setState];
};
</code></pre>
<p>そうするとuseStateのように先ほど定義した関数を呼び出せます。</p>
<pre><code>const [data, setData] = useSwrState(&quot;key&quot;,[]);
</code></pre>
<p>後はいつも通りaxiosなりでgetすれば、見慣れたuseStateライクな記述方法でswrを使ったgetアクションができます。</p>
<pre><code>import axios, {AxiosError, AxiosResponse} from &quot;axios&quot;;

    useEffect(() =&gt; {
        axios.get(&quot;/api/url&quot;)
            .then((res:AxiosResponse) =&gt; setData(res.data))
            .catch((error:AxiosError) =&gt; console.error(error));
    }, []);
</code></pre>
<p>注意点としては、swrのkeyに毎回他と被らない一意な値を代入する必要があり面倒ですが、対処法として自動的に毎回違う値を自動で代入する処理を書けば完璧になります。(urlのパスなど)。</p>
<h2>終わりに</h2>
<p>Reactでgetアクションをする際の方法は本当に様々ですが、swrは利用するだけでパフォーマンスが上がりとても便利なので開発時はぜひ活用してみましょう。</p>


swrの画像

Reactでgetする時はswrでuseStateライクな関数を作ると便利

<h2>概要</h2>
<p>今回はreactのアプリケーションを自分のOSの中でreactを永続化して本番環境で起動したい場合は<a href="https://pm2.keymetrics.io/">pm2</a>と<a href="https://www.npmjs.com/package/serve">serve</a>を組み合わせて使うのが簡単なので説明します。(本番環境で使うことを推奨している訳ではありません)</p>
<h2>他の手段</h2>
<p>githubpageやnetlifyなどのデプロイツールを使わずにsystemdを使ったりnginxなどでbuildしたファイルを指定するのがパフォーマンス的にもいいですがとりあえずで起動したい場合は今回の方法が楽です。</p>
<h2>永続化の手順</h2>
<p>簡単に説明するとpm2は永続化するためのコマンドでserveはbuildしたファイルを公開するためのコマンドです。永続化の手順の説明をします。</p>
<p>手順1<br>
<code>npm install -g serve</code><br>
serveをグローバルにインストール</p>
<p><code> npm install -g pm2</code><br>
pm2をグローバルにインストール</p>
<p>手順2<br>
<code>npm build</code><br>
reactをビルドする</p>
<p>手順3<br>
<code> pm2 serve build 3001 --spa</code><br>
ポート番号を指定して公開</p>
<p>※例ではnpmコマンドを使っていますがyarnを使ってるならyarnコマンドでも大丈夫です。</p>
<p>これでとりあえずは永続化してreactアプリを動かすことができます。</p>


pm2を使って手軽にreactアプリを永続化(デーモン化)したい時の方法

<h2>概要</h2>
<p>Viteというビルドツールの紹介と型チェックを導入する手順の説明です。<br>
(2022年6月6日段階では最新はv2.9.9です)</p>
<p>Viteは .ts ファイルのインポートをサポートしていますが、ファイルのトランスパイルだけを行い、型のチェックは行いません。<br>
Viteでの型チェックは、IDEやビルド時に行われることを前提としています。<br>
これはとても不便ですし、しっかりエラーが出ないとTypescriptのメリットが薄れてしまいます。</p>
<p>そこで困っている人に<a href="https://github.com/fi3ework/vite-plugin-checker">vite-plugin-checker</a>とライブラリがおすすめです。<br>
これを使えばViteでもリアルタイムで型チェックをしてくれますし、Vite自体も従来のビルドツールに比べて、高速で動作するので鬼に金棒です。</p>
<h2>Viteで型チェック導入</h2>
<p>まずはライブラリを導入します。</p>
<pre><code>yarn add vite-plugin-checker -D
</code></pre>
<p>vite.config.tsにコードを記述します。</p>
<pre><code>import checker from 'vite-plugin-checker';

export default defineConfig({
    plugins: [checker({ typescript: true })],
});
</code></pre>
<p>これだけでリアルタイムの型チェックを行ってくれます。<br>
とても便利なのでViteとTypescriptを使いたい人は導入しない手はないでしょう。</p>


ViteでTypescriptの型チェックをする方法

<h2><strong>工数が増える</strong></h2>
<hr>
<p>通常、RailsやLaravelなどのフレームワークをAPIとして使いreactやvueなどでUIの表示をする場合は、バックエンド側とフロント側で合計２回バリデーションのコードを書かなければならない。人によってはこれを無駄と感じる人はいるでしょう。</p>
<p>まず、バックエンド側のバリデーションにはセキュリティやデータベースに登録するデータの抜け道を無くす意味があります。<br>
しかし、フロント側のバリデーションはセキュリティとしての意味は無く、基本的にUX向上としての意味で実装します。</p>
<h2><strong>実装で楽をしたい場合</strong></h2>
<hr>
<p>バックエンドがnode.jsでフロントがjavascirptなら一つのバリデーションのコードを使い回せるので効率的に作れると思います。</p>
<h2><strong>最速で実装するには</strong></h2>
<hr>
<p>そうすると、納期まで時間がない場合や、効率的に開発をしたい場合などはバックエンド側のバリデーション結果をGetアクションでフロント側に表示するのが一番早いと思います。<br>
RailsにしろLaravelにしろ多くのバックエンドのフレームワークではエラー文の表示は可能なので、それをGetしてreactやvueなどのフロント側で使い回せば、開発効率を劇的に向上させることが出来ます。</p>
<h2><strong>出来ることならしたほうがいい</strong></h2>
<hr>
<p>もちろん、時間が多くあり、多くのユーザに使ってもらいたいアプリケーションを作るならフロント側でのバリデーション実装はUX向上としての意味は十分に意味があると思いますし、やることを推奨します。</p>
<p>ちなみにReactを使ったフロント側でバリデーションを作るなら<a href="https://react-hook-form.com/jp/">react-hooks-form</a>がデファクトスタンダートになってきていますし、おすすめです。</p>


フロントエンド側のバリデーションを実装しないという選択肢について

<p>React18がリリースされ、既存のプロジェクトをReact18にアップデートする人が増えてきていると思います。React18からのレンダリング方法は下記のように変更するとReact18の機能をフルに使えます。</p>
<pre><code>import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(&lt;App /&gt;);
</code></pre>


#React