**Rubyはプログラミング言語の1つであり、ソースコードがシンプルでわかりやすいのが特徴です。**またRubyを利用してできることも多く、SNSの作成・スクレイピング・Webアプリの作成・スマホアプリの作成などができます。ここでは、Ruby入門として、Rubyの概要や Ruby on Railsについて詳しく紹介します。

**Rubyはまつもとゆきひろ氏によって開発された、オブジェクト指向型のスクリプト言語です。**1995年に公開されてから、インターネットの普及とともにプログラマーに親しまれているプログラミング言語の1つです。

*Rubyはオープンソースソフトウェアであるため、誰でも無償で利用することができます。またコピー・改良、再配布などが自由に行うことが可能です。*そのためRubyは、日々開発者によってより良いプログラミング言語になるように改良されています。近年は、クラウドサービスやスマートフォン向けのアプリケーション、ソーシャルゲームの開発など幅広く使用されています。

Rubyのプログラミング言語とともに、*「Ruby on Rails」*という用語を耳にする方も多いでしょう。**Ruby on Railsとは、Rubyのプログラミング言語を使用してWebアプリを開発するためのフレームワークです。**フレームワークとは「骨組み」「骨格」と日本語では訳されます。Ruby on Railsは、Webアプリを開発するための骨組みを提供してくれます。つまり骨組みがあるため、Webアプリを開発するにあたって、はじめからある程度の開発に必要な機能が備わっていると言えます。

例えば、Webサイトにログイン情報を登録するために、個人情報を入力して完了ボタンを押すと、画面に「登録が終わりました」などと出力されることがあります。このように、Webサイトのページを違うページに遷移させたり、記載したデータを記録・更新したりなど、遷移・更新を行うことができる動的な仕組みがフレームワークです。*Ruby on Railsのフレームワークを使用することで、開発効率の向上や運用コストの削減が期待できるでしょう。*

Rubyとは何か？Rubyの特徴やできることについて解説

**Rubyは国産のプログラミング言語であるため、日本語ドキュメントが豊富で、プログラミング初心者にとって学習しやすい言語の1つです。**ここでは、Rubyの特徴について詳しく紹介します。

**Rubyはコンパイルが不要で、そのまま実行できるスクリプト言語に分類されます。**コンパイルとは、人間が理解しやすい形式で記述されたソースコードを、コンピュータが理解できる形式に翻訳することです。スクリプト言語の場合、プログラムを実行すると同時に1行ずつソースコードを翻訳していきます。コンパイルが必要ないため、動作確認が素早く可能です。*そのため、スクリプト言語は、コンパイルが必要な言語と比較しても習得難易度が低い言語と言えます。*

**オブジェクト指向型言語とは、簡単に説明すると、プログラムのデータや処理を「オブジェクト」として扱うプログラミング言語のことです。**オブジェクトという単位ごとに独立して扱えるため、プログラムの影響する範囲を明確にすることができます。*オブジェクト指向型言語を使用することで、プログラムの修正・更新がしやすくなり、エラー・バグが発生したときには不具合が特定しやすくなります。*

**RubyGemsとは、Rubyで使用できるライブラリを作成して公開したり、インストール作業を補助したりするシステムのことです。**ライブラリとは、Rubyでプログラミングを行う際に汎用性が高い機能をまとめたものを指します。RubyGemsにはさまざまなライブラリがあるため、開発効率の向上が期待できるでしょう。

また、プログラミング初心者向けのライブラリも豊富にあるのも特徴です。*プログラミングのハードルを下げてくれるRubyGemsのようなシステムを使用できる点もRubyの魅力と言えるでしょう。*

Rubyでできることとは？入門者必見！作れるもの・サービスまとめ

ここでは、Rubyのプログラミング言語を使用する際に、覚えておきたい基本事項について詳しく紹介します。

**Rubyプログラムはテキストファイルとして記述するのが一般的です。**そのため、ソースコードを記述したり、作成したプログラムを閲覧したりするにはテキストエディタが必要です。例えば、OSとしてWindowsを使用している場合であれば、「メモ帳」「サクラエディタ」などがあればプログラムを記述することができます。ここからは具体例を見ていきましょう。

まずはテキストエディタを起動します。ここでは、下記をソースコードとして記述します。

「print」は引数に与えた文字列を標準出力として出力させるメソッドを指します。1行ですが、これだけでもRubyのプログラムは作成することが可能です。作成したプログラムはファイルとして保存します。*Rubyのプログラムでは、ソースコードファイルの拡張子を「.rb」とすることになっています。*ここでは「ruby-example1.rb」というファイル名で保存してみましょう。

ここでは、作成したRubyプログラムの実行方法について紹介します。OSがWindowsの場合、コマンドプロンプトを起動し、ソースコードファイルが配置されているディレクトリ（フォルダ）に移動します。**Rubyプログラムを実行する場合、コマンドプロンプト上に「ruby ソースファイル名」を入力します。**具体例を見ていきましょう。

先ほど作成した「ruby-example1.rb」を実行してみます。実行方法にしたがって、コマンドプロンプト上で「ruby ruby-example1.rb」を入力することで、プログラムを実行することが可能です。

