😊

無料でデプロイできるVercelのmarkdownJSXとReactでホームページとNext.jsとTypeScriptでブログを作成

2022/07/15に公開

フリーランスでIT仕事をするにも、最も必要なのはホームページとブログです。これらが無い販売店や中小企業やITコンサルタントなども多いので、いくら優れた商品を販売しても、誰も見れない状態です。そこで私はモダンな最新技術でWebサイトを作ってみました。

MDXとReactでホームページ管理が現状では最も簡単

Facebook製のdocusaurusは簡単にWebサイト作成・保管ができる

上記が私のホームページで、Facebook製の「docusaurus」を使用しています。たぶんこれが一番簡単にWebサイトを作れます。「CMSがあるじゃないか」という意見もあるかもしれませんが、CMSはSQLなどを使っているので、描画速度が遅く、過去記事もmarkdown書類はHTML書類のようなものなので、保管や引っ越しなどで簡単です。またSQLサーバーは別サーバーなので防犯で劣ります。

MDXとはmarkdownJSXでNext.jsでも使われている

題名でmarkdownJSXという造語を表示しましたが、拡張子の.mdx書類はmarkdown書類でJSXが使えるというものです。markdownとは例えばHTMLの改行タグ「<br>」を英数文字のスペース（空白）を２つ入れただけで表示ができる、記事を多く書くには軽減できる記述方法です。

JSXとはReactでXMLライクな使用が出来る方法です。ただしこのHTMLの改行タグ「<br>」はHTMLタグの基本の両方をタグで括る方法ではない省略型なので、SEOで長けたNext.jsでは表示できません。これはNext.js以外でもmetaタグも<br />のように使い、廃止タグは使用をやめるしかないです。

なおこの上記の写真は「スキルと料金」という各ページに記載しています。なぜならReactはNext.jsよりも、最初に白色になり描画速度が遅いからです。しかし簡単に作れるテンプレート数がReactが多いのが現状です。

インフルエンサーらが言っていますが「今は絵や文章などの情報量の多さが勝てる方法」ですので、大企業客などの「白紙からプログラミングして」という発想は間違いです。これはPerlを使っていた1998年でも同じで、ページレイアウトをプログラマーがすることもあり、今はフレームワークの普及でプログラミングは軽減されるので、UI/UXデザインなどに集中するべきなのです。

写真多彩ブログならMAXとNext.jsとTypeScriptで作った方が良い

現代のブログのトップページは複数ページのプレビューが人気

このブログはVercelの公式サイトではなくVercelのGitHubのサンプルを使用しています。この過去記事を十数ページをプレビュー形式のデザインが、最近のnote.comのレイアウト変更からして、最も好まれていると思っています。この道は東京都稲城市平尾と川崎市麻生区古沢の都県境です。道の真ん中にいる黒いのは「歩いている猫」です。

デプロイ公開しなければ仕事受注も出来ないです

デプロイとは直訳で設置ですが、一般的には公開となります。今までの裕福ではないプログラマーなどはPerlやPHPでプログラミングをし、ApacheHttpサーバーのCGIなどとしてしか公開できませんでした。しかし同期系サーバーは1万閲覧以上あると遅延するC10K問題があります。

しかし今は非同期で最先端技術なモダン言語であるTypeScriptや、JavaScriptライブラリのReactや、ReactのフレームワークのNext.jsがあります。これは従来の技術よりも、正確だったり・簡単だったり・表示速度が早かったりするのです。

大企業は元々人気があるのでSEOに力を入れていない

しかしまだPHPの求人案件は多いです。これはCOBOLという40年は前のデータベース言語と同じで、大企業は古いPCなども多くあるので、それを生かさないと損だと思っているからです。米国の雇用保険でさえもコボルを使い、FAXも使っているので米国が最先端だとは思えません。

しかしネット社会となると、SEO競争という検索上位に上がらないと利益も得られません。また特に日本ではNext.jsの求人案件が、日本語のNext.jsの説明が少ないせいか少ないです。

ただしニーズは急変します。1998年にPerlを使い始め独壇場だと思ったら、2000年にはPHPの使用が求められました。そして大手サイトやお役所では今もPHPを使っているサーバーが多いです。

これはベテラン技術者にガッチリ地位をかためられているので、新参者は入り込める余地はありません。しかしモダン技術なら入り込めます。結局は最先端な物を必死にするしかないのです。

新参者のフリーランスが生き残るには最新な個性が必要

ただし最先端なものほど簡単になってきています。これはプログラミングではなく、デザイン・ライティングのセンスの方が必要です。プログラミングという見えない機能はユーザーも求めてなく、「刺さる」（心がひかれる）のは見た目です。

見た目とはまず検索で見える題名です。そしてクリックした後のデザインです。このデザインの描画プロセスでNext.jsのプリレンダリングは早いので優れています。また多くの人は絵や写真を好みます。結局ニーズがあるのは、絵や写真の数の多さだと思っています。