Webサイト制作のための「開発ツール」

「開発(development)ツール」とは、「Webサイト」の実体を形作る開発段階で使用されるツールである。

ここでは、「フレームワーク」、「ライブラリ」等の曖昧さを残す用語の使用はせずに、「ツール」で統一する。

基本の開発ツール
開発全般の効率化ツール
フロンドエンドの開発ツール
バックエンドの開発ツール
Webアプリケーション開発技術の応用
- デスクトップアプリケーション(Mac、Windows、Linux)の開発
- モバイルアプリケーション(Android、iOS)の開発

1. 基本の開発ツール

テキストエディター(ソースコードエディター、IDE)

参考：Text editor - Wikipedia

参考：Source-code editor - Wikipedia

参考：Integrated development environment - Wikipedia

参考：どんなテキストエディタが利用可能ですか？ - ウェブ開発を学ぶ | MDN

参考：State of JS 2020: Other Tools#text_editors

特徴	テキストエディター	公式サイト
使用率が高いIDE*	Visual Studio Code(IDE)	Visual Studio Code - Code Editing. Redefined
歴史が長く、拡張性が高い（参考：Vim (text editor) - Wikipedia）	Vim	welcome home : vim online
JavaScript IDE	WebStorm(IDE)	WebStorm: JetBrainsによる最もスマートなJavaScript IDE
洗練されたデザイン	Sublime text	Sublime Text - Text Editing, Done Right
Windowsのみ	Notepad++	Notepad++
PHP IDE	PhpStorm(IDE)	PhpStorm：JetBrainsによる超高速でスマートなPHP IDE
GitHubが開発	Atom	Atom
Java IDE	IntelliJ IDEA(IDE)	IntelliJ IDEA: The Capable & Ergonomic Java IDE by JetBrains
歴史が長く、拡張性が高い（参考：Emacs (text editor) - Wikipedia）	Emacs	GNU Emacs - GNU Project
Webブラウザーで利用できるIDE	AWS Cloud9(ブラウザーIDE)	AWS Cloud9（Cloud IDE でコードを記述、実行、デバッグ）\| AWS
その他のテキストエディター

Webブラウザー

→クライアント・サーバーモデルのソフトウェア#Webブラウザー

CLI(Command Line Interface)

参考：Command-line interface - Wikipedia

CLI(Command Line Interface)	参考サイト
Unixシェル(Unix)	Unix shell - Wikipedia
ターミナル(macOS)	Terminal (macOS) - Wikipedia
コマンドプロンプト(Windows)	Cmd.exe - Wikipedia
PowerShell(Windows)	PowerShell - Wikipedia
その他のCLI

2. 開発全般の効率化ツール

コーディング・プログラミングの効率化

用途	効率化ツール	公式サイト
ソースコードの整形	Prettier	Prettier · Opinionated Code Formatter
JavaScriptの構文チェック	ESLint	ESLint - Pluggable JavaScript linter
HTML、CSSなどの構文チェック	stylelint	Home \| Stylelint
その他の効率化ツール

ソースコードのバージョン管理(コントロール)

参考：Version control - Wikipedia

分散型バージョン管理システム	公式サイト
Git	Git
その他のバージョン管理システム

ホスティングサービス	公式サイト
GitHub	GitHub \| GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside millions of other developers.
その他のホスティングサービス

開発ツールのパッケージ管理(マネジメント)

参考：Package manager - Wikipedia

開発ツールのパッケージ管理(マネジメント)		公式サイト
Node.jsのパッケージマネージャー	npm	npm
Node.jsのパッケージマネージャー	Yarn	Home \| Yarn - Package Manager
PHPのパッケージマネージャー	Composer	Composer
Rubyのパッケージマネージャー	RubyGems	RubyGems.org \| コミュニティのGemホスティングサービス
.NETのパッケージマネージャー	NuGet	NuGet Gallery \| Home
Pythonのパッケージマネージャー	pip	pip documentation v22.0.4
Rustのパッケージマネージャー	Cargo	Introduction - The Cargo Book
その他のパッケージマネージャー

テスティング

参考：Software testing - Wikipedia

