Help us understand the problem. What is going on with this article?

いい感じにUnixtimeに変換するSPAを速攻で作った

More than 1 year has passed since last update.

この記事は@HibikineCode 1人Advent Calendar2日目の記事です。


みなさん、UnixtimeってGoogleで調べたことありますか。

image.png

一番上に出てくるツール、ぼくもよく使っています。

image.png

ところがこれ、SPAじゃないんですね。Enterキーを押さないといけません。フロントエンドエンジニアのみなさんは入力したら結果が出てほしいですよね?(脅迫

というわけでSPA化します。

仕様

  • 変換したい時間を入力し、入力終了後1秒後にサーバーに送信する。
  • 送信された文字列をPHPのstrtotimeに投げて結果を返す。
  • 結果をに表示する。

作った

https://hibikine.me/unixtime/

スタック

  • React
  • Material-ui
  • TypeScript
  • Parcel
  • PHP

コード

GitHub

動かすまで30分、体裁整えるのに数時間ってとこ。

サーバーサイドはPHPのstrtotime()に投げてるだけです。

雑感

思ったことをつらつらと。

Parcelはこういう開発にめっちゃ向いてる

Parcel使うとtsファイルインポートするだけで勝手にyarn add --dev typescriptがバックグラウンドで走るので、何も環境構築しなくてもコードが書けます。超便利です。
import React from 'react'って書くとyarn add reactが走ります。TypeScriptの型定義ファイルだけは自動で入れてくれないので、それだけ手動でyarn add --dev @types/reactします。

最初見るとめっちゃ感動します。同僚も「Parcelは知ってたけどここまでとは思わなかった」ってビビってました。

こういう小規模でパパっと作るときにはめちゃくちゃ便利です。自分のやり方に合わせるよりParcel式に合わせた方が良いです。

やっぱDocker便利

とりあえずこういう時にdocker-compose.ymlをパパっと書けば速攻で開発用PHPサーバー立てられるのはDockerの強みですね。まあphp -S localhost:8000でも別にいいですが。

まとめ

ParcelとTypeScriptは絶対流行らせろ

Hibikine_Kage
TypeScriptばっかり書いてます。
http://hibikine.me
autoscale
Twitter アカウント管理サービス「SocailDog」を開発・運営するスタートアップ
https://autoscale.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした