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を保存してはいけない

<h2>githubのenviromentを削除する方法</h2>
<p>githubリポジトリの右側に表示されているenviroment(デプロイ環境)を削除する方法を解説していきたいと思います。</p>
<p>僕が今回削除しようと思った理由としてはvercelのplguinをgithubにインストールするとコミットするたびにデプロイ環境にURLが反映されるようになりました。<br>
vercelからfirebase hostingに移行しようと思い、削除してもenviromentからvercelのデプロイ環境が消えませんでした。</p>
<p>↓enviroment環境はこの部分です<br>
<img src="https://storage.googleapis.com/p_6263ddbb8c2f5900186544b5/58f71ae2-0929-45ad-930e-882043f73da7%2Fenvironments-github.png" alt="environments-github.png"></p>
<p>アプリをデプロイ環境から削除しても、GitHub上では消えないので<strong>GitHub CLI</strong>で削除することにしました。</p>
<p><a href="https://cli.github.com">https://cli.github.com/</a><br>
公式サイトです<br>
僕は<code>brew install gh</code>でダウンロードしました。</p>
<p><code>$ gh api repos/{オーナ名}/{リポジトリ名}/deployments</code><br>
一覧表示</p>
<p><code>$ gh api -X POST -F state=inactive repos/{オーナ名}/{リポジトリ名}/deployments/{deployment_id}/statuses</code><br>
デプロイのstatusをinactiveしないと削除できないのでPOSTで変更</p>
<p><code>$ gh api -X DELETE repos/{オーナ名}/{リポジトリ名}/deployments/{deployment_id}</code><br>
Deleteコマンドでenviroment環境を消していけます。<br>
全てのenviroment環境を消し終わるとgithubリポジトリの右のサイドバーから完全に消えます!</p>


githubcliでenviroment(デプロイ環境)を削除した話

<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>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>JetBrains Gatewayとは</h2>
<p>2021年12月9日にしれっと公開されていたリモート環境に接続して開発するツールです。<br>
リモート環境にJetBrains系IDEをHeadlessで立ち上げて、クライアントからはCode With Meで接続しているような状態を実現できます。VSCodeのRemote SSHを使った状況に近いかもしれません。<br>
(詳細な説明はJetBrains Gatewayの公式ページを読んでもらえればと思います)</p>
<p>最初の頃は動作に不安定な感じがありましたが今ではローカルのコードを触っているのとほぼ一緒な操作感を実現できています。</p>
<p>CPUとメモリとディスクの容量も常に表示できるのもとても便利です。</p>
<h2>JetBrains Gatewayの使用具合</h2>
<p>接続先のipアドレスとユーザ名を登録すれば接続できます。<br>
<img src="https://storage.googleapis.com/p_6263ddbb8c2f5900186544b5/4a8e383f-8f0f-4bd8-a5f0-96063c58303b%2Fjetbrainsgateway.png" alt="jetbrainsgateway.png"></p>
<p>接続する際もRubyMineやPyCharmなどJetBrainsが提供するIDEの中から好きなものを選んで接続し、コードを触ることが出来ます。<br>
また、2022年の4月末からGitPodにも接続できるようになったようです。<br>
<img src="https://storage.googleapis.com/p_6263ddbb8c2f5900186544b5/615c6bf6-7564-4cc5-ac43-9972b6b03495%2Flanguage_select.png" alt="language_select.png"></p>
<h2>使ってみた感想</h2>
<p>環境さえあれば、sshで接続してJetBrainsの製品を選んで誰でも開発ができるのでチームで開発環境を統一したり、新人の開発環境を作りたい時などには効果てきめんだと思いました。<br>
たまに挙動が不安定になる時があるのでそれさえ改善されれば本当に文句なしです。</p>
<h2>まとめ</h2>
<p>現時点ではリリース版は出ていないので（2022/08/02時点）jetbrainsgatewayの今後の発展が楽しみですね。</p>


jetbrainsgatewayでのリモート開発が便利すぎる