テスティングツール		公式サイト
「JavaScript」のテスティングツール	Jest	Jest · 🃏 Delightful JavaScript Testing
	Storybook	Storybook: UI component explorer for frontend developers
	Cypress	JavaScript End to End Testing Framework \| cypress.io testing tools
	Testing Library	Testing Library \| Testing Library
	Puppeteer	Puppeteer v13.6.0
	Playwright	Fast and reliable end-to-end testing for modern web apps \| Playwright
	Mocha	Mocha - the fun, simple, flexible JavaScript test framework
	Jasmine	Jasmine Documentation
「Ruby」のテスティングツール	RSpec	RSpec: Behaviour Driven Development for Ruby
「PHP」のテスティングツール	Pest	Pest - An elegant PHP Testing Framework
「Python」のテスティングツール	unittest	unittest — Unit testing framework — Python 3.10.4 documentation
「Python」のテスティングツール	pytest	pytest: helps you write better programs — pytest documentation
「Java」のテスティングツール	JUnit	JUnit 5
その他のテスティングツール

3. フロンドエンドの開発ツール

参考：Frontend and backend - Wikipedia

参考：Front-end web development - Wikipedia

CSSの効率化

参考：CSS - Wikipedia

参考：CSS-in-JS - Wikipedia

CSSの効率化ツール	公式サイト
Sass(CSS拡張言語)	Sass: Syntactically Awesome Style Sheets
PostCSS(CSS変換ツール)	PostCSS - a tool for transforming CSS with JavaScript
その他のCSSの効率化ツール

Webブラウザー間におけるCSSの差異を調整するスタイルシート	公式サイト
Normalize.css	Normalize.css: Make browsers render all elements more consistently.
sanitize.css	sanitize.css
HTML5 Reset Stylesheet	HTML5 Reset Stylesheet \| HTML5 Doctor
その他のスタイルシート

CSSの効率化ツール	公式サイト
Tailwind CSS	Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Pure.css	Pure
MaterializeCSS	Documentation - Materialize
Bootstrap	Bootstrap · The most popular HTML, CSS, and JS library in the world.
Primer	Primer Design System
Bulma	Bulma: Free, open source, and modern CSS framework based on Flexbox
その他のCSSの効率化ツール

CSSの効率化ツール	公式サイト
Material UI(ReactのためのCSS)	MUI: The React component library you always wanted
Chakra UI(ReactのためのCSS)	Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications. - Chakra UI
Reactstrap(ReactのためのBootstrap)	Home/Installation - Page・Reactstrap
その他のCSSの効率化ツール

CSSの効率化ツール	公式サイト
Styled Components(CSS-in-JS)	styled-components
CSS Modules(CSS-in-JS)	GitHub - css-modules/css-modules: Documentation about css-modules
Emotion(CSS-in-JS)	Emotion - Introduction
Styled System(CSS-in-JS)	Styled System
Styled JSX(CSS-in-JS)	GitHub - vercel/styled-jsx: Full CSS support for JSX without compromises
Stitches(CSS-in-JS)	Stitches — CSS-in-JS with near-zero runtime
Linaria(CSS-in-JS)	Linaria – zero-runtime CSS in JS library
Fela(CSS-in-JS)	Fela
Theme UI(CSS-in-JS)	Theme UI
その他のCSS効率化ツール

JavaScript(クライアントサイド)の効率化

参考：JavaScript - Wikipedia

参考：List of JavaScript libraries - Wikipedia

参考：Comparison of JavaScript-based web frameworks - Wikipedia

参考：TypeScript - Wikipedia

JavaScript(クライアントサイド)の効率化ツール	公式サイト
React	React – A JavaScript library for building user interfaces
Vue.js	Vue.js
Angular	Angular
Svelte	Svelte • Cybernetically enhanced web apps
Preact	Preact
その他のJavaScript効率化ツール

JavaScriptの効率化(JavaScriptを生成する言語)	公式サイト	KnotText内での参考ページ
TypeScript	TypeScript: JavaScript With Syntax For Types.	Level 2：コンピューター言語 > クライアントサイドのコンピューター言語 > TypeScript
その他のJavaScriptを生成する言語

用途	JavaScript(クライアントサイド)の効率化ツール	公式サイト
Web API	Axios	Axios
関数群	Lodash	Lodash
	Underscore.js	Underscore.js
	Ramda	Ramda Documentation
