Heap Technology

<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>


個人開発が超手軽になる技術をまとめてみた

<p>ライブラリやフレームワークは誕生しては廃れてを繰り返しています。</p>
<p>今はReactやVueなどのコンポーネントベースでSPAが作れるjavascriptライブラリやそこからさらに発展した、Next.jsやNuxt.jsなどのフレームワークが注目されていますね。</p>
<p>ですがこれらのツールは敷居が高くアプリケーションを作る際の工数もとても増えます。<br>
そこで今後私が流行ると考えているフロントエンドの技術をまとめていきたいと思います。</p>
<h2>1.HotWire</h2>
<hr>
<p>Rails7に導入されたことで大変話題になった技術でもあります。<br>
ReactやVueなどとは違いHTMLを書くだけでSPAのアプリケーションを作れるのが<br>
最大のメリットです。工数をかけずにゴージャスなUIを作れるのでスタートアップの<br>
企業ではまだまだRailsも現役になると思います。</p>
<h2>2.Nuxt.js、Next.js</h2>
<hr>
<p>現時点でも最注目されているjavascriptフレームワークといっても過言ではありませんが、<br>
SEOにも強く用途によってレンダリング方法を切り替えられるこれらの技術は今後さらに需要が<br>
増して行くでしょう</p>
<h2>3.Typescript</h2>
<hr>
<p>typescriptはjavascriptに静的な型付けを出来るようにしたプログラミング言語です。<br>
昨今のフロントエンド開発での採用率が高まっています。強烈な型付けにより、コード自体が良質なドキュメントにもなり保守性が飛躍的に上がります。<br>
Typesciptが型付けを目的とした、開発の補助輪としてだけでなく、本番環境でも動くようになるとフロントエンドにおいて一強のプログラミング言語になるでしょう。</p>
<h2>まとめ</h2>
<p>技術の流行り廃りが早いフロントエンドの技術においては、トレンドを逃さずにすぐキャッチアップしていけるように常にアンテナを張ることが大事だと思います。</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>


React18ではレンダリング方法を変えよう

<p>新しい技術を試せる場が欲しかったのと個人のブログを運用したいと考え開設しました。<br>
主にWEBの技術について記していきたいと思います。</p>


Articles by Nasu