*実際に実行するとソースコードファイルに記述されたプログラムが処理され、標準出力としてコマンドプロンプト上に「Hello World!」が出力されます。プログラムが複雑になったとしても、実行手順は一般的に同様に行われます。*

ソースコードに記述したデータは順次実行されていくため、同様のプログラム記述方法ではソースコードの中にメモを残すことはできません。メモを記述した場合、コンピュータはプログラムを処理できず、エラーが発生してしまします。*しかし、ソースコードファイルにコメントを残しておくことは、第3者がレビューを行うときなどに、プログラムの内容が理解しやすく便利です。*

**Rubyでは、コメントを記述する際には「#」を使用します。**この書式を利用することで、ソースコードの中にコメントを記述することが可能です。コメントはプログラムの中に記述しますが、実行されないようになっています。*ソースコードの中で「#」が記述されていた場合、「#」から行末までが全てコメントとなります。*ここからは具体例を見ていきましょう。

````#` 作成日 YYYY.MM.DD
print("Hello World!")   # 画面に「Hello World!」を出力します```

上記のソースコードでは、2つのコメントが記述されています。行頭に「#」がある場合には、行全体がコメントとなります。他の処理を記述した後に「#」がある場合には「#」から行末までがコメントとなります。プログラムの実行時にはコメント部分は処理されません。そのため「print("Hello")」の処理のみ実行されことになります。

ここで複数行をコメントにしたいと思う方もいるかもしれません。「#」を使用した場合、「#」から行末までがコメントとなりますので、複数行をコメントにすることができません。**そのため、複数行をコメントにしたい場合には「=begin」「=end」を使用します。**

```
=begin
複数行を
コメントに
することができます
=end
```

**この方法は「埋め込みドキュメント」と呼ばれ、ソースコードの中にドキュメントを記述する場合に利用されるのが一般的です。**「=begin」から「=end」までに記述された行については、プログラム実行時には処理されないため、コメントの代用として使用することができます。「=begin」と「=end」は行頭に記述する必要があるため、注意が必要です。

## Rubyの基礎を押さえて実務に役立てよう！

これまでに、RubyとRuby on Railsの概要やRubyの特徴、基本事項について解説しました。**Rubyとは、まつもとゆきひろ氏によって開発されたオブジェクト指向型のスクリプト言語のことです。**また、Ruby on Railsとは、Rubyのプログラミング言語を使用してWebアプリを開発するためのフレームワークを指します。*Ruby on Railsを使用することで、開発効率の向上や運用コストの削減が期待できます。*

*Rubyはスクリプト言語であるため、コンパイルが不要な点が特徴の1つです。またオブジェクト指向型言語でもあるため、プログラムの修正や更新がしやすいというメリットがあります。プログラムの記述方法や実行方法はシンプルなのも魅力です。*Rubyを使用してできることは数多くあるため、興味をもった方は学習してみてはいかがでしょうか。

Rubyの資格取得方法やメリットを、エンジニア初心者向けに解説！

Rubyとは、まつもとゆきひろ氏によって開発されたオブジェクト指向型のスクリプト言語を指します。Rubyは文法がシンプルで、習得しやすいのが特徴です。当記事では入門編として、RubyとRuby on Railsの概要やRubyの特徴、基本事項について解説します。

Rubyはまつもとゆきひろ氏によって開発された、文法がシンプルなプログラミング言語

Ruby on Railsとは、Rubyのプログラミング言語を使用してWebアプリを開発するためのフレームワーク

Rubyの特徴は「スクリプト言語」「オブジェクト指向型言語」「RubyGemsの使用可能」

Ruby入門！特徴や基本事項、Ruby on Railsを解説！

*Python関連記事はこちらから↓*

Pythonの記事（1ページ目）

## Webアプリ開発にPythonが向いている理由

PythonはWebアプリ開発に向いているとされています。実際、**Python案件でもっとも多いのはWebアプリ開発です。**なぜPythonがWebアプリ開発に向いているのか、理由をまとめました。

Pythonでできること・できないことは？活躍している分野を解説