日付・時刻	date-fns	date-fns - modern JavaScript date utility library
	Day.js	Day.js · 2kB JavaScript date utility library
	Luxon	luxon - Immutable date wrapper
非同期処理	RxJS	RxJS
データビジュアライゼーション	D3.js	D3.js - Data-Driven Documents
3DCG	Three.js	Three.js – JavaScript 3D Library
3DCG	Babylon.js	Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
チャート	Chart.js	Chart.js \| Open source HTML5 Charts for your website
チャート	C3.js	C3.js \| D3-based reusable chart library
アニメーション	anime.js	anime.js • JavaScript animation engine
Processingの移植版	p5.js	home \| p5.js
VR・AR	A-Frame	A-Frame – Make WebVR
双方向通信	Socket.IO	Socket.IO
その他のJavaScript効率化ツール

ビルドツール

用途	ビルドツール	公式サイト
タスクランナー・ファイルの変換	Webpack	webpack
ファイルの変換	Rollup	rollup.js
	Parcel	Parcel
	esbuild	esbuild - An extremely fast JavaScript bundler
	Snowpack	Snowpack
	Babel	Babel · The compiler for next generation JavaScript
タスクランナー	gulp.js	gulp.js
その他のビルドツール

状態管理

フロントエンドの状態管理ツール	公式サイト
GraphQL	GraphQL \| A query language for your API
Apollo Client	Apollo GraphQL \| Supergraph: unify APIs, microservices, & databases in a composable graph
Redux	Redux - A predictable state container for JavaScript apps. \| Redux
Vuex	What is Vuex? \| Vuex
XState	XState - JavaScript State Machines and Statecharts
Recoil	Recoil
NgRx	NgRx Docs
React Query	React Query - Hooks for fetching, caching and updating asynchronous data in React
RxJS	RxJS
その他の状態管理ツール

4. バックエンドの開発ツール

参考：Frontend and backend - Wikipedia

Node.js(サーバーサイドでのJavaScript)で開発

参考：Node.js - Wikipedia

参考：Comparison of server-side web frameworks - Wikipedia#JavaScript

Node.js(サーバーサイドでのJavaScript)で開発	公式サイト
Express	Express - Node.js web application framework
Next.js(React)	Next.js by Vercel - The React Framework
Nuxt(Vue.js)	Nuxt - The Intuitive Vue Framework
Gatsby(React)	The Fastest Frontend Framework for Headless CMS's \| Gatsby
Vuepress(Vue.js)	VuePress
Gridsome(Vue.js)	Modern Site Generator for Vue.js - Gridsome
Hexo	Hexo
Docusaurus	Build optimized websites quickly, focus on your content \| Docusaurus
その他の開発ツール

Node.js(サーバーサイドでのJavaScript)で開発	公式サイト
Fastify	Fastify, Fast and low overhead web framework, for Node.js
Strapi	Strapi - Open source Node.js Headless CMS
NestJS	NestJS - A progressive Node.js framework
その他の開発ツール

Node.js(サーバーサイドでのJavaScript)で開発	公式サイト
Pug(テンプレートエンジン)	Getting Started – Pug
ejs(テンプレートエンジン)	EJS -- Embedded JavaScript templates
その他のテンプレートエンジン

PHPで開発

参考：PHP - Wikipedia

参考：Comparison of server-side web frameworks - Wikipedia#PHP

PHPで開発	公式サイト
CakePHP	CakePHP - Build fast, grow solid \| PHP Framework \| Home
Laravel	Laravel - The PHP Framework For Web Artisans
CodeIgniter	Welcome to CodeIgniter
Symfony	Symfony, High Performance PHP Framework for Web Development
FuelPHP	FuelPHP » A simple, flexible, community driven PHP5.3 framework.
その他の開発ツール

参考：CMS（Content management system - Wikipedia）

PHPで開発	公式サイト
WordPress(CMS)	Blog Tool, Publishing Platform, and CMS \| WordPress.org
Drupal(CMS)	Drupal - Open Source CMS \| Drupal.org
その他のCMS

