⛓️

【知らないと損する】開発の生産性を上げてくれる画期的なWebサービス 13選

2022/11/07に公開約8,900字

はじめに

今回の記事では、普段のプログラマーの開発の生産性を向上させてくれる画期的なWebサービスを12個紹介する。個人の独断と偏見で紹介しているので、今回の記事で紹介しているものはあくまで一例にすぎない。

知っているだけで開発の生産性を急激に高めてくれるWebサービスは存在する。今回の記事を通して1つでも気になるWebサービスを見つけることができれば非常に幸いである。

CSSGradient

CSSで作れるグラデーションをまとめたサイト。1,000以上の種類から自分の好みのグラデーションを選べる。

Fontjoy

自分が制作するWebサイトに最適な組み合わせのフォントを選ぶ上で役立つ。主にデザイナー向けに作られたWebサイト。ポートフォリオサイトに使うフォントを選ぶ際に参考になるだろう。

Readme.so

Markdownとテンプレートを活用して、自分が開発したプロジェクトのREADMEを簡単かつ高速で作成できるWebサービス。

README作るの面倒だな」と思っているプログラマーに最もオススメできるサービス。

Unminify

HTML、CSS、JavaScript、XMLやJSONのコードを整理してくれる無料のWebサービス。コピペするだけで簡単にコードを整理してくれる。

例えば、以下のプログラム(.jsonファイルや.jsファイル)をこのツールを使ってコードを整理すると以下のようになる。

使い方

▼コードを整理する前

sample_credit_card.json
// NOTE: ダミーデータで確認
[{"issuer":"MasterCard","cardNumber":"5129538783200656","exp":"12\/24","cvv":163,"name":"Tyrese Sporer Jr.","address":"24263 Darion Villages Apt. 247\nSouth Myles, WY 66237-2580","country":"Gambia","zipcode":"01730"},{"issuer":"MasterCard","cardNumber":"5545693374354358","exp":"02\/24","cvv":320,"name":"Peyton Gerlach","address":"24125 Rodolfo Springs Suite 216\nJaquelineshire, ID 66049-1821","country":"French Southern Territories","zipcode":"95345-4223"},{"issuer":"MasterCard","cardNumber":"5362769405973117","exp":"08\/25","cvv":164,"name":"Ara Prohaska","address":"462 Beatty Walks Suite 456\nPort Dereckchester, WV 77133","country":"Djibouti","zipcode":"86475-2219"},{"issuer":"MasterCard","cardNumber":"2572042089668624","exp":"03\/25","cvv":394,"name":"Hayley DuBuque","address":"6719 Rohan Passage\nSouth Mackburgh, MN 56154-7239","country":"Micronesia","zipcode":"74295-1192"},{"issuer":"MasterCard","cardNumber":"2391003827653442","exp":"04\/23","cvv":315,"name":"Obie Rippin DVM","address":"311 Rowan Hollow Apt. 389\nMustafaton, ID 13530-4325","country":"Antarctica (the territory South of 60 deg S)","zipcode":"06969-8571"}]

▼コードを整理したあと

sample_credit_card.json
// NOTE: ダミーデータで確認
[
    { "issuer": "MasterCard", "cardNumber": "5129538783200656", "exp": "12/24", "cvv": 163, "name": "Tyrese Sporer Jr.", "address": "24263 Darion Villages Apt. 247\nSouth Myles, WY 66237-2580", "country": "Gambia", "zipcode": "01730" },
    {
        "issuer": "MasterCard",
        "cardNumber": "5545693374354358",
        "exp": "02/24",
        "cvv": 320,
        "name": "Peyton Gerlach",
        "address": "24125 Rodolfo Springs Suite 216\nJaquelineshire, ID 66049-1821",
        "country": "French Southern Territories",
        "zipcode": "95345-4223"
    },
    { "issuer": "MasterCard", "cardNumber": "5362769405973117", "exp": "08/25", "cvv": 164, "name": "Ara Prohaska", "address": "462 Beatty Walks Suite 456\nPort Dereckchester, WV 77133", "country": "Djibouti", "zipcode": "86475-2219" },
    { "issuer": "MasterCard", "cardNumber": "2572042089668624", "exp": "03/25", "cvv": 394, "name": "Hayley DuBuque", "address": "6719 Rohan Passage\nSouth Mackburgh, MN 56154-7239", "country": "Micronesia", "zipcode": "74295-1192" },
    {
        "issuer": "MasterCard",
        "cardNumber": "2391003827653442",
        "exp": "04/23",
        "cvv": 315,
        "name": "Obie Rippin DVM",
        "address": "311 Rowan Hollow Apt. 389\nMustafaton, ID 13530-4325",
        "country": "Antarctica (the territory South of 60 deg S)",
        "zipcode": "06969-8571"
    }
]

▼JavaScriptでも同様に整理できる