<center>[“Python”案件も続々！<br/>
*『マイナビエージェント』*の公開求人をチェック](https://mynavi-agent.jp/jobsearch//?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv09)</center>

Pythonは開発効率を上げやすく、短い納期でも対応しやすいのが特徴です。Pythonはコード量が短いため、記述時間やデバッグにかかる時間を減らすことができます。また、**Pythonは誰が書いても同じようなコードになりやすい**、というのも大きなポイントです。

Pythonはコードの制約が厳しく、インデントなどを正しい形式に整える必要があります。そのため、他人のコードが読みやすいのはメリットです。他人のコードが読みやすいと、プログラムの改良が効率よく行えます。Webアプリはユーザーの意見を聞いて頻繁に改良を加えるケースが多いため、コードが読みやすいPythonがWebアプリ開発に向いているのです。

Pythonは豊富なライブラリがあるのも特長の1つです。数学ライブラリや機械学習ライブラリなど、公式のライブラリもたくさんありますし、**有志の方が開発したライブラリもあります。**ライブラリを活用することで、開発コストを減らすことが可能です。

### 優良なフレームワークが多い

*Pythonには優良なフレームワークが多く、開発作業を更に効率化することが可能です。*Webアプリには、ログイン機能や会員登録など、必要な機能がいくつかあります。これらの機能を1から作成するのは非効率と言えるでしょう。フレームワークには、こういったWebアプリの基本機能が予め備わっているため、フレームワークを活用することで、開発量を減らすことができます。

Pythonを初めて学ぶ場合、以下の3通りの方法があります。

プログラミングスクールで学ぶ大きなメリットは、プロに直接指導してもらえるという点です。スクールによってサービス内容は異なりますが、分からないところを時間をかけて教えてもらえるため、着実にステップアップできます。

また、独学よりもモチベーションの維持がしやすいことも特長です。*一方、10万円を超える学習費用が発生することが多いため、スクール選びは後悔のないよう慎重に行う必要があります。*

*Pythonの学習書籍は5000円以下で購入できるため、スクールで学習するよりも費用を抑えられます。*また、自分のペースで勉強を進められるという点もメリットです。

「Python 1年生 体験してわかる！会話でまなべる！プログラミングのしくみ」(https://www.shoeisha.co.jp/book/detail/9784798153193)

「たのしいプログラミング Pythonではじめよう!」(https://shop.ohmsha.co.jp/shopdetail/000000001977/)

「入門 Python 3 第2版(https://www.oreilly.co.jp/books/9784873119328/)

【参考】:[Python 1年生 体験してわかる！会話でまなべる！プログラミングのしくみ](https://www.shoeisha.co.jp/book/detail/9784798153193)
【参考】:[たのしいプログラミング Pythonではじめよう!](https://shop.ohmsha.co.jp/shopdetail/000000001977/)
【参考】:[入門 Python 3 第2版](https://www.oreilly.co.jp/books/9784873119328/)

*Pythonはプログラミングの学習サイトでも学ぶことができます。*無料で学べるサイトが多く、ゲーム感覚でPythonを身につけることも可能です。

Python学習サイトとして、超初心者には「Progate」、他言語に触れた事がある人には「ドットインストール」がおすすめです。

【参考】:[progate](https://prog-8.com/courses/python)
【参考】:[ドットインストール](https://dotinstall.com/lessons/basic_python_v4)

【入門編】Pythonの基本構文まとめ！学習方法や年収も解説

## PythonでWebアプリ開発をする際に使われるフレームワーク

Pythonには具体的にどんなフレームワークがあるのか、ご紹介します。今回紹介するフレームワークは、現場で使われているものばかりです。Pythonエンジニアになるなら、これらのフレームワークのうちいずれかを習得することをおすすめします。

Djangoはもっとも知名度があるPythonフレームワークです。2005年に開発され、現在も活躍中です。**Web開発に必要な機能が一通り揃っているのが特徴です。**Djangoは大規模開発に向いていると言われています。

Djangoは機能が豊富な分、覚えることが多く、初心者にはややハードルが高いかもしれません。しかし、Djangoには初心者向けのチュートリアルも用意されているため、こちらを活用すれば効率的に学習が可能です。

Djangoとは何か？できることや習得するメリットを解説

Flaskは2010年にリリースされたフレームワークで、Djangoと並んで多く使われています。FlaskはDjangoとは対照的に、必要最低限の機能のみを備えています。そのため、 Flaskは非常に軽量であるのがメリットです。また、*覚えることが少ないため、初心者にも向いているでしょう。**Djangoは大規模な開発向き、Flaskは小規模な開発向きです。

Bottleは「bottle.py」というファイルのみで構成された、*非常に軽いフレームワークです。*Pythonの標準ライブラリのみを利用して作られています。初心者でも理解しやすく、ソースコードも読みやすいので、練習用としては最適でしょう。ただ、練習で使われることはあっても、実務で使われることは少ないので、Bottleを勉強した後にDjangoやFlaskも習得するのがおすすめです。

Tornadoは高速であることが特徴のフレームワークです。処理速度が求められるWebアプリの開発に向いているでしょう。また、Tornadoは**マルチタスクが可能な珍しいフレームワークです。**ただし、Tornadoは日本語で解説された情報が少なく、勉強に苦労するかもしれません。Tornadoは上級者向きのフレームワークと言えるでしょう。

Tensorflowは、 Googleが開発した機械学習モデルの開発やトレーニングに役立つフレームワークです。**ニューラルネットワークの構築を行ったり、さまざまな処理を計算グラフで表したりといった特徴があります。**また、通信トラブルやデバイスの故障などのリスクがある分散学習を、「Fault Tolerance」という機能を搭載したことによって安全な環境で行うことができます。

FastAPIは、Python 3.6以降で追加された[型ヒント](https://docs.python.org/ja/3/glossary.html#term-type-hint)に基づくAPI構築するためのフレームワークです。NodeJSやGoに匹敵する非常に高いパフォーマンスを発揮しており、開発スピードの向上にも貢献しています。近年では**Pythonを用いた機械学習でも採用**されており、*ドキュメントも日本語に対応している*ことから、いま注目のフレームワークです。

## Pythonで実際に開発されたWebアプリ

続いて、Pythonで実際に開発されたWebアプリをみていきましょう。Pythonは人気言語であり、みなさんが普段使っている人気サイトの中にもPythonで作られたものは多くあります。実際に開発されたWebアプリを知ることで、Pythonがどのようなことに活用できるかも見えてくるでしょう。

**動画配信プラットフォームのYoutubeはPythonによって作られました。**主に、サーバーサイドの処理に使われています。Youtubeの運営会社は、検索エンジンで有名なGoogleです。GoogleはPythonの採用に、比較的積極的なようです。C++・Java・Pythonは「Google三大言語」と呼ばれています。

Dropboxとは、オンラインストレージサービスのことです。*クラウド上に画像や音楽などのデータを保存することができます。*Dropboxは世界中で使われているサービスです。Dropboxの開発にもPythonが使われています。

写真共有サイトのInstagramの開発もPythonで行われています。また、フレームワークはDjangoを使用しているようです。もともとInstagramは、Pythonは使われていませんでしたが、**ユーザー数が増えてきたため、開発コストを下げられるPythonが導入されました。**このことからも、Pythonの優秀さが伺えます。

Spotifyは世界的に有名な音楽ストリーミングサービスです。Spotifyでは、楽曲のデータ解析などにPythonが使われています。**Pythonには数値計算ライブラリが多く、データ解析にも向いているのです。**

Redditはアメリカの電子掲示板です。Webのニュース記事などを集めており、情報収集用としても活用されています。アクティブユーザー数が非常に多く、アメリカでは有名なサイトです。Redditは元々Lispによって作られていましたが、*2005年にPythonで作り直されました。*

Evernoteはクラウド上にノートを作成できるサービスです。書いた記事などを保存できるほか、他のユーザーと共有することもできます。また、*EvernoteはAPIを一般公開しているのも特徴です。*Evernoteを使ったアプリを自由に開発することが可能です。Pythonを学ぶ際は、EvernoteのAPIも活用してみると良いでしょう。

## Python以外にWebアプリ開発で必要な言語

Pythonで開発された具体的なサービスを紹介してきました。しかし、Webアプリは基本的にPythonだけでは開発できません。Webアプリの開発には、Python以外の言語も使う必要があります。そこで、*Python以外にWebアプリ開発で必要な言語*をまとめました。Pythonエンジニアを目指すなら、これらの言語の習得を並行して行うと良いでしょう。

HTMLやCSSはWebサイトのデザインを整えるのに使います。*文字の大きさや色、配置などを調整するには、これらの言語がなくてはいけません。*エンジニア経験者なら、HTML・CSSの習得は難しくないでしょう。Webアプリ開発に携わるなら、習得しておきたいです。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

JavaScriptはWebアプリにおけるフロントエンド開発で用いられる言語です。JavaScriptによって、*アラートを出したり、ユーザーの入力内容に従って処理を行ったりできます。*JavaScriptは、サーバーサイドエンジニアであれば、使う機会は少ないです。ただ、習得するとフロントエンドの開発にも携われるため、応募できる求人案件の幅が広がります。

JavaScriptとは？その特徴やメリット・デメリットを解説！

SQLはデータベースを操作するための言語です。Webアプリではデータベースは頻繁に使われます。ユーザーの個人情報やECサイトで販売する商品のデータを操作する際は、データベースが欠かせないため、SQLも覚えておく必要があるでしょう。

SQLもエンジニア経験者なら、そこまで習得に時間はかからないと思われます。ただ、他の言語とは文法が全く異なるため、個別に勉強する必要があります。

SQLの入門編：初心者から経験者まで役立つSQL情報を掲載！

## Pythonのフレームワークを覚えてWebアプリ開発を始めよう

本記事では、PythonでのWebアプリ開発について解説しました。Pythonのフレームワークや、具体的なWebアプリ事例がお分かりいただけたかと思います。**PythonはWebアプリ開発に向いている言語です。**今後もPythonでのWebアプリ開発の需要は下がらないと推測されます。

Webアプリ開発に興味がある方は、ぜひPythonとPythonのフレームワークを習得してみてください。また、HTMLやJavaScriptなども合わせて習得すると、応募できる求人案件の幅が広がります。

どのような案件があるのかは、『マイナビエージェント』の[公開求人](https://mynavi-agent.jp/jobsearch//?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv09)からも確認することができます。また、**『[マイナビITエージェント](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv09)』では”非公開求人”も多く取り扱っております**ので、転職を検討されている方はぜひ一度ご相談ください。

<center>[エンジニア転職のご相談は<br/>
ぜひ*『マイナビITエージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv09)</center>

Pythonと機械学習を学んでAI時代に対応できるエンジニアに

本記事ではPythonでのWebアプリ開発について解説します。PythonでWebアプリをどのように開発するのか、ご存知ない方も多いと思います。本記事では、Webアプリ開発を行う上で必要なフレームワークや、Pythonで開発された具体的なサービス、Python以外にWebアプリ開発で必要な言語などを解説していきます。

Pythonは優秀なフレームワークが多く、Webアプリ開発に向いている

PythonのフレームワークはDjango、Flaskなどが有名

Pythonで開発されたWebアプリにはYouTube、Dropboxなどがある

PythonでのWebアプリ開発で使うフレームワークを解説！

Next.jsとReactは、いずれもJavaScript言語を用いたWeb開発で用いられる技術であり、両者にはそれぞれ、共通点や違いなどの特徴があります。

ここでは、*Next.jsとReactの特徴や役割、利用目的などについて紹介します。*いずれもWebサイトの構築、Webアプリケーション開発では欠かせない技術ですので、Webエンジニア、プログラマーの皆さんはぜひ参考にしてください。

【参考】：[Next.js on Vercel  ｜ Vercel](https://vercel.com/solutions/nextjs)
【参考】：[React – ユーザインターフェース構築のための JavaScript ライブラリ](https://ja.legacy.reactjs.org/)
【参考】：[JavaScript ガイド - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide)

JavaScriptの主要ライブラリ3選！学習方法についても解説

Next.jsはReactをベースに米国のVercel社が開発した、オープンソースのフロントエンドフレームワークです。2016年に初めてリリースされた比較的新しいフレームワークであり、日々進化を続けています。

Next.jsはReactによるUI構築に加えて、ルーティング機能や画像最適化機能、サーバサイドレンダリング（SSR）機能、静的サイトジェネレーション（SSG）機能などが提供されており、*Webアプリケーションの開発を強力に支援してくれます。*

Next.jsと混同されやすいフレームワークにNuxt.jsがありますが、Nuxt.jsはVue.jsをベースにしたフレームワークです。

【参考】：[Nuxt: The Intuitive Vue Framework · Nuxt](https://nuxt.com/)
【参考】：[Vue.js - The Progressive JavaScript Framework | Vue.js](https://ja.vuejs.org/)

Next.jsはWebアプリケーションの開発を強力に支援してくれます。**「ハイブリッドレンダリング」や「自動コード分割」、「画像最適化」、「ルーティング」などを特徴としています。**それぞれの特徴について見ていきましょう。

【参考】：[Next.js on Vercel  ｜ Vercel](https://vercel.com/solutions/nextjs)

*■ ハイブリッドレンダリング機能*
Next.jsでは、クライアントサイドレンダリングとサーバサイドレンダリングをそれぞれ柔軟に選択することができます。クライアントサイドレンダリングは、ブラウザ側でJavaScriptを実行してページを生成する方式で、動的なコンテンツやインタラクティブな操作に向いています。

サーバサイドレンダリングとは、サーバ側でHTMLを生成してブラウザに送る方式で、SEOやパフォーマンスに向いています。Next.jsでは、レンダリング方式をページごとに切り替えられるため、最適なユーザ体験の実現ができます。

*■ 自動コード分割*
Next.jsでは、ページごとに必要なコードだけを読み込むように、自動的にページを分割する機能があります。これによって、初期表示の速度が向上するため、ユーザは画面がサクサクと動くのを実感できます。

また、Next.jsでは、動的インポート機能により、コンポーネントやライブラリを一気に読み込むのではなく、必要なタイミングで読み込みが行われるため、初期表示が速くなります。

*■ 画像の最適化*
Next.jsでは、Imageコンポーネント機能によって画像の最適化を行うことができます。Imageコンポーネント機能とは、画像のサイズやフォーマット、品質などを自動的に調整して、最適な画像を表示する機能です。また、Next.jsは画像の遅延読み込みやプレースホルダーの表示などもサポートしています。

*■ ルーティング機能*
Next.jsには、ファイルシステムベースのルーティング機能があります。これは、Pagesフォルダ内に作成されたファイルに対して、自動的にURLが生成される機能です。例えば、Pages内にabout.jsという名のファイルを作成すると、"/about"というURLが生成されます。

またこの機能では、動的ルーティングやネストされたルーティングなどもサポートされています。

*■ ルーティングその他の機能*
Next.jsでは、CSSやSass、Lessなどのプリプロセッサや、styled-componentsやemotionなどのCSS-in-JSライブラリを簡単に導入できます。これらのツールを使うことで、コンポーネントごとにスタイルを適用したり、変数やネストなどの機能を使ったりできます。

 Reactは、FacebookのエンジニアであるJordan Walkeが開発したJavaScriptのライブラリです。*ReactはUIを構築するためのJavaScriptライブラリであり、フレームワークではありません。*ReactはUIの見た目や操作性を提供するだけの機能であり、ルーティングやデータの取得などの機能は含まれていません。

そのため、Webアプリの開発では、React以外に他のライブラリやツールを組み合わせて環境構築を行う必要があります。また、Reactはクライアント側でしか動作しないため、バックエンド側には他の技術を組み合わせる必要があります。

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

Reactには、**「宣言的なVIEW」や「仮想DOM」、「コンポーネントベース」、「JSX」、「SPA作成がしやすい」といった特徴があります。**それぞれの特徴について見ていきましょう。

【参考】：[Windows での React |Microsoft Learn](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/react-overview)

*■ 宣言的なVIEW*
Viewの状態を宣言的に記述することで、変更があった場合に必要な部分だけを効率的に更新できます。

*■ 仮想DOM*
Reactでは、仮想DOMという仕組みを使って、UIの変更を効率的に反映します。仮想DOMとは、実際のDOMをJavaScriptのオブジェクトとして表現したもので、DOMそのものを操作するのではなく、オブジェクトを変更して、差分のみをDOMに反映することで、パフォーマンスを向上させています。

*■ コンポーネントベース*
Reactでは、UIを部品ごとにコンポーネントという単位に分割して作成します。コンポーネントは独立して動作し、再利用や組み合わせが可能です。これにより、UIの再利用性や保守性を高めることができます。

*■ JSXの採用*
JSXとは、JavaScriptの中にHTMLのような記法でUIを記述できる構文です。JSXを使うことで、UIの見た目とロジックを1つのファイルにまとめることができます。また、JSXはJavaScriptの拡張であるため、JavaScriptの機能をそのまま使うことができます。

*■ SPAが作成しやすい*
SPAモードは単一ページ内でコンテンツ切替を行うWebアプリの構造名称で、UIの向上に役立ちますが、JavaScriptを多用しなければならないというデメリットもあります。その点、Reactを用いることでSPAを簡単に実現できます。

Next.jsとReactはWeb開発で同じような目的で使われることが多いのですが、両者には基本的な違いがあります。それぞれの違いを以下にまとめました。

　    *項目                                    　              Next.js                        　                         React*

▪サーバ機能                                                あり                                                      なし
▪SSR                                                          可能                                                     CSRのみ
▪SSG                                                          可能                                                       なし
▪ルーティング                                ファイルシステムベース                       ライブラリが別途必要
▪画像の最適化                  Imageコンポーネントを使って可能                  ライブラリが別途必要	
▪APIサポート                           pages/apiフォルダで可能                           ライブラリが別途必要
▪TypeScriptサポート      　　　　　ビルトイン　　　　　　　　　        ライブラリが別途必要　　　
▪SEO                                             SSRやSSGで対応可能                                CSRでは対応困難
▪表示速度      　　　　　              SSRやSSGで高速化      　　　　　    CSRでは遅くなる可能性あり
▪デプロイ                         Vercelプラットフォームで簡単に実施         デプロイのためのプラットが別途必要

※SSR=Server Side Rendering
※SSG=Static Site Generator
※CSR=Client Side Rendering 

## Next.jsとReactの違いを理解して上手に活用しよう

ここまで、Next.jsとReactの違いについて、それぞれの特徴を挙げ、一覧で確認しました。Next.jsはReactをベースにした技術ですが、Next.jsとReactそれぞれに特徴や強みがあります。

Next.jsは、SSRやSSGなどの高度な機能を提供し、SEOに強い、高速なWebアプリケーションを作ることができます。

一方のReactは、UIのコンポーネントベースの設計パターンを採用し、Webアプリケーションの開発をより簡単かつ効率的にします。

*Next.jsとReactの違いやメリット、デメリットを理解した上で、ReactからNext.jsへの移行検討や、プロジェクトでの最適な選択を行って、上手に活用することが重要です。*

Reactの将来性はVue超え？できることやメリット・デメリットも解説

ReactとVue.jsの違いは何？概要や具体的な違いを整理する

Reactの学習にぴったりの本10選！本で学習するメリットも解説

Webアプリケーション開発において、サーバサイドレンダリングの重要性が増しており、なかでもReactベースのフレームワークで人気が高まっているのが、Next.jsです。Next.jsとReactは何が違うのか、その特徴やメリット、活用ケースについて解説します。

Next.jsとReactは、ともにJavaScript言語を用いたWeb開発で用いられる技術である

Next.jsはWeb開発を強力に支援する様々な機能が盛り込まれているフレームワークである

ReactはUIを構築するためのJavaScriptライブラリの1つであり、機能はシンプルである

Next.jsとReactの違いとは？特徴やメリットなども解説

**Next.jsはReactのフレームワークとして、モバイルアプリケーションなどのウェブアプリケーション開発に用いられます。**JavaScriptの知識に加えて、関連知識が必要となります。ここでは、はじめてNext.jsを学ぶ方に概要や使い方、学習方法などをまとめて解説していきます。

【参考】：[Next.js: The React Framework for the Web](https://nextjs.org/)

Next.jsは、オープンソースのウェブアプリケーションフレームワークです。Node.js上に構築されています。これまでのクライアントアプリケーションのReactを拡張し、サーバでレンダリングアプリケーションにも対応します。

そのため、*Reactのフレームワークであり、サーバサイドJavaScriptのレンダリング、静的サイトの生成などの機能を追加したものと表すことができます。*

フレームワークとは？プログラミング言語ごとに代表的なものを解説

*Reactとは、モバイルアプリケーションなどで使用するユーザインターフェースを構築するJavaScriptライブラリを指します。*Meta社とコミュニティによって維持・開発されています。

Reactは、ウェブアプリケーションのライブラリに位置付けられ、フレームワークとしてはNext.jsやRemixのようなReactをベースとするフレームワークを推奨しています。

【参考】：[React](https://react.dev/)
【参考】：[Remix](https://remix.run/)

*Node.jsとは、Googleが開発するV8 JavaScriptエンジンで動作するJavaScript実行環境を表します。*非同期イベントで駆動するJavaScriptのランタイム環境で、サーバサイドJavaScript環境を実現します。スケーラブルなネットワーク・アプリケーションを構築するために2009年に設計・開発されました。

Next.jsでは、サーバサイドJavaScriptにも対応するため、Node.jsを組み合わせる高度なアプリケーション開発が可能で、Reactもこの組み合わせを推奨しています。

【参考】：[Node.js](https://nodejs.org/en)

Node.jsとは？JavaScriptとの違いや使い所を解説

*Next.jsとReactの関係は、ReactがJavaScriptライブラリ自体で、Next.jsはReactのフレームワークです。*Reactのアプリケーションをフルスタック実装する際には、Next.jsが有効でしょう。

*Next.jsとNode.jsの関係は、Node.jsがサーバサイドのJavaScriptを構築し、Next.jsがNode.jsを使用して、クライアントとサーバ全体のアプリケーション開発を行うものです。*そのため、Next.jsにはNode.jsが必要であり、導入時に設定し使用します。

Node.js入門！メリットやインストール方法・学習方法を解説

*Next.jsの最新版は、2023年10月26日にリリースしたNext.js 14です。*主要な機能強化は以下の通りです。

・*Turbopack*
RustエンジンであるTurbopack（ターボパック）のインテグレーションテストが進み、App & Pages Routerで5,000のテストが完了しました。

その結果、アプリケーションではローカルサーバの起動が53%高速化し、高速リフレッシュ機能によりコード更新の94%が高速化されたことが確認できました。次期リリースでは安定版に移行する予定です。

・*Server Actions*
Server Actions（サーバアクション）は安定版で、フォームやFormData Web APIといったWebの基本をベースに構築され、プログレッシブ・エンハンスメントに活用できます。キャッシュや再検証、リダイレクトなどに用いることができます。

フォームでは、ネイティブに動作しユーザエクスペリエンスを向上させることができます。

・*Partial Prerendering*
Partial Prerendering（部分的なプリレンダリング）はプレビュー版です。 高速な初期静的レスポンス とストリーミング動的コンテンツを実現します。コンパイラの最適化が施されています。

【参考】：[Next.js 14](https://nextjs.org/blog/next-14)
【参考】：[Turbopack](https://turbo.build/pack)

Next.jsを使うには、事前にNext.jsを導入しておきます。サポートされるブラウザは、Chrome 64以降、Edge 79以降、Firefox 67以降、Opera 51以降、Safari 12以降です。主要ブラウザに対応しています。

*使い方は、JSXの記法でコーディングするだけですので、フォルダ構造を理解できたらコード開発に進むことができます。*最初は、慣れるためにアプリケーション開発のサンプルを確認すると良いでしょう。

【参考】：[Next.js Docs: Introduction](https://nextjs.org/docs)
【参考】：[Next.js Docs: Supported Browsers](https://nextjs.org/docs/architecture/supported-browsers)
【参考】：[Learn Next.js: dashboard-app](https://nextjs.org/learn/dashboard-app)

*Next.jsは、macOS、Windows、Linuxでサポートされます。*Next.jsでは、Node.js 18.17以降が必要です。あらかじめNode.jsをインストールしておき、Next.jsをインストールします。WindowsはWSL2で動作しますので、WSLも事前にインストールしておきます。

【参考】：[Next.js Docs: Getting Started: Installation](https://nextjs.org/docs/getting-started/installation)
【参考】：[Microsoft Learn: Windows 上の Next.js の概要](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nextjs-on-wsl)
【参考】：[Microsoft Learn: Node.js を Linux 用 Windows サブシステム (WSL2) にインストールする](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl)
【参考】：[Node.js](https://nodejs.org/en)

### Next.jsのインストールと起動

*Next.jsのインストールは、create-next-appを使って”npx create-next-app”のように行います。*プロジェクトのフォルダを作成し、そこで実行します。npxのほかyarnやpnpm、bunxなどでも同様です。Next.jsのインストールが完了したら、”npm run dev”で開発インスタンスを起動します。

実行の準備ができると、ウェブブラウザでは”http:\//localhost:3000”からNext.jsを起動します。最初に表示される画面は、”app/page.tsx”あるいは”pages/index.tsx”を編集し、更新することもできます。

【参考】：[Next.js Docs: Getting Started: Installation](https://nextjs.org/docs/getting-started/installation)
【参考】：[Next.js Docs: create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)
【参考】：[Microsoft Learn: Windows 上の Next.js の概要](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nextjs-on-wsl)

*Next.jsのプロジェクトは、トップレベルに4つのフォルダが格納されます。*”app”は「App Router」、”pages”は「Pages Router」、”public”は静的な情報、”src”は追加のアプリケーションソースが格納されています。

「App Router」は、最新の画面遷移（ルーティング）を行うフレームワーク部分でReactの最新機能を取り入れたものです。「Pages Router」はNext.js 13まで使用されていたルーティングモジュールで、互換性維持のために提供されます。最新のアプリケーション開発では、「App Router」が推奨されます。

【参考】：[Next.js Docs: Getting Started: Next.js Project Structure](https://nextjs.org/docs/getting-started/project-structure)
【参考】：[Next.js Docs: App Router](https://nextjs.org/docs/app)
【参考】：[Next.js Docs: Pages Router](https://nextjs.org/docs/pages)

*Next.jsは、ユーザインターフェースの開発フレームワークですので、ドキュメントや動画などいくつかの学習方法があります。*最初は、公式サイトの入門ガイドやドキュメントが有効です。

しかしながら、英語での情報提供は日本人にとっては誰でも簡単に進められるものとは言えないのも事実です。最初はそれぞれを見比べてから少しづつ理解を深めるといいでしょう。

### 公式サイトの入門ガイドを活用する

Next.jsでは、利用者を増やすために入門ガイドの掲載を始めています。*「Learn Next.js」は初心者を対象とした入門ガイドです。*基礎的な項目を順に解説しています。全体像を把握したら個別のテーマ別のドキュメントに進むこともできます。

【参考】：[Learn Next.js: Start building with Next.js](https://nextjs.org/learn)

### 公式ドキュメントを使用する

*「Next.js Docs」は、リファレンス情報を掲載する公式ドキュメント公開サイトです。*ある程度基本がわかる方は、「Next.js Docs」を使って項目やテーマに沿って知識を深めることが可能です。概要レベルに近い情報から、より専門的なないようがカバーされています。

【参考】：[Next.js Docs: Introduction](https://nextjs.org/docs)

公式サイトのドキュメントは、非公式ながら有志による日本語翻訳プロジェクトも進められています。最初の学習のきっかけとしては、日本語サイトを確認するのがいいでしょう。

【参考】：[Next.js ドキュメント日本語翻訳サイト](https://nextjs-ja-translation-docs.vercel.app/)
【参考】：[Next.js Docs: はじめに](https://nextjs-ja-translation-docs.vercel.app/docs/getting-started)

### Next.jsを用いたアプリケーション開発

*Next.jsを用いたアプリケーション開発は慣れが必要なため、順に公式ドキュメントを理解するのがいいでしょう。*Next.jsを用いたアプリケーション開発では、前提となる部分を最初に理解しておきましょう。

ルーティング（Routing）は画面遷移の考え方、レンダリング（Rendering）は作成コードのユーザインターフェースへの変換、データフェッチング（Data Fetching）はデータのアプリケーションでの使用方法、スタイリング（Styling）はアプリケーションレイアウトを学びます。

【参考】：[Next.js Docs: Building Your Application](https://nextjs.org/docs/app/building-your-application)
【参考】：[Next.js Docs: Routing Fundamentals](https://nextjs.org/docs/app/building-your-application/routing)
【参考】：[Next.js Docs: Rendering](https://nextjs.org/docs/app/building-your-application/rendering)
【参考】：[Next.js Docs: Data Fetching](https://nextjs.org/docs/app/building-your-application/data-fetching)
【参考】：[Next.js Docs: Styling](https://nextjs.org/docs/app/building-your-application/styling)

### コミュニティや 動画・ソーシャルメディアを活用する

Next.jsでは、ドキュメント作成やサンプルコードなどで開発支援者がサポートしています。*そのコミュニティは、知見を持っている技術者の集まりですので、不明点や問題を解決するために活用が可能です。*

【参考】：[Next.js Docs: Next.js Community](https://nextjs.org/docs/community)
【参考】：[GitHub: Next.js Discussion](https://github.com/vercel/next.js/discussions)
【参考】：[Reddit Next.js](https://www.reddit.com/r/nextjs/)

Next.jsにおいても、SNSのX（旧ツイッター）やYouTubeなどで情報が公開されています。英語の配信ですのでその点は理解したうえで活用しましょう。

【参考】：[Next.js Docs: Next.js Community](https://nextjs.org/docs/community)
【参考】：[X: Next.js](https://twitter.com/nextjs)
【参考】：[YouTube: Vercel](https://www.youtube.com/@VercelHQ)

## Next.jsは関連知識の習得も必要

Next.jsは、ReactのフレームワークでありReactを理解しておくのが望ましいです。また、サーバサイドではNode.jsの知識があるといいでしょう。このようにJavaScriptやJSXのみならず、関連知識も重要です。

**モバイル端末などの高機能化が進む中、最適なユーザインターフェース設計には、関連知識の習得も合わせて行うことをおすすめします。**

Next.jsはReactのフレームワークであり、処理の高速化やサーバサイドへの対応など、多機能なフレームワークです。ユーザインターフェースの高速化や多機能化が求められる中、活用が進んでいます。ここでは、入門情報として概要から使い方、学習方法まで解説します。

Next.jsはReactのフレームワークとして、ウェブアプリケーション開発に用いられます

ユーザインターフェースは高速で、モバイル端末の高速化や高機能化に対応します

使用するには、JavaScriptやJSXに加えて関連知識も理解することで最適な開発が可能です

フレームワークの記事（4ページ目）