PHPで開発	公式サイト
Twig(テンプレートエンジン)	Home - Twig - The flexible, fast, and secure PHP template engine
Smarty(テンプレートエンジン)	PHP Template Engine \| Smarty
Laravel Blade(テンプレートエンジン)	Blade Templates - Laravel - The PHP Framework For Web Artisans
その他のテンプレートエンジン

Pythonで開発

参考：Python - Wikipedia

参考：Comparison of server-side web frameworks - Wikipedia#Python

Pythonで開発	公式サイト
Django	The web framework for perfectionists with deadlines \| Django
Flask	Welcome to Flask — Flask Documentation (2.0.x)
FastAPI	FastAPI
Tornado	Tornado Web Server — Tornado 6.1 documentation
Django REST Framework	Home - Django REST framework
aiohttp	Welcome to AIOHTTP — aiohttp 3.8.1 documentation
Jinja(テンプレートエンジン)	Jinja — Jinja Documentation (3.0.x)
その他の開発ツール

Javaで開発

参考：Java - Wikipedia

参考：Comparison of server-side web frameworks - Wikipedia#Java

Javaで開発	公式サイト
Spring Framework	Spring Framework
Jakarta EE	Jakarta® EE \| Cloud Native Enterprise Java \| Java EE \| the Eclipse Foundation \| The Eclipse Foundation
Play Framework(Scalaも使用可能)	Play Framework - Build Modern & Scalable Web Apps with Java and Scala
Jakarta Server Faces(JSF)	Jakarta Faces \| The Eclipse Foundation
Apache Struts	Welcome to the Apache Struts project
Jakarta Server Pages(JSP)(テンプレートエンジン)	Jakarta Server Pages \| projects.eclipse.org
その他の開発ツール

Microsoftの言語で開発

参考：ASP.NET - Wikipedia

参考：Comparison of server-side web frameworks - Wikipedia#ASP.NET

Microsoftの言語で開発	公式サイト
ASP.NET(.NET, C#, F#, Visual Basicを使用可能)	ASP.NET \| オープンソースの .NET 向け Web フレームワーク
その他の開発ツール

Rubyで開発

参考：Ruby (programming_language) - Wikipedia

参考：Comparison of server-side web frameworks - Wikipedia#Ruby

Rubyで開発	公式サイト
Ruby on Rails	Ruby on Rails — A web-app framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.
cuba microframework	Cuba \| Microframework for web development
HANABI	Hanami \| The web, with simplicity
Jekyll(SSG)	Jekyll • Simple, blog-aware, static sites \| Transform your plain text into static websites and blogs
Haml(テンプレートエンジン)	Haml
その他の開発ツール

Goで開発

参考：Go (programming language) - Wikipedia

Goで開発	公式サイト
echo	Echo - High performance, minimalist Go web framework
gin	Gin Web Framework
Hugo(SSG)	The world’s fastest framework for building websites \| Hugo
その他の開発ツール

Rustで開発

参考：Rust (programming_language) - Wikipedia

Rustで開発	公式サイト
Rocket	Rocket - Simple, Fast, Type-Safe Web Framework for Rust
Actix	Actix Web \| A powerful, pragmatic, and extremely fast web framework for Rust.
Gotham	Gotham web framework
Tera(テンプレートエンジン)	Tera
その他の開発ツール

Kotlinで開発

参考：Kotlin (programming_language) - Wikipedia

Kotlinで開発	公式サイト
Ktor	Ktor: Build Asynchronous Servers and Clients in Kotlin \| Ktor Framework
その他の開発ツール

5. Webアプリケーション開発技術の応用

参考：Web application - Wikipedia

デスクトップアプリケーション(Mac、Windows、Linux)の開発

参考：Application software - Wikipedia

デスクトップアプリケーション開発ツール	公式サイト
Electron	Electron \| Build cross-platform desktop apps with JavaScript, HTML, and CSS.
その他の開発ツール

モバイルアプリケーション(Android、iOS)の開発

参考：Mobile app development - Wikipedia

参考：Mobile app - Wikipedia

モバイルアプリケーション開発ツール	公式サイト
React Native	React Native · Learn once, write anywhere
Expo	Expo
Flutter	Flutter - Build apps for any screen
Capacitor	Capacitor - build cross platform apps with the web
Ionic	Cross-Platform Mobile App Development: Ionic Framework
Apache Cordova	Apache Cordova
その他の開発ツール