コーディングをするときに鼻血がでるほど便利なwebツールリスト

普段お世話になっているwebツール達の紹介です。

以下のサイトはすべて **無料** & **登録不要** です。

## 正規表現

### [regexper](https://regexper.com/)

[![スクリーンショット 2018-05-10 23.39.05.png](https://qiita-image-store.s3.amazonaws.com/0/152997/9ff91e69-c6b2-5e2b-7985-038ac2af3d51.png)](https://regexper.com/)

**<font color="DarkOrange">正規表現を可視化してくれます。</font>**

複雑な正規表現を書くときやコードリーディングのお供に重宝します。

### [Rubular](http://www.rubular.com/)

[![スクリーンショット 2018-05-10 23.49.38.png](https://qiita-image-store.s3.amazonaws.com/0/152997/bf719f69-7cbc-86ba-01c9-111060bf3bd0.png)](http://www.rubular.com/)

**<font color="DarkOrange">Rubyの正規表現をテストできます。</font>**

## JSON

### [JSON FORMATTER & VALIDATOR](https://jsonformatter.curiousconcept.com/)

JSON系のツールが集まったサイト。
それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。
(画像クリックでそれぞれのツールに飛べます。)

ひとつずつ紹介します。

[![screely-curiousconcept1.png](https://qiita-image-store.s3.amazonaws.com/0/152997/1f922598-6ca1-6aec-ec15-adfab16f2b25.png)](https://jsonformatter.curiousconcept.com/)

**<font color="DarkOrange">JSONをフォーマットしてくれます。</font>**

出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。

[![screely-curiousconcept2.png](https://qiita-image-store.s3.amazonaws.com/0/152997/8bf19aa6-b840-c9c0-1bfc-9cd9e111cba3.png)](https://dataconverter.curiousconcept.com/)

**<font color="DarkOrange">JSONを含めた様々なデータ形式を変換できます。</font>**

Inputの以下に対応。

- CSV
- INI
- JSON
- XML
- YAML

Outputは以下に対応。

- JSON
- PHP Code
- PHP Serialized
- XML
- YAML

[![screely-curiousconcept3.png](https://qiita-image-store.s3.amazonaws.com/0/152997/1b28a6cb-0a21-5d9f-65ba-0a2e9357caa5.png)](https://jsonpath.curiousconcept.com/)

**<font color="DarkOrange">[JsonPath](https://github.com/json-path/JsonPath)によるスクレイピングができます。</font>**

[![screely-curiousconcept4.png](https://qiita-image-store.s3.amazonaws.com/0/152997/17d6a1a0-03d4-5590-1c30-c5bbed2bcc82.png)](https://jsonselect.curiousconcept.com/)

**<font color="DarkOrange">[JSONSelect](https://github.com/lloyd/JSONSelect/blob/master/JSONSelect.md)によるスクレイピングができます。</font>**

## SQL

### [Instant SQL Formatter](http://www.dpriver.com/pp/sqlformat.htm)

[![スクリーンショット 2018-05-11 0.07.32.png](https://qiita-image-store.s3.amazonaws.com/0/152997/94f8ac0c-91ee-f54f-6cbf-11ac5f7b45e1.png)](http://www.dpriver.com/pp/sqlformat.htm)

**<font color="DarkOrange">SQLをフォーマットしてくれます。</font>**

細かく設定を変更できるのがナイスです。

## コード管理

### [gitignore.io](https://www.gitignore.io/)

[![screely-gitignoreio.png](https://qiita-image-store.s3.amazonaws.com/0/152997/5ddeae39-fe28-196e-e033-b51a8ffdebba.png)](https://www.gitignore.io/)

**<font color="DarkOrange">.gitignore 作成サービス。</font>**

プロジェクトのフレームワークなどをフォームに入力して[Create]をクリックするだけで適切な`.gitignore`ファイルが作成できます。

`macOS`や`Linux`など汎用的なものもあるので[これらは`.gitignore_global`としてHomeディレクトリに置いておくと良いでしょう。](https://qiita.com/pira/items/dd67077c5b414c8eb59d)


## 文字列解析

### [Paste A Date](http://pasteadate.com/)

[![screely-1529149962449.png](https://qiita-image-store.s3.amazonaws.com/0/152997/0506e4e7-01cc-ed27-d688-9c0a722bb766.png)](http://pasteadate.com/)

**<font color="DarkOrange">Timestampの文字列をパースしてくれます。</font>**

Railsなどのフレームワークを使っているとDBへのTimestampの保存はUTCに統一されていると思います。
そうすると、直接DBを見ているときに「これ日本時間で何時だっけ?」なることがあります。

そんなときはこのサイトに貼り付ければLocal Timeで何時か表示してくれます。

ただ、月の表記が英語なのが少々わかりにくい。
誰か、そのへんまでローカライズした表記にしてくれるサイト作ってくれませんかね?

## プログラミング言語

### [SyntaxDB](https://syntaxdb.com/)

[![スクリーンショット 2018-05-18 23.59.06.png](https://qiita-image-store.s3.amazonaws.com/0/152997/254a2595-8b46-4d07-6366-3ff0b4558b93.png)](https://syntaxdb.com/)

**<font color="DarkOrange">いろんな言語のシンタックスがサンプル付きでまとめられています。</font>**

この言語でこれってどう書くんだっけ?ってときに便利です。

対応言語は以下。

- Java
- C
- C++
- C#
- Python
- Ruby
- Swift
- Go

## デバッグ

### [もじばけらった](http://lab.kiki-verb.com/mojibakeratta/)

[![screely-もじばけらった.png](https://qiita-image-store.s3.amazonaws.com/0/152997/02dd29c8-ac15-dc03-20c1-1f5272a46fff.png)](http://lab.kiki-verb.com/mojibakeratta/)

**<font color="DarkOrange">文字化け解消ツール。</font>**

URLエンコードされた文字をUTF-8にするときなんかにサクッと使えます。
(実際の文字化けにはあんまり使えないかも・・・。)


## Web Frontend

### [SassMeister](https://www.sassmeister.com/)

[![スクリーンショット 2018-05-11 0.16.49.png](https://qiita-image-store.s3.amazonaws.com/0/152997/30877c05-f8ec-e46a-2add-3a4f54584bfb.png)](https://www.sassmeister.com/)

**<font color="DarkOrange">sassをコンパイルした結果を表示してくれます。</font>**

やたら複雑なfunctionやmixinを書くハメになったときに。

### [SVG Backgrounds](https://www.svgbackgrounds.com/#varying-stripes)

[![screely-1529149985985.png](https://qiita-image-store.s3.amazonaws.com/0/152997/53d1955c-7b0f-1cc8-17ef-d1376403c589.png)](https://www.svgbackgrounds.com/#varying-stripes)

**<font color="DarkOrange">バックグラウンドに使えるsvgのパターン画像が作れます。</font>**

色やバランス調整可能。
ライセンスは[Creative Commons 4.0](https://creativecommons.org/licenses/by/4.0/)

## プロトタイプ作成

### ~~myjson~~

[![スクリーンショット 2018-05-10 23.28.18.png](https://qiita-image-store.s3.amazonaws.com/0/152997/83ed5aae-0c93-5c49-a2d6-394de288421b.png)](http://myjson.com/)

**<font color="DarkOrange">json api 作成サービス。</font>**

フォームにjsonを入力して[Save]を押せば一瞬でapiが作成できます。

注意としては生成されたurlを忘れたら二度とアクセス出来ないこと、一度作成したapiは削除できないことです。
**個人情報やAWSのキーなど人に知られたらまずいものは絶対に入力しないようにしましょう。**

#### 2023/07/16 追記

サイトが無くなっていました。
どうやら自分でサーバーを建てないといけないようになったようです（同名なだけで別物かも）。

https://github.com/deve-sh/MyJSON/tree/master/Backend

### ~~placeholder.com~~

[![スクリーンショット 2018-05-10 23.32.07.png](https://qiita-image-store.s3.amazonaws.com/0/152997/a596d5fe-0004-5218-8803-2499e1833d71.png)](https://placeholder.com/)

**<font color="DarkOrange">プレースホルダー作成サービス。</font>**

好きな色・大きさ・テキストの画像がURL指定だけでお手軽に使えます。

例えば `http://via.placeholder.com/200x80/333333/66dd22?text=Hello+World` なら以下になります。
![placeholder](http://via.placeholder.com/200x80/333333/66dd22?text=Hello+World)

#### 2023/07/16 追記

サイトが無くなっていました。
既存の画像URLはそのまま使えるようですが…。

### [placehold.jp](https://placehold.jp/)

[![screely-1689494269366.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152997/156cafe7-1277-d43d-ea70-e0abbb1707d0.png)](https://placehold.jp/)


**<font color="DarkOrange">上記「placeholder.com」が無くなってしまったので代替サイト。</font>**

「placeholder.com」と同等のことができます。


### [Avataaars generator](https://getavataaars.com/)

[![スクリーンショット 2018-05-26 13.26.28.png](https://qiita-image-store.s3.amazonaws.com/0/152997/8cde8dcb-a664-bfda-9f05-4216ed7a9c72.png)](https://getavataaars.com/)

**<font color="DarkOrange">好みのアバター画像が作れます。</font>**

自分のアバター画像を作るときはもちろん、
ランダム生成ができるので、プロトタイプで大量のアバター画像が必要になったときも便利です。

作った画像はpng, svgでダウンロードできる他、React, imgタグの生成もできます。
imgタグにはURLが入っているのでそこだけ抜き出すことも可能。

```
https://avataaars.io/?avatarStyle=Circle&topType=ShortHairTheCaesar&accessoriesType=Sunglasses&hairColor=SilverGray&facialHairType=MoustacheFancy&facialHairColor=BrownDark&clotheType=CollarSweater&clotheColor=Gray01&eyeType=Default&eyebrowType=Default&mouthType=Smile&skinColor=Brown
```

のURLなら以下の画像になります。

![avataaars](https://avataaars.io/?avatarStyle=Circle&topType=ShortHairTheCaesar&accessoriesType=Sunglasses&hairColor=SilverGray&facialHairType=MoustacheFancy&facialHairColor=BrownDark&clotheType=CollarSweater&clotheColor=Gray01&eyeType=Default&eyebrowType=Default&mouthType=Smile&skinColor=Brown)

### [Sketchsheets](https://sketchsheets.com/)

[![screely-1529149945603.png](https://qiita-image-store.s3.amazonaws.com/0/152997/f6c6642b-11f9-5417-1320-9dc88ad11d2b.png)](https://sketchsheets.com/)

**<font color="DarkOrange">いろいろなデバイスのスケッチ用画像です。</font>**
印刷して使おう！

## Naming

### [Fantasy Name Generator](http://www.rinkworks.com/namegen/)

[![スクリーンショット 2018-05-10 23.18.18.png](https://qiita-image-store.s3.amazonaws.com/0/152997/4a23edee-6df9-3b41-9e90-f334c9c0e9c1.png)](http://www.rinkworks.com/namegen/)

**<font color="DarkOrange">ランダム名前生成サービス。</font>**

プロダクト名を考えるときに便利です。
使い方は少々慣れが必要です。

例えば「git関連のツールなので`gi`で始まって`t`で終わる名前がいいな」と思ったら`(gi)s(t)`と入力して[Generate Names]をクリックすると、上の画像のように条件に合う名前をランダム生成してくれます。

詳しい使い方は[ここ](http://www.rinkworks.com/namegen/reference.shtml)。

### [Weblio英語類語辞典](https://ejje.weblio.jp/english-thesaurus/)

[![スクリーンショット 2018-05-10 23.15.14.png](https://qiita-image-store.s3.amazonaws.com/0/152997/8ced68ed-2e1d-e1f3-3c4e-015df07e9566.png)](https://ejje.weblio.jp/english-thesaurus/)

**<font color="DarkOrange">英語類語辞典</font>**

メソッド名などの名前付けに困ったときに、とりあえず見てみるといい単語が見つかる時があります。

## ドキュメント作成

### [Tables Generator](http://www.tablesgenerator.com/)

[![スクリーンショット 2018-05-18 23.03.58.png](https://qiita-image-store.s3.amazonaws.com/0/152997/bfbb437d-1f89-f700-5c9f-211dfe860218.png)](http://www.tablesgenerator.com/)

**<font color="DarkOrange">テーブルを様々な形式に変換することができます。</font>**

インプットは以下に対応していて、

- csvファイルのアップロード
- 以下からコピーアンドペースト
  - spreadsheet (Microsoft ExcelやGoogle spreadsheetなど)
  - Markdown
  - website

アウトプットは以下に対応しています。

- LaTeX
- HTML
- Markdown
- MediaWiki 

(Asciidocにも対応してほしい！)

### [Text to ASCII Art Generator (TAAG)](http://www.patorjk.com/software/taag)

[![screely-1549619870352.png](https://qiita-image-store.s3.amazonaws.com/0/152997/4ef3b04a-2634-0f56-777f-8849d97996fb.png)](http://www.patorjk.com/software/taag)

コマンドラインツールやREADMEを書いているときに時々派手な表現をしたくなるときがあります。
そんなときはTAAGを使えば **<font color="DarkOrange">サクッとテキストをアスキーアートにしてくれます。</font>**

テキストを入力して、[Test All]をクリックすると300以上のパターンを生成してくれます。
(ライセンスが明記されてないっぽいので商用利用等には注意してください。)

## コミュニケーション

### [Carbon](https://carbon.now.sh)

[![screely-1540693447910.png](https://qiita-image-store.s3.amazonaws.com/0/152997/bebb34e4-63c3-c35f-fca5-bc8797d93305.png)](https://carbon.now.sh)

**<font color="DarkOrange">コードをおしゃれな画像にできます。</font>**

tweet機能があるので、twitterでコードを共有するのに便利です。

## 作業用BGM

### [rainy mood](http://www.rainymood.com/)

[![スクリーンショット 2018-05-24 22.46.59.png](https://qiita-image-store.s3.amazonaws.com/0/152997/f1bfd801-f181-2b08-43a3-316caa1372e9.png)](http://www.rainymood.com/)

作業用BGMはそれぞれ好みがあると思いますが、自分は雨の音が好きです。
雨の音にはピンクノイズが入っている気がする。

**<font color="DarkOrange">上記のサイトは開くと雨の音がループ再生される(だけの)サイトです。</font>**
シンプルで良い。

類似のサイトに以下もあるのでお好みでどうぞ。

- [Rainyscope](http://rainyscope.com/) 季節ごとの雨の音
- [jazz and rain](http://www.jazzandrain.com/) 雨の音とJazz
- [Noisli](https://www.noisli.com/) 様々な環境音を自分好みにMixできる
- [Hipstersound](https://hipstersound.com/ambience.html) カフェの音 右のメニューから雨の音も加えられます

---

## おまけ あまり使う機会はないけど

### [Unicode® character table](https://unicode-table.com/jp/)

[![スクリーンショット 2018-05-10 23.55.08.png](https://qiita-image-store.s3.amazonaws.com/0/152997/2d2061cf-930f-4bb1-6960-d54a09d42345.png)](https://unicode-table.com/jp/)

**<font color="DarkOrange">Unicode文字一覧</font>**

`✎`とか`இ`とか`⏏`とか`💘`とか使いたいときに。
眺めるだけでも楽しいです(個人的には)。

#### 2023/07/16 追記

サイトがリニューアルされていました。
現在は https://symbl.cc/jp/ というサイトにリダイレクトされます。
もし、もとのサイトが良ければ　https://symbl.cc/jp/ のフッターの「旧バージョン」のリンクをクリックしてください。 https://old.unicode-table.com/jp/ のURLでもとのサイトが使えます。