sample.js
// 整理する前
var File = function(url, object){
	File.list = Array.isArray(File.list)? File.list : [];
	File.progress = File.progress || 0;
	this.progress = 0;
	this.object = object;
	this.url = url;
};

File.indexOf = function(term){
	for(var index in File.list){
		var file = File.list[index];
		if (file.equals(term) || file.url === term || file.object === term) {
			return index;
		}
	}
	return -1;
};

File.find = function(term){
	var index = File.indexOf(term);
	return ~index && File.list[index];
};

File.prototype.equals = function(file){
	var isFileType = file instanceof File;
	return isFileType && this.url === file.url && this.object === file.object;
};

File.prototype.save = function(update){
	update = typeof update === 'undefined'? true : update; 
	if(Array.isArray(File.list)){
		var index = File.indexOf(this);
		if(~index && update) {
			File.list[index] = this; 
			console.warn('File `%s` has been loaded before and updated now for: %O.', this.url, this);
		}else File.list.push(this);
		console.log(File.list)
	}else{
		File.list = [this];
	}
	return this;
};
sample.js
// 整理した後
var File = function (url, object) {
    File.list = Array.isArray(File.list) ? File.list : [];
    File.progress = File.progress || 0;
    this.progress = 0;
    this.object = object;
    this.url = url;
};

File.indexOf = function (term) {
    for (var index in File.list) {
        var file = File.list[index];
        if (file.equals(term) || file.url === term || file.object === term) {
            return index;
        }
    }
    return -1;
};

File.find = function (term) {
    var index = File.indexOf(term);
    return ~index && File.list[index];
};

File.prototype.equals = function (file) {
    var isFileType = file instanceof File;
    return isFileType && this.url === file.url && this.object === file.object;
};

File.prototype.save = function (update) {
    update = typeof update === "undefined" ? true : update;
    if (Array.isArray(File.list)) {
        var index = File.indexOf(this);
        if (~index && update) {
            File.list[index] = this;
            console.warn("File `%s` has been loaded before and updated now for: %O.", this.url, this);
        } else File.list.push(this);
        console.log(File.list);
    } else {
        File.list = [this];
    }
    return this;
};

favicon.io

これを使ってテキスト、画像や絵文字からfavicon(ファビコン、ブラウザのタブなどに表示されるWebサイトのアイコン)を生成できる。

remove.bg

5秒以内にワンクリックでアップロードした画像の背景を切り取ってくれるWebサービス。画像編集には欠かせないWebサービス。

Logo Ipsum

アプリケーションやWebサイトなどに使われるロゴを生成できる画期的なWebサービス。Webデザインで役立つ。基本的に.svg形式で保存される。

Poet.so

TwitterのツイートのURLをコピペするだけで簡単に以下のような画像を生成できるWebサービス。(私のアカウントで試した例)

職務経歴書にTwitterのツイートを使ったり、ツイートをおしゃれにしたりするときには非常にオススメできる。

PFPmaker

画像からポートフォリオ用に最適化したアイコンや画像を生成できるWebサービス。

Apption.co

サードパーティ製のWidgetをNotionに組み込めるWebサービス。使うには会員登録が必要だ。Notionを学習・開発でフル活用しているプログラマーは全員確認して損はないだろう。

Carbon

自分のソースコードを画像で保存できるWebサービス。コードの幅、フォントの種類・大きさ、背景色等を自由にカスタマイズできる。Twitterと連携して画像をツイートできる。

会員登録しなくても使えるものの、会員登録すれば自分が作ったソースコードの画像を保存できる。下の画像は実際にCarbonで生成したプログラムのサンプルコード。(言語はDart言語)

storytale

世界中のプロのクリエイターが作成した画像をダウンロードして使える。Webデザイナー向けのサービス。高品質の画像を探しているときには参考になるだろう。

storyset

storytale同様に、ポートフォリオサイトやLPなどで使える高品質な画像を提供しているサイト。会員登録不要で使える。

色と背景の画像を自由自在にカスタマイズでき、.png.svg両方の形式のダウンロードに対応している。

smallDev.tools

開発者向けに提供されている無料で使えるツールをまとめたWebサービス。会員登録不要ですぐに使える。

主に本サイトに登録されているサービスは以下の通り。

  • サンプルコードの共有
  • JSON、Base64やXMLなどの暗号化・復号化
  • HTML、CSS、JavaScript、SQLのコードの自動整理
  • テストデータ、クレジットカード(ダミーデータ)の自動生成
  • Markdownのエディタ
  • QRCodeの生成
  • ダミーテキストの生成

参考サイト

https://suprabhasupi.hashnode.dev/11-productive-websites-for-web-developers

https://suprabhasupi.hashnode.dev/7-productive-website-for-web-developers

https://javascript.plainenglish.io/10-killer-web-apps-that-will-increase-your-productivity-881e77766379

GitHubで編集を提案

Discussion

ログインするとコメントできます