こんにちはこんばんは。イノウエです。

webアプリケーション開発との関連度が高そうなものたちを調べて、 超簡潔にざっくりまとめてみました。

（TypeScriptでの開発を見据えた調べものなので、偏りがある点ご了承ください。）

目次

  1. 開発言語
  2. フレームワーク
  3. ライブラリ
  4. ツール
  5. パッケージマネージャー
  6. その他
  7. まとめ


開発言語


フロントエンド

画面上の見た目の部分を担当する言語です。
ベースはHTML. CSS, JavaScriptの3つしかありません。


HTML

画面に表示する文書の構成を表すマークアップ言語。
この子がいないと画面に何も表示できない…はず。
<>で囲まれたタグによって文書の構成要素を作成する。


CSS

HTMLやXMLで作成した文書に対して、フォントや色、サイズを指定するなどデザインの部分を担当するスタイルシート言語。
HTMLでもデザインを指定するのは可能であるが、文書構造はHTML、デザインはCSSと分けるように推奨されている。
それは文書の構造とデザインを分けることで、HTMLが簡潔になって検索エンジンに情報を正しく解釈してもらいやすくなったり、メンテナンス性が向上したりなど多くのメリットがあるためである。


JavaScript

ユーザによって画面の表示内容が変わるような、動的なWebページを作成するのに使用するオブジェクト指向型のスクリプト言語。
ボタンを押したらポップアップが表示されたり、マウスオーバーで画像などが表示されたりなど、ちょっといけてるWebページが作れるのもこの子のおかげ。
ECMAScriptによってJavaScriptの基本となる仕様が定められている。
今まではクライアント側で使用されるのが主流だったが、近年はサーバーサイドでも利用され始めているのでこの点については後述。


TypeScript

avaScriptの上位互換的なプログラミング言語。
JavaScriptをより大規模開発向けにする目的でMicrosoftによって開発された。
TypeScriptがコンパイルされるとJavaScriptに変換されるため、JavaScriptが実行できる環境でなら利用可能。
JavaScriptよりも厳密な型指定を必要とするため安全性が高く、従来だとJavaScript実行時に気づいていたエラーが、TypeScriptからJavaScriptへのコンパイル時にエラーを発見できるようになっている。


バックエンド

画面に表示されない、裏側（サーバーサイド）でごにょごにょやってる言語たちです。
先ほどのフロントエンドの言語とは打って変わってたくさんの言語が存在します。

Java

なんだか名前がさっきのJavaScriptと似ていて紛らわしいが、パンとフライパンくらい異なる。
どうやらJavaScriptが元々LiveScriptという名前で、Javaの人気にあやかってJavaScriptと変更したようなので、この子は何も悪くない。
クラスベースのオブジェクト指向言語で、Java仮想マシン上で動作する。
そのためJava仮想マシンが入っていればOSやハードウェアに依存しない実行環境の自由度の高さがメリットである。
仮想マシン上で実行されるためセキュリティが高く、オブジェクト指向のため大規模開発に向いているという特徴もある。

Python

コンパイル不要なインタプリタ型の高水準プログラミング言語。
読みやすく書きやすい、簡潔な言語を謳っており、機械学習の分野で使用されることが多い。


PHP

こちらもコンパイル不要なインタプリタ言語で、主にWebページの開発に用いられる。
有名どころだとWordPressの開発言語がこの子。
HTMLに埋め込んで使うことができる。


Ruby

まつもとゆきひろさんによって開発された日本産のオブジェクト指向型スクリプト言語。
Webアプリケーション開発を得意とする言語で、シンプルで分かりやすいコードが特徴。
フレームワークのRuby on Railsの人気によってシェアが拡大した。


Go

Googleによって開発された、近年人気上昇中の言語。
“Golang"と表記されることも多い。
C言語を参考に開発されており、記述の簡潔さ、処理の速さ、メモリの安全性の高さなどが特徴として挙げられる。


Scala

オブジェクト指向言語と関数型言語の特徴を併せ持った言語。
言語開発にJavaの開発陣が携わっているため、その特徴を多く引き継いでおり互換性が高い。
Javaと比較して、よりシンプルで安全性が高いことが特徴。


Rust

CやC++の代替言語として開発された、比較的新しい言語。
Goと同様に近年人気が高い。
メモリの安全性の高さ、CやC++に匹敵する処理速度の速さが特徴で、マルチスレッドにより複数タスクを並行処理することも可能。
OSカーネルの開発などコアな部分からWebアプリケーション開発、APIサーバーの開発など幅広く利用されている。


フレームワーク

フレームワークとは効率的に開発を行うことを可能にする枠組み・テンプレートのようなものです。
各プログラミング言語に合わせて様々なフレームワークが存在します。


Angular

Googleとコミュニティによって開発されたTypeScriptのフレームワーク。
Vue.jsやReactと同様にSPA1の原則を採用しており、フロントエンド開発に必要な機能は一通り揃っている。


Vue.js

UI構築用のオープンソースのJavaScriptフレームワーク。
AngularJSを参考に開発された。
他のフレームワークと比較して構造がシンプルで学習コストが低く、拡張性が高い。


Nuxt

Vue.jsのフレームワーク。
Next.jsにインスパイアされたらしく、名前がそっくりなため要注意。 （Nuxt.jsと表記されることも多いため余計間違えやすい。）
Vue.jsのSPAに加え、SSR2やSSG3といった機能が盛り込まれている。


TailwindCSS

オープンソースのCSSフレームワーク。
HTMLのクラス名に直接スタイルを書くのが特徴で、クラス名を考える手間が省ける。
Bootstrapなどはコンポーネントが用意されているので効率的にページを作れる反面、独自性に欠けるといったデメリットがあるが、TailwindCSSではコンポーネントが用意されていないため、独自性の高いデザインが可能となる。


