SIerエンジニアが初めてのWebサイト作成〜自治会サイトのマイグレーション〜
記事の内容
SIerエンジニア(34)が初めてのWebサイト作成を行った体験録。
読んで得することはない。
経緯
社長から社長が個人で保守している自治会サイト（≠自治体サイト）のマイグレーションをしたいと飲み会で発言。
サイト自体のマイグレーションは多いに賛成するところであり、私のスキルの棚卸しとしてもチャレンジしやすい案件と思い受けた。
私のスキルセット
私の環境
- 土日に軽くコーディングできるくらいの時間は取れる
- 平日夜はコーディングほぼ不可能
- 2020/4はニート。
システム概念図
実際の構成
フロント構成
フロントは、自治会員用の公開サイトと、運営者用の管理者サイトを作成した。
言語
TypeScript
パッケージマネージャ
webpack
フレームワーク
React および React Hooks
ライブラリ
| ライブラリ | 目的 |
|---|---|
| dotenv | 環境変数制御用 |
| react-router | ルーティング用 |
| react-table | テーブル表示用 |
| material-ui | cssフレームワーク |
| material-io | cssフレームワーク |
| date-picker | 日付選択UIライブラリ |
| marked | マークダウン to HTML |
外部サービス
firebase authentication
フロントのログイン時に利用。
エディタ
外部サービス
firebase authentication
ログイン後、フロントからサーバサイド処理を呼び出された際の認証トークン検証。
DB
情報共有
Stock
メモ類の管理に使った。
正直、機能面が弱いのとエディタの書き心地が悪かった。
マークダウン対応していないのも微妙。
後発にしては強みがどこなのかわからなかった。
Slack
チャット。個人開発ゆえ、あまり使わなかった。
使ったことがなかったので使ってみた感。
GitHub
コード共有。
開発の流れ
超ざっくり要件定義
社長と会話して要件定義を図る。
当初スコープは、現行踏襲＋便利機能もろもろ追加（pwaとか備品管理したいとか夢がいっぱい語られた）。
正直、細かい点をどうしたいという希望が出てこなかったので若干の不安を抱いた。
この時点では、自分自身、開発を甘く見ていたのでいろいろ夢を語った。
プロジェクト数
- フロント（外部公開サイト）
- 管理サイト
- サーバサイド
- 移行用
現行サイトの記事の移行プロジェクト。
記事の取り込み、マークダウンへの変換を実施。
難所
ミドルウェア全般
メールサーバ構築 困った度：★★★★★
安請け合いしたメールサーバが地獄だった。
どこかで躓くと死ねる。
反省点は、/var/log/maillogや/var/log/messagesを見てから対応するのが基本である。
コストを考えると、AWSで調達したほうがよかった気がする。
構成は
Webクライアント：Rainloop
メールソフト：postfix, dovecot
hugoインストール 困った度：★★★★★
go製のブログフレームワークであるhugoをインストール。
makeするなどの手順があり、あまり経験がなく難航した。
実装面
raect-table 困った度：★★★★★
Typescriptでコーディングしていたが、react-tableをTypescriptで使うには難易度が高かった。
useSortby, usePaginationなどのpluginを使う場合、型定義ファイルを差し替える必要がある。
この情報を理解するのに手間取った。
正直型定義ファイルを再作成するのは苦痛だった。
CORS 困った度：★★☆☆☆
クライアントからSpring Bootへのリクエストが延々と拒否される。
根本原因と表出したエラーがうまく噛み合っていなくて混乱した。
Webでよく見る事例を行っていれば普通は出来る。
環境別ビルド 困った度：★☆☆☆☆
webpackやSpringBootにおける環境別ビルドの制御。
レスポンシブ 困った度：★★★☆☆
cssって一つの言語レベル。。。
Spring Data JPA 困った度：★★★★★
@OneToOneの際に親側に外部キーを持たせないといけない点を知らず詰まった。
全体的に
いろいろな問題が頻発したが、複合的な問題となっているケースもあり、
過去の障害切り分けの経験が生きた。
楽しかったところ
全体像の設計
Webサイト全体のアーキテクチャから考える経験は無かったので、かなり楽しかった。
どうやって見せるか、どうやって記事を編集するか、など。
react hooks
useContextによるエラー制御やログインユーザの保持。
useStateによる状態管理。
hooksという仕組みの制限が見通しの良さをある程度要求してくれた。
簡易ブログ記述画面
プレビュー付きマークダウンエディタを用意できた。
気持ちいい。
テキストエリアにファイルをドラッグアンドドロップすると、ファイルのアップロードが行われ、
マークダウン用の参照パスがエディタ上に挿入される。
反省点
ポエム
フロントエンド実装を伴う開発を初めて一気通貫でやってみたが、
使えるライブラリがとても多くあったし、現在進行形で日々よく出来たライブラリに出会っている。
技術のコモディティ化を身を持って体感した。
より、何を作るのか？が問われる時代が来ている。
まとめ
システム全体のライフサイクル含めて完成したときの気持ちよさはすごい。