<h2>CloudIDEのススメ</h2>
<p>CloudIDEを使う際は開発環境を作る必要がないためとても便利です。<br>
手取り早く開発を始めたいときや世界中の人たちのコードを参考にしたい場合は見てみると勉強になります。<br>
今回はそんな便利なCloudIDEのサービスをいくつか紹介していきます。</p>
<h2>codesandbox</h2>
<p><a href="https://codesandbox.io/">codesandbox</a>はWeb上で利用するブラウザIDEの一つで、サイトにアクセスするだけでjavascript関連のフレームワークの開発環境を作ることができます。<br>
codesandboxでは以下のようなライブラリ・フレームワークに対応しています。<br>
※2022年6月30日時点の情報です。<br>
※codesandboxのホームに書いてあるものを載せているので実際には他のものも動くかもしれません</p>
<p>Vanilla,Typescript,React,Vue3,Angular,static,Node HTTP Server,remix-starter,Preact,Next.js,codesandbox-nuxt,Svelte,gatsby-starter-default,GSAP + Bonus Plugins Starter,blitz-js,docusaurus,CxJS.dojo-codesandbox-template,Reason,Adonis,Apollo<br>
Server,Ember,SaraVieira/gridsome-starter-codesandbox,@mdx-deck/basic-template,<br>
MarkoJSnestjs/typescript-starter,quasarframework/quasar-codesandbox,codesandbox-app/sapper-template,styleguidist/example,universal,VuePress,fastify-starter,p5.js</p>
<p><strong>下がcodesandboxです</strong></p>
<iframe src="https://codesandbox.io/s/gallant-pascal-03qr32" title="Plotly All Graph Types" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<h2>StackBlitz</h2>
<p><a href="https://stackblitz.com/">StackBlitz</a>は、Webアプリケーション用のVisualStudioCodeを利用したオンラインIDEです。<br>
プラットフォームは、デスクトップバージョンと同じように応答性と適応性があります。</p>
<p>StackBlitzでは以下のようなライブラリ・フレームワークに対応しています。<br>
※2022年6月30日時点の情報です。<br>
※StackBlitzのホームに書いてあるものを載せているので実際には他のものも動くかもしれません</p>
<p>Next.js,Node.js,Nuxt3,JavaScript,TypeScript,React,Angular,Vue,RxJS,Solid.js,<br>
NestJS,Express,Koa,Egg.js,Feathers,GraphQL,jsonserver,JSONGraphQLServer,Remix,SvelteKit,preact,lit,Eleventy,Docusaurus,Slidev,Astro Blog,Astro,Docs,Nodeman,Vitest,Vite,Webpack</p>
<p><strong>下がstackblitzです</strong></p>
<iframe src="https://stackblitz.com/edit/react-ts-sravds?file=App.tsx" title="Plotly All Graph Types" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<p><br/><br/></p>
<p>個人的にはstackblitzはJS界期待の新人の<strong>Solid.js</strong>に対応しているのが大きいですね。</p>
<p>codesandboxもstackblitzもフロントエンドフレームワークだけではなく、<strong>nest.js</strong>などのバックエンドのJSフレームワークも試せるのがかなりの魅了的だと思います。　<br>
バックエンドとフロントエンドの知識を両方つければ一人でアプリケーションの開発ができるようになるので開発ツールとしてだけでなく勉強ツールとしてもCloudIDEはかなり優秀だと思います。</p>
<p>逆にrailsやdjangoなどのフルスタックフレームワークを学びたい人は<a href="https://paiza.cloud/ja/">paiza.cloud</a>を使えば初学者でもつまづかずに勉強を継続できます。</p>


JSフレームワークの勉強はcodesandboxやstackblitzで学べば挫折しない

<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><strong>今回はブログを作る際の方法について紹介していきます。　<br>
ブログの技術は大まかに4つの方法に分類されると思う。</strong></p>
<h2><strong>1.Wordpress</strong></h2>
<hr>
<p>WordPressはインターネット上のすべてのサイトのうち、43%の使用率を誇ります。<br>
シェア率がとても高いので困った時も調べれば情報が溢れているため、すぐに解決に向かうのもメリットです。</p>
<h2>2.ノーコード系ツール</h2>
<hr>
<p>初心者におすすめなのが<a href="https://studio.design/ja">STUDIO</a>や<a href="https://ja.wix.com/">Wix</a>などのノーコードツールです。<br>
コーディングやサーバーの設定など一切したくない場合におすすめです。</p>
<h2>3.フルスタックフレームワーク</h2>
<hr>
<p>プログラムを1からゴリゴリ書いて作りたい人におすすめです。<br>
RailsやDjangoなどを使いバックエンドのプログラムを書いて、HTMLなどのマークアップを書くという工程を全部したい人にはいいかもしれませんが、時間的なコストが掛かるので人を選びます。</p>
<h2>4.Jamstack構成</h2>
<hr>
<p>今ならJAmstack構成のブログが技術的にはモダンでパフォーマンスが高いです。<br>
<strong>事前にページを静的なHTMLとして変換しておくことで高いパフォーマンスとSEOを確立出来ます。</strong><br>
フロントエンド領域が得意ならnext.jsやnuxt.jsでブログのUI側を作り、microCMSやnewt等のサービスを使うのが良いと思います。</p>
<br>
<p><strong>方法はたくさんあるのでまずはリリースまでいけるように技術選定をして完成まで頑張りましょう。</strong></p>


ブログを開設するための方法をまとめてみた

<p>個人開発をするときの最適解の技術は日々変わっています。そこで私が思う個人開発を手軽にする技術を紹介していきます。</p>
<h2>1.API部門</h2>
<hr>
<ul>
<li><a href="https://firebase.google.com">Firebase</a><br>
ログイン処理、基本的なAPIはなんでも作れる万能なサービスです。Googleが提供しているのも◎。</li>
<li><a href="https://www.newt.so/">newt</a><br>
コスパ最強の日本のスタートアップが提供するAPIツールです。このサイトもバックエンドはnewtで動いています。</li>
<li><a href="https://microcms.io/">microcms</a><br>
同じく日本のスタートアップ企業のサービスです。ここ一年間でとてもバズッたサービスの一つでしょう。管理しやすいコンソール画面と公式の日本ドキュメントの多さは魅力です。</li>
</ul>
<h2>2.デプロイ先部門</h2>
<hr>
<ul>
<li><a href="https://jp.heroku.com/">heroku</a><br>
無料プランは数分アクセスしなければでサーバーがスリープしますが、監視ツールを使って定期的にページにアクセスをするなど工夫すれば無料の運用も出来ます。<br>
Dockerコンテナごとデプロイできたりして割と便利です。<br>
※追記<br>
どうやらherokuは無料プランは廃止になることが決まったそうです...<br>
<a href="https://forest.watch.impress.co.jp/docs/news/1435422.html">https://forest.watch.impress.co.jp/docs/news/1435422.html</a></li>
<li><a href="https://vercel.com/">vercel</a><br>
next.jsの開発元が出しているので安心してデプロイできます。無料プランだと商用利用ができません。</li>
<li><a href="https://www.netlify.com/">netlify</a><br>
コスパ最強で無料プランで商用利用も可能です。</li>
</ul>
<h2>3.IDE部門</h2>
<hr>
<ul>
<li><a href="https://www.jetbrains.com/ja-jp/">JetBrains</a><br>
IDEはこのシリーズが一強です。</li>
</ul>


#Developers