*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に加えて関連知識も理解することで最適な開発が可能です

Next.jsの入門情報！概要から使い方・学習方法を解説

Next.jsは、米国のVercel社が開発したオープンソースのフレームワークです。バージョン1が2016年にリリースされ、その後もたゆまなく改良が行われて、現在はバージョン13.4が最新（2023年12月現在）です。

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

この記事では、Next.jsの特徴やメリット・デメリットを中心に解説します。これからNext.jsを学びたい方、Webアプリの開発に携わる方はぜひ参考にしてください。

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

Next.jsとReactは、**いずれもJavaScriptを使ってWebアプリケーションを開発するための技術ですが、いくつか基本的な違いがあります。**主な違いを以下に4つ挙げてみました。

▪ReactはJavaScriptのライブラリで、UI（ユーザーインターフェース）を構築するためのものです。Reactはクライアント側でしか動作しないため、バックエンドとして別の技術を組み合わせる必要があります。

▪Next.jsはReactをベースにしたフレームワークで、サーバサイドでのレンダリングやルーティングなどの機能を提供します。Next.jsは単体でWebアプリケーションを動作させることができます。

▪Reactは自由度が高く、自分で設定や調整を行う必要があります。Next.jsは設定や調整がほとんど不要で、すぐに開発に着手できます。

▪Reactは初期表示が遅く、SEO（検索エンジンの最適化）に弱いというデメリットがあります。Next.jsは初期表示が速く、SEOに強いというメリットがあります。

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

Next.jsの特徴としては「ファイルベースルーティング」、「サーバAPI実装が可能」、「画像の最適化」、「高パフォーマンスなレンダリング」などが挙げられます。それぞれの特徴について見ていきましょう。

### ファイルベースルーティング

ルールに従って特定のディレクトリにJavaScriptコードを置くと、そのコードのファイル名がそのままURLとして適用されます。**そのため開発者がルーティングに関する設定について記述をする必要がないため、開発が迅速になります。**

APIルートという機能を使うと、サーバ側のAPIもJavaScriptで実装できます。簡易的なサーバ機能を作成できるため、**サーバサイドの実装を行うことなく、直ちに結合テストが行えます。**

結合テストの「内部結合テスト」と「外部結合テスト」は何が違う？観点や目的も解説

画像のレンダリングを高速化する機能を持っています。表示サイズや形式を自動で最適化したり、表示領域外の画像の読み込みを遅らせたりすることで、**Webページの表示速度を向上させます。**

### 高パフォーマンスなレンダリング方式

サーバ側でSSRやSSGなどのレンダリングの仕組みを提供しています。これにより、**クライアント側のデバイススペックに影響されずに高速なWebページ表示が可能になります。**

SSRは「Server Side Rendering」（サーバサイドレンダリングの略）で、ユーザからのリクエストに応じてサーバ上でHTMLを生成し、ブラウザに送信する方法です。**SSRは、コンテンツが動的に変化するウェブサイトや、SEO（検索エンジンの最適化）が重要なウェブサイトに適しています。**

SSRのメリットとしては、コンテンツの表示が早く、SEOに有利であることです。一方、SSRのデメリットは、サーバの負荷が高く、設定が複雑になることです。

SSGは「Static Site Generator」（静的サイト生成の略）で、ビルドの際にあらかじめHTMLを生成し、サーバに保存しておく方法です。 **SSGは、コンテンツがあまり変更がないWebサイトや、高速なページロードが必要なサイトに適しています。**

 SSGのメリットとしては、サーバの負荷が低く、セキュリティが高いことです。 一方、SSGのデメリットとしては、コンテンツの更新の際にビルドの再実行が必要であることです。

Next.jsの主なメリットとしては、「快適なWeb体験の提供」と「開発効率の向上」が挙げられます。それぞれ詳しく見ていきましょう。

SSRやSSGを使うことで、Webページの初期表示を高速化できます。また、画像の最適化やコード分割などの機能を使うことで、**Webページのパフォーマンスを向上させることができます。**この結果、ユーザに対して快適なWeb体験の提供が可能となります。

ゼロコンフィグ機能により、**開発環境や設定を簡単に構築できます。**また、ファイルベースルーティングなどの機能を使うことにより、開発の手間を減らすことができます。さらに、Next.jsはReactとの親和性が高いため、Reactのコンポーネントやライブラリをそのまま利用できます。

Next.jsのデメリットとしては、「エンジニア人口が少ない」「小規模サイトの構築に不向き」という2点が挙げられます。以下、それぞれについて詳しく見ていきましょう。

Next.jsは比較的新しいフレームワークであるため、Next.jsに精通したエンジニアがまだ多くはありません。そのため、開発において共同作業ができる人材が集まりにくかったり、困ったときに助けてくれる人や情報が少なかったりする可能性があります。

**反対に、Next.jsが使えると重宝される可能性が高いため、学ぶことでメリットになります。**

### 小規模サイトの構築に不向き

Next.jsは高機能なフレームワークであるため、**小規模なサイトで利用するにはオーバースペックとなる可能性があります。**Next.jsが提供している様々な機能を十分に活用できないと、Next.jsを利用するメリットが半減してしまうこともあります。

開発規模に応じて、エンジニア人口の多いReactで済ませるという選択肢もあります。

Next.jsに興味が湧いたら、*まず入門書で概要を把握し、実際に使ってみることをおすすめします。*入門者におすすめの書籍を3冊紹介しますので、参考にしてください。

本書は、React.jsとNext.jsの入門書です。React.jsの基本からNext.jsの特徴や機能まで、実際のサンプルコードを通じて学ぶことができます。初心者向けに分かりやすく解説されており、**React.jsとNext.jsの両方を一気に学びたい人におすすめしたい入門書です。**

▪著者： 掌田津耶乃 
▪出版社： 秀和システム
▪ページ数：457ページ
▪出版日： 2021/2/27

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