◆ 簡単なもの (markdown editor) をそれぞれのツールで作ってみる
◆ この記事は作る機能の紹介とまとめ部分で使い方はそれぞれのツールごとに別記事

ウェブサーバで動くフレームワークを比較してみようと思います

これまでは一部使ったことがあるものもありましたが 結構前でもう EOL だったり 使ったと言ってもすでに使って作られたものをちょっと修正するとかで各フレームワークならではの機能は触れないことばかりでした
一からつくるもので使ってもよかったのですが そういうのが必要になるほどのものを作ることもなく apache で静的な HTML/CSS/JavaScript を serve するだけで十分でした

なのでたまには何か使ってみようかと思ったのですが迷います
とりあえず簡単なものを色々なもので作ってみて基本的なところだけ把握しておけばいいかな ということで色々なものを使ってみました

過去ブログに書いたものがあるかもしれませんが順番が前後してるだけでどれもこの比較で使うのがはじめてです
なので 簡単な特徴だけじゃなく使い方説明とかも兼ねようかと思ってます
また 使い慣れたものではないので その Framework においてベストな方法とは限りません
あくまでサンプルやドキュメントなどを参考にしてつくって 正しく動くことが確認できてるものです
長くなるので記事はそれぞれ別のにしていこうと思います

この記事ではどういうものを作るかの紹介とそれぞれの記事への目次とします

Framework

現時点で対象にした Framework はこれらです


いきなり Framework からだと分かりづらいと思うので比較のために考え方の違う JavaScript と PHP の 2 つで Framework なしで直接書いた場合の例も置いてます
vanillajs と vanillaphp がそれに当たります
JavaScript は vanillajs と呼ばれますが PHP も vanilla でいいのでしょうか
どこかで purePHP みたいな呼び方を聞いた覚えもありますけど……

記事は徐々に追加していこうと思うので 書き次第リンクが付きます
コード自体はもうあるのでコードだけ見たい場合はこちらからどうぞ
普段なら Gist に置くのですが Gist だとこの量は辛かったのでリポジトリにしました
Gist 以外のところに置こうと考えてた時にちょうど github 買収で gitlab が流行っていたので gitlab に置いてます

今あるのはこれだけですが 作るのに大変すぎない程度のシンプルさにしてるので今後興味があるのを見つけたら増えていくかもしれません

つくるもの

Markdown エディタです
編集・表示・検索ができます

ありがちなものなのでサンプルコードもあって困る部分は少なめです
それでいて データの登録削除や検索や個別の URL など Framework で使う基本的な機能は色々触れられていると思います

仕様としてはこんな感じです

/

登録されてる全件を表示する一覧画面です
それぞれの個別画面へのリンクがあります

/search?q=***

q というクエリパラメータに渡した単語で検索した結果のみ表示する一覧画面です
文字列を入れる検索フォームもあって画面から検索可能です

/edit/:id

編集画面です
edit の次の 「:id」 のところに好きな文字列が入ります
その id にすでにデータがあれば編集画面で なければ新規作成画面になります
違いはすでにあるデータが入っているかどうかと 編集の場合は削除ボタンが表示されるところです
入力中にプレビュー可能です
更新処理はこの URL へ POST メソッドでリクエストします

/view/:id

表示画面です
view の次の 「:id」 のところに好きな文字列が入ります
登録済みならそのデータを表示します
編集画面へのリンクがあります
未登録なら登録されていないエラーを表示します

/delete/:id

削除処理を行います
delete の次の 「:id」 のところに好きな文字列が入ります
POST メソッドでリクエストするとその id のデータを削除します

/<other>

その他の URL にアクセスした場合は 404 のステータスコードとエラー画面を表示します

DB

登録するデータは

  • id
  • title
  • body
  • date

の 4 つだけです
id は開いたページの URL のもので title と body がフォームに入力するものです
date は自動でサーバ側の保存時の時刻を追加します

その他

シンプルにそれぞれの機能で作って見るのが目的なので 細かな例外的なエラー処理や POST 用にワンタイムトークン作るとかしてません

画面

画面も変に凝ったものでもなくシンプルなものです

一覧画面
wfc-im01


検索画面
wfc-im04


編集画面
wfc-im03


表示画面
wfc-im02