Jest

Meta（旧Facebook）によって開発されたJavaScript単体テスト用のフレームワーク。（TypeScriptでテストを書くことも可能）
並列処理を行うことでテストを高速に行う。
また豊富なAPIを利用することで、簡単にテストを記述することが可能となる。


Django

オープンソースのPythonでのWebアプリケーション開発用のフレームワーク。
読み方はジャンゴ。
機能が豊富にあり、セキュリティの高い開発が可能となる。
機能の高さ故、処理が遅めなのがデメリット。


Laravel

「Web職人のためのフレームワーク」と謳われている、オープンソースのPHPフレームワーク。
MVCアーキテクチャを採用している。
機能が豊富なため自由度が高く、小規模な開発向き。
Django同様、デフォルトの機能の多さから処理が重めといったデメリットがある。


Ruby on Rails

Rubyで書かれたオープンソースのWebアプリケーション開発用フレームワーク。
MVCアーキテクチャに基づいている。
他のフレームワークと比べて簡潔なコードで開発できることが特徴。


Next.js

ReactベースのWebアプリケーションフレームワーク。
SSR2とSSG3の機能を有している。


ライブラリ

特定の機能に特化したコードの集まり。
名前の通り、図書館の多くの本の中から必要なものを引っ張り出すように、コードを書く際にライブラリからコードを引用することで簡潔に機能を使用することが可能になります。
こちらもフレームワーク同様、言語によって様々なライブラリが存在します。


React

Meta（旧Facebook）とコミュニティによって開発された、UIに特化したJavaScriptライブラリ。
仮想DOMというレンダリング機能により、コードの変更部分のみレンダリングされるため高速描画が可能。


jQuery

JavaScriptを簡潔に書くことを目的としたJavaScriptライブラリ。
プラグインで拡張可能なこと、Ajax処理が簡単に書けることなどがメリットとして挙げられる。
近年ではjQueryからReactに移行してきているらしい。


ツール

開発を便利にするためのツールたちを少し紹介。


ESLint

JavaScriptの静的解析ツール。
作成したJavaScriptのソースコードに対し、規則に則って書かれているかをチェックしてエラーを検出してくれる。
この規則はカスタマイズ可能となっている。
プラグインを入れればTypeScriptの解析も可能。


Swagger

OpenAPIという仕様に基づいたRESTful API4を作成するためのツールの総称。
ツールは様々であり、Swagger Editor、Swagger UI、Swagger Codegenなどが存在する。


パッケージマネージャー


npm

Node.jsのパッケージ管理システム。
公式ツールなのでNode.jsを入れるときに一緒についてくる。
依存関係も含めてJavaScriptのパッケージを管理する。


yarn

Meta（旧Facebook）が開発したNode.jsのパッケージ管理システム。
npmよりも処理が早い、セキュリティが高いことを特徴とする。（前よりはnpmの処理速度が追いついてきたらしい。）
npmと互換性あり。


その他


Node.js

JavaScript実行環境。
多数のアクセスを捌けるアプリケーション構築を目的として設計されている。
従来はブラウザ上でJavaScriptを動かすのが一般的であったが、Node.jsによってバックエンドの部分もJavaScriptで扱えるようになるという、初心者には意味わからんすごいやつ。
色々面白そうなので、触ってみた後に別途ブログにまとめたいと思う。


Storybook

フロントエンド用の、UIコンポーネントを管理するツール。
コンポーネントごとに切り離して、それぞれ単独で開発・テスト・再利用が可能になる。 React、Vue.js、Angularなどに対応。


まとめ

Webアプリケーション開発で使われているものたちを、若干TypeScriptでの開発寄りで簡単にまとめてみました。

今回調べるにあたって色んなサイトを拝見したのですが、言語・フレームワーク・ライブラリの境目が曖昧で混乱することが結構多かったのが少し大変でした。

「今習得すべきプログラミング言語5選！1つ目はReact！」
（公式サイトにはJavaScriptライブラリって書いてあったけど言語なのか…？）

のような感じでサイトを行ったり来たり…。
結局、極力公式サイトの情報をもとに分類してみたのですがどうでしょうか。

何はともあれ自分の中でワードが整理できたので満足です。






こちらのブログは初心者エンジニアが勉強の記録やアウトプットの一環として執筆しております。
内容に誤りがある可能性が多大にありますのでご了承ください。

  1. SPA (Single Page Application)：1つのWebページで構成され、ページ遷移を行わずにコンテンツの切り替えを行う。 最初のページ読み込みには時間がかかるが、1度読み込んでしまえばページ全体の再読み込みが不要なため、高速な描画が可能となる。 ↩︎

  2. SSR (Server Side Rendaring)：従来クライアント側のブラウザでレンダリングしていた(MPA)のに対し、サーバー側でレンダリングを行う機能のこと。ブラウザ側の負担が減るため、ユーザ体験が向上するのが特徴。 ↩︎ ↩︎

  3. SSG (Static Site Generation)：ビルド済みの静的サイトを生成する機能。ユーザは事前にビルドされたページを表示させるだけなので、表示速度がはやいことが特徴。ビルド済みのため動的なコンテンツには向いていないことがデメリットである。 ↩︎ ↩︎

  4. RESTful API：REST(Representational State Transfer)という設計原則に従ったWeb API。 これまでRESTful APIの人気が高かったが、近年ではGraphQL APIの人気が高まっている。
    (GraphQL API：RESTful APIの問題点を解決するためにMeta(旧Facebook)によって開発されたAPI。 最小限のHTTPリクエストで複数ページへのアクセス、必要なデータのみの取得、クエリを損なうリスクの低いAPI更新が可能となる。) ↩︎