[Webアプリ] 大文字 / 小文字変換ツールを作りました
アルファベットを大文字や小文字にワンクリックで変換できるWebアプリを作りました 🚀
大文字 / 小文字変換ツール「Case Converter」について
ツールの利用はこちらから。Webアプリなのでダウンロードなしですぐに利用できます。
GitHubでソースコードも公開しています。
変換の例
| オプション | 変換後 |
|---|---|
| UPPER | THIS IS AN EXAMPLE |
| lower | this is an example |
| Capitalize | This Is An Example |
アプリ作成にあたって
アルファベットを大文字や小文字に変換したいとき、Mac標準のスティッキーズというアプリを利用していましたが、スティッキーズにペースト => テキストを選択 => 編集 => 変換 => 大文字/小文字にする という流れがやや手間に感じることがあるため簡素化するためにWebアプリとして作成しました。
1. ミニマル・ミニマムに
自分が何か変換をしたいとき大抵は短い単語であることが多いことと、Notionにも埋め込んでウィジェットとして利用できることを想定してあまりスペースを取らない大きさにしました。
2. シンプルなデザイン
上述の通りNotionでの埋め込みを想定していたので、モノクロでシンプルな見た目にしました。
3. 広告なし
これもNotionでの埋め込みのことがあったため、当初から広告はなしと決めていました。
技術スタック
開発時の基本セットとして利用しているもの
- React
- TypeScript
- Vite: ビルドツール
- ESLint: lintツール
- Prettier: コードのフォーマット
- normalize.css: スタイルのリセット
今回のWebアプリ用に利用したもの
- copy-to-clipboard: 変換したテキストをクリップボードにコピーする
- iconic: ツールチップのアイコン
実装
大文字 / 小文字への変換
JavaScriptのメソッドで実行できます。
const str: string = "sample";
str.toUpperCase(); // => SAMPLE
const str: string = "SAMPLE";
str.toLowerCase(); // => sample
先頭の文字だけ大文字にする変換
3つの処理をそれぞれ以下のメソッドを使用して実行します。
- テキストを単語区切りに配列に変換
split()
const str = "sample text";
const arr = str.split(" "); // => ['sample', 'text']
- それぞれの1文字目を大文字に変換
charAt(index)slice(index)
const str = "sample";
const firstLetter = str.charAt(0).toUpperCase(); // => S
const rest = str.slice(1) // => ample
- 文章の形に戻す
join()
const arr = ["Sample", "Text"];
const converted = arr.join(" "); // => "Sample Text"
Clipboard API
クリップボードへのコピーに Clipboard API を使用したかったのですが、Clipboard APIを使用する場合必ず最初にユーザーがアクセス許可を与えることが必要です。
Notionで埋め込んで利用する場合、全てiframeとして扱われます。このことがアクセス許可の部分でネックとなりクリップボードへのコピーの実装はパッケージを使用することにしました。
最後に
最後までお読みいただきありがとうございました 🙌
フィードバックやバグのご報告などはGitHubかTwitterアカウントまでお願いいたします 🙏
Discussion