はじめに
調べようと思った理由
- 最近ReactやNext.js、vue.jsなどのフレームワークやライブラリとやらをたくさん聞くけどそれぞれどんなものでどんな特徴があるのかよくわからなくなって頭パンクしそうだったの自分レベルでわかる記事を書こうと思いました！
※フロントはほぼHTML、CSSしかわからないレベル
前提
- 本当になにもなにもわからない未経験者のひとりとして書きます。
- IT業界未経験の方向けです。
JavaScripてなに？
- Webサイトやシステムの開発に使われているプログラミング言語のこと。
- 初めは主にブラウザ上で動作するために作られましたが、今ではサーバーサイドやモバイルアプリケーションなどさまざまなプラットフォームで使用されています。
フレームワーク、ライブラリ、ランタイムについて
1. フレームワーク
- 手順書みたいなもので、システム開発が楽になるように用意されて、プログラムの雛形的なものです。
- あらかじめによく利用される機能をパーツとして備えています。
2. ライブラリ
- お道具箱があるとして、折り紙で切り絵をするためにハサミを使うみたいな、好きな道具だけ使う。みたいなイメージです。
- 自分で使うかどうか必要に応じて呼び出して利用できるものです。
3. ランタイム
- プログラムが実行される環境を提供するもので、言語仕様に基づいてプログラムを実行します。
- JavaScriptランタイムは、JavaScriptコードが実行されるための環境を提供します。例えば、ブラウザ上のJavaScriptエンジン（V8エンジンなど）やNode.jsがJavaScriptランタイムの例です。
- プログラムが動くためのお部屋みたいなものです。
主な一覧
1. フレームワーク
フロントエンド
| 名前 | 特徴と用途 |
|---|---|
| Vue.js | シンプルで柔軟な構造を持ち、小規模なから大規模なプロジェクトまで対応可能。レゴブロックを組み立てるようにプログラムできる。変更がリアルタイムに反映される。主にWebアプリケーションを開発するためのもの！ |
| Next.js | Reactベースのサーバーサイドレンダリングや静的サイト生成をサポートするフレームワーク。Next.jsはReact.jsを使ってウェブアプリケーションを構築するための拡張として機能という感じ！ |
| Nuxt.js | Vue.jsベースのウェブアプリケーションを構築するためのフレームワークで、サーバーサイドレンダリングもサポートしている。Nuxt.jsはVue.jsの拡張として機能という感じ！ |
| Angular | Googleが開発したクライアントサイドフレームワークで、大規模なアプリケーションの構築やデータバインディングをサポートします。データバインディング、依存性注入、ルーティング、フォーム処理など、多くの機能が組み込まれています。TypeScriptを公式にサポートしており、静的型付けやエディタの補完機能など、開発者に対して型安全性を提供しています。Angularは他のフレームワークとは異なるアーキテクチャと哲学を持っており、大規模で複雑なアプリケーションの開発に向いています。 |
| Svelte | コンパイル時にコンポーネントを生成することで、ランタイムフレームワークが不要なUIフレームワーク。ウェブページを作るためのツールで、他のフレームワークとは違うアプローチを使っています。通常のフレームワークでは、ウェブページが動くためには大きなコードやランタイムが必要ですが、Svelteはコンパイルと呼ばれる特別な手法を使って、ウェブページが必要なコードだけを生成します。これにより、最終的なウェブページが非常に軽くて速くなります。 |
| Jest | Facebookが開発したJavaScriptの「テストフレームワーク」で、シンプルで効果的なテストが可能です。コードが期待通りに動作しているかを確認するために利用されます。 |
| Mocha | JavaScriptおよびNode.jsアプリケーションのテストを行うための柔軟で拡張可能な「テストフレームワーク」です。開発者がユニットテストや統合テストを書いてアプリケーションの正確性を確認するのに利用されます。 |
- サーバーサイド
| 名前 | 特徴と用途 |
|---|---|
| Express.js | Node.js用の軽量で柔軟なウェブアプリケーションフレームワークで、ウェブサーバーを簡単に構築できるようにします。ルーティングやミドルウェアの使用など、開発者に様々な機能を提供し、効率的なサーバーサイド開発が可能です。Node.jsと組み合わせて利用する必要あり！ |
| Meteor | JavaScriptベースのフルスタックアプリケーションフレームワークで、クライアントとサーバーで同じコードを共有し、リアルタイムなアプリケーションを構築できます。基本はウェブアプリケーション。プラグインや拡張でウェブ、モバイル、デスクトップに展開加藤！ |
| Electron | Web技術（HTML、CSS、JavaScript）を使用してデスクトップアプリケーションを構築するためのフレームワーク。Node.jsを一緒に使う！主にデスクトップアプリケーション開発がメイン。 |
※ Express.js、Electronは使い方によっては、サーバー、フロント両方で使えるらしい...！
2. ライブラリ（フロントエンド）
| 名前 | 特徴と用途 |
|---|---|
| React.js | フェイスブックが開発したUIライブラリで、コンポーネントベースの単一ページアプリケーション（SPA）を構築するために使用されます。ウェブページやウェブアプリケーションを作るためのツールで、コンポーネントと呼ばれるパーツを組み合わせてページを作ります。これにより、簡単で再利用可能なコードを書いて、きれいで使いやすいウェブページを作ることができます。主なプラットフォームは、ウェブブラウザ上で動くもので、主にインターネットを通じてユーザーがアクセスします。React Nativeという別のツールもあり、これを使うとモバイルアプリケーション（スマートフォンアプリ）も作ることができます。ですので、React.jsはウェブとモバイルの開発に利用されています。 |
| jQuery | DOMをより簡単に操作できるようにするJavaScriptのライブラリで、ウェブ開発者がコードを書く際に手間を減らし、効率的に作業できるようにします。例えば、「特定のボタンがクリックされたら、その部分のテキストを変える」といった操作をjQueryを使うことで簡単に実現できます。主なプラットフォームは、jQueryは主にウェブブラウザ上で動作します。つまり、ユーザーがウェブページにアクセスしているときに、そのページ内でjQueryが役立つことがあります。 |
| Three.js | 使いやすいAPIを提供し、WebGLを利用してウェブページ上でリッチな3Dコンテンツを構築するためのJavaScriptライブラリ。 |
| RxJS | 非同期およびイベント駆動プログラミングのためのライブラリで、Observable（何かが起きたときにそれを監視し、必要な処理をする仕組み）パターンを提供。プログラミングをするときに、たくさんのイベントが起きる場合、それらの出来事をうまく管理するためのヘルパーみたいなもの。例えば、ボタンをクリックしたときやデータを取得したとき、それに対してどんな処理をするかをきれいに書く手助けをしてくれるもの。 |
| D3.js | 柔軟で強力なデータ可視化ツールであり、ウェブページ上で美しいグラフやチャートを作成するためのJavaScriptライブラリ。 |
| Chart.js | シンプルで使いやすいチャートやグラフを描画するためのJavaScriptライブラリ。軽量かつ直感的なAPIを提供し、ウェブページ上で簡単に美しいグラフを作成するためのJavaScriptライブラリ。 |
| Lodash | 便利な関数群を提供し、JavaScriptのコーディングを簡略化するための高性能なユーティリティライブラリ。JavaScriptを使ってコンピュータープログラムを書くときに、いろんな便利なツールが入っているお助けボックスのようなもの。例えば、数字を計算するとか、リストの中から特定のデータを見つけるとか、いろんな作業を手軽にやりやすくしてくれる。 |
| Socket.io | WebSocketをサポートし、ウェブページとサーバー間でリアルタイムなデータの送受信を可能にするJavaScriptライブラリ。 |
| Redux | Reactアプリケーションのデータの流れを管理し、一貫性のある状態管理を提供するJavaScriptライブラリ。 |
※ DOM（Document Object Model）は、ウェブページやウェブアプリケーションの構造を表現するためのもので、HTMLやXML文書をプログラムで操作するためのインターフェースです。簡単に言うと、ウェブページの部品や要素をコンピュータが理解しやすい形に変換したものです。
3. ランタイム（サーバーもフロントもできる）
| 名前 | 特徴と用途 |
|---|---|
| Node.js | コンピューターでJavaScriptというプログラミング言語を動かすための特別な場所みたいなもの。通常、JavaScriptはウェブブラウザで動くけれども、Node.jsを使うとサーバーの役割もできるようになります。例えば、ウェブページを作るだけでなく、データを保存したり、処理をすることも可能。 |
最後に
- 色々調べて書いてみましたが、間違っている箇所などあればご指摘いただけると幸いです。
- またいまいちまだ理解できてない用語たくさんあるのでもっとわかりやすく都度アップデートしようと思います！