Hack Util Apps 開発開始

2022-06-05Hack Util Apps 開発記録

この都度は、自分で何かちゃんとしたものを作りたいということで、 Hack Util Apps を開発しようと思いました。具体的なサービスの内容は後ほど説明しますが、とりあえずプログラミングとかハッキングを勉強している方々のためになるようなサービスを作るつもりです。

ちなみに、本当に作り始めたのは五月中旬です。

 

開発陣

この私だけです。他に協力している人は今のところ一人もいません。

これからも基本一人でやっていきます。

アプリの概要

このアプリはプログラミングやハッキングを勉強している人のために作ったちょっとした機能を公開するつもりです。

例えば、よくあるもので言えば、グローバルアドレスチェックやポート開放チェックなどです。

本番はこちら

http://apps.probmkr.com:3001

開発環境はこちら（脆弱性が多いのでたまに非公開にすることがあります）

http://apps.probmkr.com:3002

使用技術

  • Node.js
  • React.js
  • Next.js
  • TypeScript
  • SASS
  • その他 npm パッケージ

詳しくは公開レポジトリをご覧ください。

https://github.com/Probmkr/test_next_project

Next.js

上記の通り、私は Next.js を使って開発しているんですが、それにはちょっとした理由がいくつかあります。

まず、このアプリ自体は、何か大きいものを自分で作ろうと思ったからです。

そして、今まではずっとフレームワークなどではなく、 PHP などで全く外部サービスを使ってませんでした。 （WordPress はれっきとした外部サービスですが、まあ、これはもう CMS で自分の成長にはあまり関与しないので例外です。）

ですが、最近 Twitter などを見ていればみんな何かのフレームワークを使って開発しているし、よく見る大型のサービスも何かのフレームワークを使っていることが多いです。

自分も PHP に少し飽きてきていました。 PHP は気をつけて書かないと脆弱性になったり、保守性が全くないコードになってしまいます。

また、その時はページ遷移がないWebサービスに憧れていました。 PHP だと、 POST リクエストを送るごとにページがリロードされるし、ページが変わる時もロードしなければいけませんでした。それがとても嫌だったのです。

そこで、私に Next.js を触れさせるきっかけとなったのが自分のディスコードサーバにいる Yuta さんでした。

彼は JavaScript などを使っていろんなサービスを作ってるとてもすごい方です。そして、彼が「Next.js は結構いいんじゃない」と言ってくれたので早速使ってみました。

とてもよかったです。コンポーネントで構成されているので、使い回しがとてもよく、動的ルーティングや api なども実装できるし、 SSR SSG でロードがとても速いサイトが作れます。

また、 SPA のおかげでページ遷移がストレスなくできるようになりました。

なので Yuta さんにはとても感謝しています。

次回予告

次回というか、まずこのシリーズの説明をしたいと思います。（最後に説明する記事なんて初めて見るんだがw）

このシリーズでは、私がこのウェブアプリを作り始めて完成し、日々のメンテナンスまでの全てを記そうと思っています。

もし、できれば、結構細かく記述するつもりですので、これから Next.js を使って開発したいという方にもお勧めかもしれません。

さて、今回は作り始めた経緯と概要を書きました。

次回は勉強過程について話そうかと思います。

次回：

Hack Util Apps 開発記録Hack Util Apps,HUA

Posted by Probmkr