## Mac版リリースの「Mojo」とは？

Mojoとは、2023年9月にプレビュー版を公開したばかりのPython互換プログラミング言語を指します。Pythonの構文やソフトウェア開発エコシステムに、システム・プログラミングとメタプログラミングの機能を組み合わせたプログラミング言語です。

人工知能（AI）領域において、統一されたソフトウェア開発を提供するために開発されました。

2023年9月にLinux版をダウンロード提供し、時間を空けずに10月19日にはMac版の提供を開始しました。必要なモジュール提供やコミュニティ活動はGitHubを通じて行われています。

【参考】：[Modular Blog: Mojo is now available on Mac](https://www.modular.com/blog/mojo-is-now-available-on-mac)
【参考】：[Modular Blog: Mojo - It’s finally here!](https://www.modular.com/blog/mojo-its-finally-here)
【参考】：[GitHub Moji: Welcome to Mojo](https://github.com/modularml/mojo)

今さら聞けない人工知能（AI）の基礎知識｜AI開発の基本を解説！

**Mojoは、Pythonの構文を用いたプログラミング言語です。**Pythonのスーパーセットとして設計されており、システム・プログラミングとメタプログラミングの機能が拡張されています。

分かりやすく言うと、「C言語」には「C++」の拡張言語があるように、「Python」の拡張言語として「Mojo」があるようなイメージです。Modular社はMojoを「Python++」と表しています。Mojoの扱いは、現時点ではオープンソースではありませんが、将来的にオープンソース化を目指しています。

【参考】：[Mojo](https://www.modular.com/mojo)

Pythonでできることは？初心者が作れるものや実用例を紹介

Mojoの特徴は、Pythonのスーパーセットとして、任意のPythonコードとのシームレスな統合をサポートしていることです。AIで活用するGPUなどのアクセラレータを含む、プログラミングに対応します。

Mojoは動的言語と静的言語の長所を兼ね備えており、現在のPythonの最大68,000倍のパフォーマンスを達成できるとModular社は発表しています。*メリットとして、開発者は関数を定義するキーワード（fnとdef）を選択することで、より高いパフォーマンスを発揮する静的型付けを任意に選ぶことができます。*

今回リリースしたMac版では、Pythonと比較して約90,000倍のパフォーマンスが得られたと公表されています。

【参考】：[Modular Blog: Mojo is now available on Mac](https://www.modular.com/blog/mojo-is-now-available-on-mac)
【参考】：[Modular Blog: Mojo - It’s finally here!](https://www.modular.com/blog/mojo-its-finally-here)

*Mojoは、2023年時点ではPython 3の構文のサブセットを提供しているだけですので、Python 3と完全互換性を保証している訳ではありません。*同様に、Mojoで加わった機能はPythonで動作するとは限らないので、汎用Pythonコードの開発としては万全とまでは言えないでしょう。

将来的にはさらに互換性を高める予定がありますので、現時点ですぐにデメリットとは言えませんが、頭の片隅にとどめておくのが良いでしょう。

【参考】：[Mojo FAQ](https://docs.modular.com/mojo/faq.html)

*Modular社は、Google社出身者が設立した会社です。*AIの複雑性を解消し、分断されたインフラ構造を統一することで、生産性と品質をより高める目的を持ちます。さらにAIを社会により役立てられるよう、AIインフラを再発明するミッションを掲げています。

【参考】：[Modular](https://www.modular.com/)

*Modular社は、AIインフラの統一の目標に向けて2つのソリューションを提供しています。*1つは、*今回の記事で解説の中心となる「Mojo」です。*Mojoをウェブベースでも開発できるように、「Mojo Playground」を提供しています。これは、MojoがサポートするJupyterノートブックのホスト環境です。

もう1つは、*統合AI推論エンジンである、「Modular Engine」です。*モデルの書き換えや変換を行うことなく、低レイテンシーでTensorFlowとPyTorchのすべてのモデルを実行することを特徴としています。任意のクラウドにモデルをそのまま持ち込むなど、サーバとエッジのどこにでも、簡単に高いパフォーマンスメリットを享受できます。

【参考】：[Modular Engine](https://www.modular.com/engine)

*Mojoは、2023年5月に登場したばかりのプログラミング言語です。*そのため、ここではプログラミング環境をもう一段詳しく解説していきます。実際に使用する前に、事前準備として理解しておきましょう。

*Mojoは、Pythonのソフトウェア開発で用いられるエコシステムを利用しています。*そのため、Jupyterノートブックを介したブラウザアクセスを皮切りに、Linux版のローカル開発、そしてMac版のリリースと続きました。合わせてVisual Studio Code拡張も利用可能です。

ローカル開発者ツールでは、Mojoアプリケーションのビルド作業を容易にするコンパイラとIDEツールをフルセットで提供します。サポートされているオペレーティングシステムは、20203年11月時点で、Ubuntu Linux 20.04/22.04 （64-bit x86）とmacOS （Apple silicon）となります。

なお、Windowsユーザは「Windows Subsystem for Linux version 2」（(WSL 2）上でサポートされるLinuxディストリビューションを用いることで、Mojoを使用することができます。今後、Windowsでのネイティブサポートも計画されています。

VSCodeとは？定番のコードエディタを他のエディタと比較して解説

*Mojoは、MLIR（Multi-Level Intermediate Representation）コンパイラフレームワークによる、高度なコンパイル機能を持ちます。*MLIRは、MLIRは、GPUやTPU、FPGA・量子コンピューティングなど、AIプラットフォームに最適なコンパイラ環境であり、AIプログラミング言語として採用したフレームワークです。

Pythonに欠けている、システムプログラミング機能を備えるとともに、JuliaやSwift、Rust・C++などから多くを学び、メモリ所有権と管理を改良し、AIとMLIRの原則に適合させています。コンパイラは、ジャストインタイム（JIT）とアドバンスオブタイム（AOT）の両モードに対応します。

Mojoは、Pythonや他のプログラミング言語から簡単に移行できるように開発されており、Pythonと多くの互換性を持たせています。そのため、必要に応じて既存のPythonモジュールをMojoモジュールにインポートすることができます。

*MLIRは、コンパイラを構築するための柔軟なインフラストラクチャ・フレームワークを提供します。*MLIRは、中間表現（IR）のレイヤーをベースにしており、どのようなハードウェアに対しても、どのようなコードでも使用することができ、柔軟で強力なコンパイラを作成することができます。

Mojoは、MLIR設計原則に基づいてゼロから構築され、MLIR中間表現の直接的なプログラミング・サポートを提供しています。MojoはAIアルゴリズムの開発に用いられるほか、汎用プログラミング言語としてPythonが提供する多くの環境に適用することができます。

*Mojoでは、SDKとして次のような開発ツールをセットで提供しています。*

・*mojoドライバ*
シェルを提供し、Mojoプログラムのビルドと実行、モジュールのパッケージ化、ドキュメントの生成、コードのフォーマットが可能です。

・*Visual Studio Code用の拡張機能*
VS Code上で、シンタックスハイライトやコード補完など、生産性向上機能をサポートします。

・*Jupyterカーネル*
Pythonコードを含むノートブックの構築と実行をサポートします。

上記の他、近日中にデバッグ機能をサポートするとしています。

【参考】：[Modular Blog: Mojo - It’s finally here!](https://www.modular.com/blog/mojo-its-finally-here)



*Mojoを使うには、Modular社のアカウント登録が必要です。*アカウント登録完了により、モジュールインストールの認証コードを取得し、ダウンロードページの指示に従っていきます。Mac版の場合は、Homebrewを事前にインストールしておきましょう。

Modular CLIのインストールコマンドが完了したら、”modular install mojo”でMojoのインストールを実行します。

【参考】：[Modular Docs: Get started with Mojo](https://docs.modular.com/mojo/manual/get-started/)
【参考】：[Modular: Create a Modular account to get started](https://developer.modular.com/signup?redirect=/download)

Homebrewのインストール方法は？よくあるエラーも解説！

*Mojoは、Pythonと同じように、シェルで”mojo”コマンドを起動し、対話型で実行することができます。*REPL（Read–eval–print loop）と呼ばれる、対話型による処理手順に従います。

```$ mojo
Welcome to Mojo!
Expressions are delimited by a blank line.
Type `:mojo help` for further assistance.```

ここで例えば次のように、コードを記述していきます。「Enter」を2回押すことでコードが解釈されます。

```1> print("Hello World")
  2.
Hello World
  2>```

【参考】：[Modular Docs: Hello, world!](https://docs.modular.com/mojo/manual/get-started/hello-world.html)

### Mojoのアプリケーション実行

*Mojoのアプリケーションは、次のようにMojoの引数として実行することができます。*ファイル拡張子は、”.mojo” または「絵文字」です。ソースファイルには、”fn main():”を関数定義しておきます。

```$ cat app.mojo
fn main():
   print("Hello World")
$```

実行結果は、以下の通りです。

### Mojoのアプリケーションのビルドと実行

*Mojoのアプリケーションは、事前にビルドし実行ファイルを生成しておくことができます。*ビルドには、”mojo build”コマンドを使用します。一般的なコンパイラと同じ手順に従って、バイナリを生成します。

```$ mojo build app.mojo
$ ./app
Hello World
$```

## Mojoはパフォーマンス向上に期待できる

Pythonは汎用プログラミング言語としても、AIを始めとするサイエンス用途としても、非常に利用者が増加しています。簡単にデータ分析ができますが、性能向上には限界もあります。

Mojoは他のプログラミング言語の長所をPythonに適合させるために、Mojoを開発しました。すでにベンチマーク結果では、桁違いの性能向上を果たしています。**今後はパフォーマンス向上を図るとともに、互換性を高めて真のPython++としての実装を期待したいところです。**

「Mojo」とは、Python互換プログラミング言語を指します。Pythonの構文と互換性を保ち、システム・プログラミングとメタプログラミングの機能を取り入れたことで、高いパフォーマンスを発揮します。ここでは、Mojoの概要から使い方まで解説していきます。

Mojoは、Python互換プログラミング言語で、Pythonのスーパーセットとして設計されました

Pythonと比較して、高いパフォーマンスを発揮します

現時点では、Pythonとの完全互換性は確保されておらず、さらなる互換性確保を予定しています

Mac版リリースの「Mojo」とは？概要から使い方まで解説

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の入門情報！概要から使い方・学習方法を解説

## GitHubのファイルダウンロード

GitHubでソフトウェア開発を行うケースが増えています。**GitHubはソースコードをホスティングするプラットフォームであり、GitHubの用語を理解することでファイルダウンロードにおいても戸惑うことなく使用することができます。**

ここでは基本的な用語を理解し、ファイルダウンロードの手順を学んでいきます。

*GitHubは、ソフトウェア開発の生産性向上を高める情報共有プラットフォームです。*アクセスの柔軟性を高めるとともにセキュリティに配慮した設計やアクセス制御が可能です。多くのツールに連携し、開発コミュニティも最大規模のエンジニア数を誇ります。

さらにスマホ版も提供されており、開発者とのコラボレーションに活用することができます。

【参考】：[GitHub: 開発者のためのプラットフォーム](https://github.co.jp/)
【参考】：[GitHub Docs: はじめに](https://docs.github.com/ja/get-started)
【参考】：[GitHub: 世界中で利用されている開発プラットフォームをポケットの中に](https://github.co.jp/mobile.html)

GitHubとは？メリットや使い方、Gitとの違いも徹底解説！

GitHubの使い方とは？初心者向けに知っておきたい用語も併せて解説！

## ファイルダウンロードに関連する用語

*ここでは、GitHubで用いる用語の中から特にファイルダウンロードに関係する部分に注力して解説します。*用語の意味を正しく理解しておかないと、ファイルダウンロードの作業が進まない場合もあります。ファイルダウンロードの実際の手順は後ほど解説しますが、その中で使用する用語をここで学んでおきましょう。

【参考】：[GitHub Docs](https://docs.github.com/ja)

*リポジトリとは、ソフトウェア開発のファイルやフォルダーの保管場所を示します。*GitHub.comに作成したリポジトリは、リモート リポジトリと呼ばれ、PCなどのコンピュータに作成したリポジトリは、ローカル リポジトリと呼ばれます。

*クローンとは、リモート リポジトリをローカルにコピーすることを指します。*codespaceと呼ばれるクラウドの開発環境にコピーを作成することもできます。クローンでは、プロジェクトのすべてのファイルやフォルダーのすべてのバージョンを対象とする完全なコピーを行います。

*プロジェクトは、作業計画や進捗を確認する全体を指し、ボードやシートを用いて管理します。*リポジトリは、ファイルやフォルダーが格納される単位ですが、プロジェクトは複数のリポジトリを束ねて管理できるように設計されています。

### バージョン管理に関する用語概要

*バージョン管理の用語は、いくつかあります。*ここで必要な用語はブランチとマージです。ブランチは分岐した作業履歴で、マージは分岐の統合です。さらにコミットで記録を保存し、レビジョン番号を付加します。関連して読み取りをプル、書き込みをプッシュと呼びます。

## GitHubのファイルダウンロード方法

ここからは、GitHubのファイルダウンロード方法を解説します。*ファイルダウンロード方法はいくつか存在し、それぞれ使用するツールに違いがあります。*GitやGitHub CLIを使用するには、事前にモジュールをダウンロードしインストールしておきます。

【参考】：[Git: Downloads](https://git-scm.com/downloads)
【参考】：[GitHub CLI のインストール](https://github.com/cli/cli#installation)

以降で解説するGitやGitHub CLI では、リポジトリのURLを利用します。*まず最初にURLの確認方法を学んでいきます。*

・*プロジェクトやリポジトリ画面の表示*
最初にGitHubにサインインし、検索ボックスから対象となるプロジェクトやリポジトリを検索します。表示されたプロジェクトやリポジトリをクリックして画面を表示し、ここで画面の右上に表示される「<> Code」ボタンをクリックします。

・*URLの入手*
「<> Code」ボタンをクリックすると、クローンの選択画面が表示されますので「HTTPS」タブに表示されるURLをコピーします。

なお、ファイルのダウンロードボタンが表示されない場合や、ダウンロードできないなどの場合は表示階層を最上部に変更すると「<> Code」ボタンが表示されますので、確認しながら進めましょう。

【参考】：[GitHub Docs: リポジトリをクローンする Windows/Web browser](https://docs.github.com/ja/repositories/creating-and-managing-repositories/cloning-a-repository?platform=windows&tool=webui)

### GitHub CLIを使用しファイルをダウンロードする

*GitHub CLI は、すべての作業を1か所で行うためにGitHubの機能をターミナルに集めたオープンソースのコマンドライン ツールです。*GitHub CLIを使用してファイルをダウンロード（クローンを作成）するには、GitHub CLIで ”repo clone” サブコマンドを使用します。

具体的には、”gh repo clone コピーしたURL” のように実行します。

【参考】：[GitHub CLI のインストール](https://github.com/cli/cli#installation)
【参考】：[GitHub CLI について](https://docs.github.com/ja/github-cli/github-cli/about-github-cli)
【参考】：[GitHub Docs: リポジトリをクローンする Windows/GitHub CLI](https://docs.github.com/ja/repositories/creating-and-managing-repositories/cloning-a-repository?platform=windows&tool=cli)

### GitHub Desktopを使用しファイルをダウンロードする

*GitHub Desktopを使用してファイルをダウンロード（クローンを作成）するには、GitHub.comに加えてGitHub Desktopへのサインインを行います。*この場合も、リポジトリのメイン画面のファイル一覧の「<> Code」を使用します。

GitHub CLIやGitではコピーしたURLを使用しますが、ここではそのポップアップ画面の中段に表示される ”Open with GitHub Desktop” をクリックし、GitHub Desktopを起動します。

GitHub Desktopでは「Clone a Repository」が表示され、ローカルフォルダを指定します。ここで「Clone」ボタンをクリックするとコピーが保存されます。GitHub Desktopの、「File」「Clone a Repository」のメニューから指定することもできます。

【参考】：[GitHub Docs: GitHub Desktopからのリポジトリのクローンとフォーク](https://docs.github.com/ja/desktop/adding-and-cloning-repositories/cloning-and-forking-repositories-from-github-desktop)
【参考】：[GitHub Docs: GitHubからのGitHub Desktopへのリポジトリのクローン方法](https://docs.github.com/ja/desktop/adding-and-cloning-repositories/cloning-a-repository-from-github-to-github-desktop)

お役立ち記事