**Three.jsは、3次元コンピュータグラフィックス（CG）を描画する、手軽なJavaScriptライブラリです。**HTML5の規格に従っており、WebGLに詳しくなくても、ウェブブラウザ上で簡単に3次元グラフィックスの描画が可能です。

ここでは、入門知識や使用方法に加えて、さらに理解を深める学習方法を解説していきます。

【参考】：[three.js](https://threejs.org/)

HTML5とは？特徴や変更点・関連用語・対応ブラウザを解説！

Three.jsを使用すると、簡単に3次元コンピュータグラフィックスが作成できるとよく言われますが、実際に使ってみるにはどのようにすれば良いか迷う方も多いでしょう。*ここでは、公式サイトのサンプルを実際に動作させて、理解を深めていきましょう。*

【参考】：[GitHub three.js](https://github.com/mrdoob/three.js/)

*GitHub公式サイトの「Usage」に表示されているプログラムは、JavaScriptのサンプルコードです。*このコードを、「.js」ファイルとして保存して使用することができます。

実際のHTMLでの呼び出し方法は、”\<script>\</script>”のタグで括って使用するか、”\<script src=".jsファイル名">\</script>”として外部呼出しします。

【参考】：[GitHub three.js Usage](https://github.com/mrdoob/three.js/#usage)

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

*HTMLファイルを作成することで、ウェブブラウザからThree.jsの3D出力を描画させることができます。*ここでは、Three.jsのライブラリをCDNから読み込んでいます。jsファイルは、以下の例の通り直接記述するか、外部ファイルを呼び出して使用します。

\<head>と\<body＞は、コードに用途に応じて使い分けが可能です。日本語表示のために、charsetを"utf-8"に設定しておきましょう。

```
<html>
  <head>
    <meta charset="utf-8" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from 'three';

     // ここに必要なコードを記述します。
     // 公式サイトのサンプルコードをここに転記することもできます。

    </script>
  </head>
  <body>
  </body>
</html>
```

先ほど作成した、HTMLファイルにThree.jsのコードを入れ込んだら完成です。*Three.jsで最初に何かを表示するには、シーン（scene）、カメラ（camera）、レンダー（renderer）の3つが必要です。*

*・シーン（scene）*
シーンは、状況が描写されている映像のオブジェクトで、”THREE.Scene()”を使います。サンプルコードでは、以下のように使用しています。

*・カメラ（camera）*
カメラは、シーンを描画するときに、何が見えるか決定する仮想のカメラで、”THREE.PerspectiveCamera()”などいくつかの種類があります。サンプルコードでは、以下のように使用しています。

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );

*・レンダー（renderer）*
レンダーは、カメラのアングルに基づいて演算処理し描画するもので、”THREE.WebGLRenderer()”を使います。サンプルコードでは、以下のように使用しています。

const renderer = new THREE.WebGLRenderer( { antialias: true } );

【参考】：[Three.js Creating a scene](https://threejs.org/docs/#manual/ja/introduction/Creating-a-scene)
【参考】：[Three.jsの基礎知識](https://threejs.org/manual/#ja/fundamentals)

### サンプルコードを完成させる

公式サイトで紹介されている、サンプルコードは3次元描画に必要な要素があらかじめ設定されており、そのまま用いることができます。*サンプルコードにHTMLのコードを追記するだけで、ウェブブラウザで表示できるコードが完成します。*

先のHTMLでは、JavaScriptを直接入力する使い方でしたが、jsファイルを読み込んで使う場合は、次のように記述します。ここでのファイル名は実際のjsファイル名を指定します。

```<script src=".jsファイル名"></script>```

上手く表示できたら、編集サイト「JSFiddle」でオリジナルのコードが確認できますので、比べてみましょう。なお、JavaScriptのコードを外部ファイルから呼び出す場合は、オリジン間リソース共有（CORS）のエラーを回避するために、ウェブサーバ経由でHTMLファイルを表示させると良いでしょう。

【参考】：[GitHub three.js Usage](https://github.com/mrdoob/three.js/#usage)
【参考】：[JSFiddle サンプルの編集と表示](https://jsfiddle.net/7u84j6kp/)
【参考】：[Mozilla mdm オリジン間リソース共有 (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)

*Three.jsの基本要素を学んだら、canvasを設定したり、サイズを指定したりすることができます。*また、カメラアングルの変更や物体の形状を変更するなど、柔軟にコードを記述することができます。CSSスタイルシートを組み合わせて全体の調整が可能です。

【参考】：[Three.jsの基礎知識](https://threejs.org/manual/#ja/fundamentals)
【参考】：[Three.js の概要  Installation](https://threejs.org/docs/index.html#manual/ja/introduction/Installation)
【参考】：[Mozilla mdm \<canvas>: グラフィックキャンバス要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas)

*3次元コンピュータグラフィックスは、コンピュータの技法としてさらに多くのことを学ぶことで、より効果的な3D描画に活用することができます。*Three.jsを学ぶとともに、関連知識を吸収すると良いでしょう。ここでは、Three.jsをさらに学習するための方法について解説していきます。

### 公式サイトのドキュメントを確認する

Three.jsの公式サイトには、多くのドキュメントが掲載されています。日本語化が順次行われていますので、できれば最初に目を通しましょう。*Three.jsの概要や基礎知識の全般について、豊富なドキュメントから知識を得ることができます。*

【参考】：[Three.jsの基礎知識](https://threejs.org/manual/#ja/fundamentals)
【参考】：[Three.js の概要  Installation](https://threejs.org/docs/index.html#manual/ja/introduction/Installation)

### サンプルコードを参考にする

自分でコードを1から作成するのは、大変な労力が必要です。*プログラムの勘所を学ぶためにも、サンプルコードを眺めるのが良いでしょう。*Three.jsでは、150以上のサンプルとコードをサイトに公開しています。どんなことができるのか、まずはサンプルの動作を見てみましょう。

公式サイトでは、関連してWebpackを使ったサンプルや、初心者向けサンプル集もリンクが掲載されていますので、必要に応じて参考にすると良いでしょう。

【参考】：[Three.js exapmles](https://threejs.org/examples/#webgl_animation_keyframes)
【参考】：[Three Seed Official](https://github.com/edwinwebb/three-seed/)
【参考】：[Three.js Examples](http://stemkoski.github.io/Three.js/index.html)

Three.jsは、ウェブから多くの情報が得られます。ここでおすすめするサイトから有益な情報が得られますので、活用しましょう。

*・Beginning with 3D WebGL*
公式サイトがおすすめする、チュートリアル情報の掲載サイトです。シーン、ジオメトリ、マテリアル、アニメーションの4つのパートに分けて丁寧に解説しています。

【参考】：[Beginning with 3D WebGL](https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene)

*・Animating scenes with WebGL and three.js*
こちらも公式サイトがおすすめする、チュートリアル情報の掲載サイトです。実際のコードを例にCodepenで編集表示しながら、プログラミングの理解を進めています。

【参考】：[Animating scenes with WebGL and three.js](https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/)
【参考】：[Codepen](https://codepen.io/)

*・ICS MEDIA Three.js入門サイト*
ウェブデザイナー向けの情報サイト「ICS MEDIA」では、多くのThree.jsのコンテンツを掲載しています。最初の一歩からステップアップ情報までカバーしています。日本語サイトですので、すべての方におすすめします。

【参考】：[ICS MEDIA Three.js入門サイト](https://ics.media/tutorial-three/)

メジャーな参考書は、英語で提供されます。*以下におすすめする書籍は、共に同一の著者が作成しており、Three.jsの知識が広く得られます。*最新版は「Learn Three.js - Fourth Edition」で、英語のみです。

日本語版は、「初めてのThree.js 第2版」という旧版のみですが、どうしても日本語の情報が必要でしたら手に取ってみましょう。

*「Learn Three.js - Fourth Edition」*
▪著者：Jos Dirksen
▪ページ数：554ページ
▪出版社：Packt Publishing
▪発売日：2023/2/17
【参考】：[Learn Three.js - Fourth Edition](https://www.packtpub.com/product/learn-threejs-fourth-edition/9781803233871)

*「初めてのThree.js 第2版」*
▪著者：Jos Dirksen 著、あんどうやすし訳
▪ページ数：416ページ
▪出版社：オライリージャパン
▪発売日：2016/7/23
【参考】：[初めてのThree.js 第2版](https://www.oreilly.co.jp/books/9784873117706/)

*短期間で深い知識を得るのであれば、有料サービスを受講することも検討してみましょう。*無料のレッスンや割引の情報など、実際のサイトであわせて確認するのが良いでしょう。

*・Three.js journey*
公式サイトが推薦する学習サイトです。95USドルから始めることができます。7つのチャプター、54レッスン、72時間分の動画教材が提供されます。いくつかのレッスンは無料で公開されており、イントロダクションコースの多くは無料で提供されています。

【参考】：[Three.js journey](https://threejs-journey.com/#)

*・udemy Three.JSコース*
日本語のコースが3種類、英語のコースが31種類あります。無料コースが7種類、有料コースが多言語含めて37種類あります。期間限定の割引セールも実施しています。

【参考】：[udemy Three.JSコース](https://www.udemy.com/ja/topic/threejs/?utm_source=adwords&utm_medium=udemyads&utm_campaign=DSA_WebIndex_la.JA_cc.JP&utm_content=deal4584&utm_term=_._ag_89101504074_._ad_439843892593_._de_c_._dm__._pl__._ti_dsa-310094130363_._li_1009311_._pd__._&gclid=EAIaIQobChMI9PL0hIjvgAMVTsAWBR2eIQ1vEAMYASAAEgKxWvD_BwE)

## Three.jsは描画結果を見ながら理解を深めましょう

Three.jsは簡単とはいえ、HTML5やCSS、JavaScriptの知識が求められます。3次元描画APIであるWebGLの知識があれば、さらに理解が深まるでしょう。プログラミングでは、慣れるまではトライアンドエラーをしながら、進める場合もあります。

**どのように描画されるか確認すると理解しやすく、実際にコードの動作を確認しながら進めることをおすすめします。**

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

【JavaScript学習ロードマップ】勉強する上で重要なポイントも紹介

Three.jsは、3次元コンピュータグラフィックス（CG）を描画する、手軽なJavaScriptライブラリです。ウェブブラウザ上で、簡単に3次元グラフィックスの描画が可能です。ここでは、入門知識や実際の使い方に加えて、理解を深める学習方法を解説していきます。

HTMLファイルを作成し、Three.jsのコードを埋め込むか外部から読み込んで使用します

Three.jsでは、シーン（scene）、カメラ（camera）、レンダー（renderer）の3つが必要です

学習するには、ドキュメントやサンプルコードを利用するほか、ウェブの情報などを利用します

Three.js入門！実際の使い方と学習方法をわかりやすく解説

## 「GitHub Copilot Chat」ベータ版が利用可能に

**GitHubは2023年7月20日、「GitHub Copilot Chat」のベータ版を公開し、GitHub Copilot for Businessを利用するすべてのユーザで利用可能とすることを発表しました。**

GitHub Copilot for Businessのユーザは、GitHub Copilot Chatのチャットシステムを用いて、コーディング関連の質問に最適な回答を得ることができます。

【参考】：[GitHub Copilot Chat ベータ版がすべての組織で利用可能に](https://github.blog/jp/2023-07-24-github-copilot-chat-beta-now-available-for-every-organization/)

*GitHub Copilot Chatは、GitHub Copilotと対話できるチャットインターフェースです。*サポートされる、統合開発環境（IDE）はVisual StudioとVS Codeです。Visual StudioとVS Codeから、直接コーディング関連の質問を行い、回答を得ることができます。

【参考】：[GitHub Copilot Chat について](https://docs.github.com/ja/copilot/github-copilot-chat/about-github-copilot-chat)

AIペアプログラマー「GitHub Copilot」の使い方や導入メリットを徹底解説！

### GitHub Copilot Chatの利用ケース

GitHub Copilot Chatでは、いくつかの利用ケースを想定しています。

*1つ目は、単体テストでの利用です。*繰り返し実行するタスクを効率的に実行するために、特定の関数などに応じたテストケースを生成します。同様にエラー時の処理を確認したり、値の境界テストのテストケースなどに利用したりすることで、より作成コードの品質を高めることも可能です。

*2つ目として、特定の関数やコードを選択してコードの説明を得ることが挙げられます。*これは自然言語に強みを持つAIの有効な活用方法です。

*3つ目として、コードの潜在的な問題を調査し、不具合を未然に防ぐコードの修正に利用したり、新たに作成するコードのコーディングに対して質問し、有効性が高いコードの回答を得たりすることができます。*

【参考】：[GitHub Copilot Chat のユース ケース](https://docs.github.com/ja/copilot/github-copilot-chat/about-github-copilot-chat#:~:text=%E3%81%94%E8%A6%A7%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82-,GitHub%20Copilot%20Chat%20%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B9%20%E3%82%B1%E3%83%BC%E3%82%B9,-GitHub%20Copilot%20Chat)

*GitHub Copilotとは、GitHubが提供するAIペアプログラミング環境を指します。*AIを活用して、より速く、より少ない作業でコード開発を行う手助けをします。具体的には、コメントやコードから文脈を読み取ったり、個々の行や関数全体を即座に提案したりします。

GitHub Copilotの実装は、GitHubおよびOpenAI・Microsoftによって開発された生成AIモデルを用いています。利用するには、GitHub Copilot for Individualsの個人アカウントとGitHub Copilot for Businessの企業向けアカウント、いずれにも対応します。

【参考】：[GitHub Copilot](https://github.com/features/copilot/)
【参考】：[GitHub Copilot の概要](https://docs.github.com/ja/copilot/getting-started-with-github-copilot)
【参考】：[GitHub Copilotが新しいAIモデルと新機能を搭載](https://github.blog/jp/2023-02-21-github-copilot-now-has-a-better-ai-model-and-new-capabilities/)

GitHub Copilot for Businessは、GitHub Copilotを利用する企業向けアカウントです。企業向けに組織のアクセス権の設定を、個人とチームに対して行うことができます。企業向けのポリシー設定などにも対応します。料金は、1ユーザあたり月に19USドルで利用することができます。

今回のアナウンスにより、*GitHub Copilot for Businessのすべての契約ユーザはGitHub Copilot Chatのパブリックベータ版の利用が可能となります。*

【参考】：[GitHub Copilot for Business について](https://docs.github.com/ja/copilot/overview-of-github-copilot/about-github-copilot-for-business)

GitHub Copilot for Individualsとは、GitHub Copilotを利用する個人向けアカウントです。企業で求めるポリシーの管理などには対応しませんが、エディタを使った操作自体には企業向けと大きな違いがありません。利用するには、月当たり10USドル、または年間100USドルのサブスクリプションが選択できます。

現在、GitHub Copilot for Individuals向けには、GitHub Copilot Chatの利用が許可されていませんが、限定的なパブリック ベータ版に参加するための待機リストに登録することができます。*このベータプログラムの参加が許可された場合は、GitHub Copilot Chatを先行利用できる場合もあります。

【参考】：[GitHub Copilot for Individuals について](https://docs.github.com/ja/copilot/overview-of-github-copilot/about-github-copilot-for-individuals)

*GitHub Copilot Chatを使うには、Visual StudioあるいはVisual Studio Codeのいずれかの統合開発環境（IDE）に、拡張機能をインストールして使用します。*GitHub Copilot Chat は、限定パブリックベータであり、有効なGitHub Copilot for Businessのライセンスが必要です。

【参考】：[GitHub Copilot Chat を使う](https://docs.github.com/ja/copilot/github-copilot-chat/using-github-copilot-chat)

### GitHub Copilot Chatのポリシー設定

*GitHub Copilot for Businessのアカウントでは、OrganizationまたはEnterpriseでGitHub Copilot Chatを有効化して使用します。*

設定するには、プロファイルから「Your organizations」で「設定」「ポリシー」から「GitHub Copilot Chat ベータ」から「許可」を選択します。あるいはEnterpriseのアカウントのサイドバーから「ポリシー」「Copilot」「GitHub Copilot Chat ベータ」のドロップダウンメニューで「許可」を選択します。

### 統合開発環境への拡張機能のインストール

*統合開発環境（IDE）でGitHub Copilot Chatを使うには、拡張機能のインストールが必要です。*Visual Studioからは、「拡張機能」「拡張機能の管理」から「Visual Studio Marketplace」を選択し、「GitHub Copilot Chat」を検索し「ダウンロード」します。

Visual Studio Codeでは、アクティビティバーの「拡張機能」アイコンをクリックし、「Marketplace の拡張機能の検索」で「GitHub Copilot Chat」を検索し「インストール」します。

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介

*GitHub Copilot Chatの基本操作は、チャットインターフェースと呼ばれるプロンプト領域に質問するだけです。*質問はコーディング関連に限定して解釈され、回答が生成されます。使ってみると、日本語の質問も受け付けられることがすぐにわかります。

入力したプロンプトは前処理後、大規模言語システムに送信されます。送信されたプロンプトは学習済みCopilot Chat言語モデルにより、分析を行います。回答はコーディング開発の生成コード、コードの提案、コードの説明などの形式で生成されます。回答は書式設定の後にウィンドウに表示されます。

AIプロンプトとは？概要からプロンプト記述の最適化まで解説！

*GitHub Copilot Chatは、ベータ版であり制限があります。*現状では、適応範囲が限定されており、小規模なコードなどに利用します。大規模で複雑なコード開発では不具合の発生や、パフォーマンス上の問題が高まりますので、結果を確認しながら進めると良いでしょう。

同様にセキュリティソフトウェアの開発などには、機密情報や脆弱性の観点でリスクを想定しておきます。生成コードの不正確さや、コーディング支援の回答の正確性に関しても、まだ問題を含むことを前提に開発支援に使用するのがおすすめです。

【参考】：[GitHub Copilot Chat の制限事項](https://docs.github.com/ja/copilot/github-copilot-chat/about-github-copilot-chat#github-copilot-chat-%E3%81%AE%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85)

## GitHub Copilot Chatを使って開発生産性を高めましょう

GitHub Copilot Chatは、最初のAIベースペアプログラミング環境です。GitHub Copilot Chatの登場により、チャットインターフェースに対応します。今後は、GitHub Copilot Xのすべての機能が一般提供される予定です。まずは、*このGitHub Copilot Chatを使って、開発生産性の高さを実感することをおすすめします。*

「GitHub Copilot X」が発表！開発者を支える新技術

GitHubは2023年7月20日、AIチャットシステムの「GitHub Copilot Chat」をGitHub Copilot for Businessを利用するすべてのユーザで利用可能とすることを発表しました。ここでは、その概要から利用方法まで解説していきます。

「GitHub Copilot Chat」は、GitHubが提供するAIチャットシステムです

GitHub Copilot for Businessの全ユーザ向けに、限定パブリックべータ版として提供されます

チャットインターフェースにより、ソフトウェアの開発生産性向上が期待できます

「GitHub Copilot Chat」ベータ版が利用可能に。基本の使い方を解説！

**Three.jsとは、JavaScriptを介して3次元コンピュータグラフィックス（CG）を描画するJavaScriptライブラリを指します。**HTML5の規格に従っており、ウェブブラウザ上で簡単に2次元や3次元のグラフィックスに対応します。

Three.jsは、ウェブの標準技術の上に実装されているため、主要なウェブブラウザ上でプラグインを追加することなく、そのまま利用することができます。またWebGLという3Dグラフィックス APIをラッピングしており、簡素なコードで手軽に3次元コンピュータグラフィックスを描画することができます。

*分かりやすく言うとThree.jsは、これまで複雑な処理や手法が必要であった3次元コンピュータグラフィックスを、専門知識を持たずに直観的に使用できる優れたソフトウェアと言えます。*

*JavaScriptは、ウェブアプリの開発に用いるオブジェクト指向スクリプト言語です。*HTML（HyperText Markup Language）と連携するため、DOM（Document Object Model）APIを使用してウェブブラウザからバックエンドまでのウェブアプリケーション全般に対応します。

言語仕様は、ECMAScriptとして標準化されており、非常に汎用性が高いプログラミング言語です。

【参考】：[ECMA-262 ECMAScript® 2023 language specification](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/)

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

*JavaScriptライブラリとは、JavaScriptを用いたアプリケーション開発をより効率的に行うために、あらかじめ用意されたソフトウェア群を指します。*JavaScriptの画面出力などの統一性を持たせるなどの場合に、共通のJavaScriptライブラリを用いると効果的です。

JavaScriptの代表的なライブラリとしては、jQueryやReactがあります。そのほか、Vue.jsやAngular JSなどのJavaScriptフレームワークも公開されており、多くのユーザに利用されています。

【参考】：[jQuery](https://jquery.com/)
【参考】：[React](https://react.dev/)
【参考】：[Vue.js](https://vuejs.org/)
【参考】：[Angular](https://angular.io/)

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

jQueryとは？特徴・できること・導入方法・使い方を解説！

### そもそも3次元コンピュータグラフィックスとは

*3次元コンピュータグラフィックスとは、3次元の立体的な仮想的な物体を、コンピュータで演算することで平面上に奥行きや質感のある画像を表す手法を表します。*用語が長いので、3DCGと呼ぶ場合もあります。

従来は、大型計算機などの演算能力が必要でしたが、プロセッサの性能向上とGPUと呼ばれるグラフィックス専用プロセッサが、一般化されたことで高性能化が可能となり、誰でも3D画像を作成することが可能となりました。このことから、物性シミュレーションや3Dゲームなど多方面で利用されています。

*WebGLとは、Web Graphics Libraryの略で、OpenGL ESベースの低レベル 3Dグラフィックス API を指します。*HTML5に実装されるCanvas要素上で、画像処理や画像効果などをGPUアクセラレータを用いてグラフィックス表示できる特徴があります。

WebGLは、多くの主要ブラウザベンダーにより策定されており、Apple SafariやGoogle Chrome、Microsoft Edge、Mozilla Firefoxなどのウェブブラウザで、プラグインなしに3D描画が可能となります。

【参考】：[WebGL LOW-LEVEL 3D GRAPHICS API BASED ON OPENGL ES](https://www.khronos.org/webgl/)

*OpenGL ESとは、OpenGL for Embedded Systemsの略で、モバイルデバイスなどの組み込み用3次元コンピュータグラフィックス APIを指します。*従来よりデスクトップ環境で使用される、OpenGLのサブセットです。

OpenGL ESは、プレイステーション3やニンテンドー3DSの他に、iOSやAndroidでも採用されています。GPUアクセラレータのようなグラフィックスハードウェアをサポートしますので、簡単に3次元コンピュータグラフィックスの高速描画に対応させることができます。

【参考】：[OpenGL ES Overview](https://www.khronos.org/opengles/)

*Three.jsを使用することで、ウェブ上に簡単に3Dコンピュータグラフィックスを表示することができます。*

Three.jsは、プラットフォームに依然せずに相互に実行可能なアプリケーション開発を目指して、 Adobe Flashの環境からJavaScriptに移行したことから、現在の利用拡大に繋がっています。ドキュメントの多くは日本語化されており、順に確認すると良いでしょう。

【参考】：[Three.jsの基礎知識](https://threejs.org/manual/#ja/fundamentals)

Three.jsの主要機能としては、*メッシュ（網目）やマテリアル（材質）、テクスチャ（質感や模様）、スキン（皮膚）、スケルトン（骨格）、アニメーション（フレーム再生）、ライト（光源）、カメラ（仮想カメラ）などがあります。*

この他にも、エフェクト（効果）や、平面・立方体・球体・トーラス・3Dテキストなど、3DCG作成に必要となる機能がカバーされています。

【参考】：[Three.jsのプリミティブ](https://threejs.org/manual/#ja/primitives)

Three.jsのインストールには、2つの方法があります。

*1つ目は、npmの利用です。*Three.jsのインストールツールは、npmが推奨されています。npmは、JavaScriptのパッケージ管理システムです。サーバーサイドJavaScript環境であるNode.jsのパッケージ管理システムとしても、用いられています。

npmからThree.jsをインストールするには、”npm install three”を実行します。

*2つ目は、CDNや静的ホスティングからインストールする方法です。*ここでは、サイトに格納されている”three.module.js”を指定して、”import”時に利用します。

ライブラリの読み込みは、次のように行います。

&lt;script type="module"&gt;
    import * as THREE from 'three';
    const scene = new THREE.Scene();
&lt;/script&gt;

【参考】：[Three.js Installation](https://threejs.org/docs/index.html#manual/ja/introduction/Installation)
【参考】：[npm](https://www.npmjs.com/)
【参考】：[Node.js](https://nodejs.org/ja)

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

### Three.jsで最初に何かを表示する

*Three.jsで最初に何かを表示するには、シーン（scene）、カメラ（camera）、レンダー（renderer）の3つが必要です。*

シーンは、状況が描写されている映像のオブジェクトで、”THREE.Scene()”を使います。カメラは、シーンを描画するときに、何が見えるか決定する仮想のカメラで、”THREE.PerspectiveCamera()”などいくつかの種類があります。

レンダーは、カメラのアングルに基づいて演算処理し描画するもので、”THREE.WebGLRenderer()”を使います。

*Three.jsで扱うデータ形式は、FBX、Collada、OBJなどに対応しますが、glTF（GL Transmission Format）が推奨されます。*推奨する理由は、データの変換やロードが高速であるためです。「.GLB 」と「 .GLTF」のフォーマットに対応します。

【参考】：[Three.js Loading 3D models](https://threejs.org/docs/#manual/ja/introduction/Loading-3D-models)

### Three.jsのサンプルを確認する

*Three.jsでは、多くのサンプルをサイトに公開しています。*最初は、プログラミングに慣れるためにも、まずは公開サンプルを操作して使い方を学ぶのが良いでしょう。150以上のサンプルコードも掲載されています。

【参考】：[Three.js exapmles](https://threejs.org/examples/#webgl_animation_keyframes)

以下のサイトでは、Webpackを使ったサンプルや、初心者向けサンプル集もリンクが掲載されています。興味に応じて確認することをおすすめします。

【参考】：[Three Seed Online Demo](http://edwinwebb.github.io/three-seed/)
【参考】：[Three Seed Official](https://github.com/edwinwebb/three-seed/)
【参考】：[Three.js Examples](http://stemkoski.github.io/Three.js/index.html)

## Three.jsの概要が理解できたら実際に使ってみよう

サンプルを見ると、徐々にThree.jsでできることが分かってきます。マウス操作で簡単に3次元の画像を回転させるなど、高速描画には驚かされます。Three.jsのサンプルコードを実際に試してみることをおすすめします。**このような3次元処理は、実際に自身の環境で操作させてみるとより理解が深まるでしょう。**

Three.jsとは、これまで複雑な処理や手法が必要であった3次元コンピュータグラフィックスを、直観的に使用できるJavaScriptライブラリを表します。ここではThree.jsの概要と、それを支えるJavaScriptの関連技術を合わせて解説していきます。

Three.jsとは、3次元コンピュータグラフィックスを、簡単に使用できるJavaScriptライブラリを表します

Three.jsは、専門知識を持たずに直観的に使用できるメリットがあります

HTML5の規格に従っており、ウェブブラウザ上でプラグイン不要で利用することができます

Three.jsとは？概要やできることをJavaScript関連技術を含めて解説

## Java Silverの勉強方法が分からない人は多い

Java Silverを取得したいものの、勉強方法が分からない方は多いのではないでしょうか。Java Silverは過去問が公開されていないため、何を基準に勉強すれば良いか迷う場合もあるでしょう。人によっては、Javaのすべてを勉強しないといけないのでは？と考えてしまう場合もあるかもしれません。

Javaは長年に渡り活躍し続けた言語のため、多くの機能追加やライブラリ開発が行われています。そのため、最初から最後まで勉強すると多くの時間がかかってしまいます。*Java Silverに合格することを目先の目標とするなら、勉強範囲をできるだけ絞った方が良いでしょう。*

## Java Silverは問題集を中心に学習すると良い

Java Silverは過去問が公開されていませんが、専門の問題集が販売されているため、それらで試験範囲を確認して学習するのが効率的です。問題集を繰り返し解き、完璧に理解できるようになれば、Java Silverに合格できるレベルの知識を身につけることができます。

**複数の問題集を購入するよりも、1〜2冊をやり込んだ方が学習が散漫になりにくいためおすすめです。**具体的にどの問題集が良いかについては、後ほど詳しく紹介します。

<center>[エンジニア転職を成功させるため<br/>ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)</center>

## Java Silverに向けて勉強する前に知っておきたいこと

ここでは、Java Silverに向けて勉強する前に知っておきたいことについてまとめました。Java Silverの出題範囲やJavaエンジニアの年収について解説します。

公式サイトを元に、Java Silverの出題範囲についてまとめました。

- Javaテクノロジと開発環境についての理解
- 簡単なJavaプログラムの作成
- Javaの基本データ型と文字列の操作
- 演算子と制御構造
- 配列の操作
- クラスの宣言とインスタンスの使用
- メソッドの作成と使用
- カプセル化の適用
- 継承による実装の再利用
- インタフェースによる抽象化
- 例外処理
- モジュール・システム

*全体を通して、Java文法やオブジェクト指向に関する理解が十分か確かめられます。*詳しい出題範囲に関しては、Java Silver専門の問題集を確認すると良いでしょう。

【参考】：[Java SE 11 Programmer I (1Z0-815-JPN) 試験 | オラクル認定資格制度 | Oracle University](https://www.oracle.com/jp/education/certification/1z0-815-jpn-48261-ja.html)

Javaエンジニアに絞った年収情報はないため、参考としてJavaを活用するプログラマーの平均年収のデータを記載します。

プログラマーの年収は「マイナビエージェント 職種図鑑」での平均年収は344万円、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のSE・プログラマ（ソフトウェア製品の開発・実装）を参考にすると、平均年収568万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、マイナビの調査では民間企業平均年収よりもやや低く、経済産業省ではやや高いという結果が出ています。

一口にJavaエンジニアといっても、勤める企業や本人の技術力などによって年収には差があります。**Java Silverを取得しスキルアップを図ることは、年収を上げるための第一歩と言えるでしょう。**

【参考】：[マイナビエージェント 職種図鑑](https://mynavi-agent.jp/it/jobindex/05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)
※【平均年収 調査対象者】2020年1月～2020年12月末までの間にマイナビエージェントサービスにご登録頂いた方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)

ここでは、Java Silverの出題内容に合わせた勉強手順を解説します。この手順に沿うことで、無理なく試験対策を行えるでしょう。また、Java Silver対策におすすめの問題集も2冊紹介します。

まずはJavaの開発環境を構築する必要があります。Javaの文法を1から学習する場合、自分でソースコードを書いて実行結果を確認してみる方が記憶に定着しやすく、効率的なためです。他言語を経験している方なら、1時間程度で開発環境を構築することができます。

*Javaの開発環境を構築する際は、なるべく最新の情報を参考にすることをおすすめします。*インストーラーの仕様が変わるなどして、構築方法が昔と少し変わっている可能性もあるためです。

続いて、Javaの基本文法を習得していきましょう。四則演算や条件分岐、ループ処理などはもちろん、classの作成やカプセル化などオブジェクト指向関連も学ぶ必要があります。

**Javaの基本文法に関しては、学習サイトを使って習得するのが効率的です。**今はネットでプログラミングを学べる便利なサイトが多くあります。**おすすめのJava勉強サイトについては、こちらの記事で紹介しています。**

Javaを効率的に独学で学習する方法とは？おすすめの勉強方法を紹介

### 「オラクル認定資格教科書 Javaプログラマ Silver SE11」で勉強する

Javaの基礎が固まったらJava Silver対策を取っていきましょう。おすすめは「オラクル認定資格教科書 Javaプログラマ Silver SE11」です。*本書はJava Silverの試験範囲の要点が初心者にもわかりやすく解説されています。*

本書で試験範囲を確認しつつ、Javaのスキルを高めていきましょう。

▪著者：山本 道子
▪ページ数：560ページ
▪出版社：翔泳社
▪発売日：2019/11/18

【参考】：[オラクル認定資格教科書 Javaプログラマ Silver SE11](https://www.shoeisha.co.jp/book/detail/9784798162041)

### 「徹底攻略Java SE 11 Silver問題集」で勉強する

仕上げに「徹底攻略Java SE 11 Silver問題集」を購入すると良いです。本書にはJava Silverの練習問題が多く掲載されています。**1問ごとに深く解説がされており、解説を読み込むことで試験合格へと着実に進むことが可能です。**

▪著者：志賀 澄人
▪ページ数：608ページ
▪出版社：インプレスブックス
▪発売日：2019/10/18

【参考】：[徹底攻略Java SE 11 Silver問題集](https://book.impress.co.jp/books/1118101186)

Javaを本で学ぶ！独学におすすめの参考書6選と選び方を紹介

## Java Silverの資格を活かせる仕事

資格を通じてキャリアアップを図りたいと考える方も多いのではないでしょうか。ここでは、Java Silverの資格を活かせる仕事についてまとめましたので、今後のキャリアを考える参考にしてください。

### システムエンジニア（業務系）

Javaは特に業務系システムで使われている言語です。Java Silverを取得することで、業務系のシステムエンジニアへのキャリアアップを視野に入れることができます。

*プログラマーを何年か続けており、そろそろシステムエンジニアにキャリアアップしたい方にもJava Silverはおすすめです。*

言語・開発の記事（64ページ目）