
ES6文法と組み合わせたモダンJavascript(JavaScript)高度なPart.3
usefulit
¥5,179
中級以上 / JavaScript, ES6
4.6
(33)
JavaScriptプログラミング言語を最新のES6文法で学習するように企画されたコースです。
中級以上
JavaScript, ES6
いつまで箱や球体を回転させることばかり学んでいるのですか。森を見ず木ばかり見ても、思考は広がりません。 完全な初心者から脱出し、実務に応用可能で、最近注目されているデジタルツインの一端を担うThree.jsのパワーを体感してください。ホームページでくるくる回す用途ではなく、業務に適用できるレベルです。 製造、国防、災害、輸送分野など、関連モデル(glb, glTFなど)の制作能力を身につければ、ドメイン専門性が一層アップグレードされます。 個人および会社サーバー向けのOn-Premises用Node.js(Express) および Nest.js 各サーバーも開発します。 本講座を少し変形するだけで、パワフルなサービス制作と合わせて、IT人材として生まれ変わることができるでしょう。皆さん、ひるまずに挑戦してください。そんなに難しくありません。^^


Three.jsを活用して都市を作成、保存、開きます。保存はバイナリ形式です。(容量: 数百Bytes~2KB程度、可読性: なし)
多言語(ハングル、英文、日本語など)もバニラJavaScriptで開発しており、他のWebプロジェクトでも使用可能です。(Web標準規約に準拠しています)
開発後、Viteを活用したビルドとGulpでCSS圧縮スクリプトを作成し、圧縮されたmin.cssをビルドされたindex.htmlに自動置換します。また、package.jsonに適用すれば、一発でビルドとNetlifyへのデプロイまで完了します。
開発完了・ビルド後、Gitコミット・Netlifyパブリッシュを経て、自分だけのサイトが完成。 修正・加筆時には自動デプロイが適用されます。
成果物をOn-Premisesで実行するための、自分だけの簡単なNodeサーバーと最新トレンドのNestサーバーを開発します。
最終的に CSSも全てを説明して、これまでに開発したコードについて最適化をしてみます
答えはThree.jsにあります。都市モデル、製造工程モデル、災害モデルなど、Digital-Twin、VRなど多くの分野で実装するための技術がThree.jsです。
本講義ではほとんどThree.jsのみ 3Dサービスを作成し、Gitと連携してNetlifyに自動的に配布され、独自のサイトを無料で保有します。もちろん、ドメインがあれば接続するだけです。
個人および会社のサーバーで実行するため Node.js サーバーと Nest.js サーバーの 2 つを開発します。
多言語サービスが必要な場合は、重いライブラリを注入するのと同じようにして、独自の多言語モジュールを使用してください。すべてのWebプロジェクトに適用(Web標準に準拠)可能です。(セクション4から多言語でコーディング)
基本的な文法に従って、以下の例にのみ時間を費やすよりも完成したものと逆に学習してください。そして私の関心事のものに修正、改善、適用してみてください。
インストラクターだけをコーディングしないように自分で手コーディングしてください。
📌このトピックの Three.js は、学習する必要のあるクラス中心の実装開発を提供します。
📌 Gitにソースを管理し、Netlifyと連動して無料サイトにリアルタイム反映サービス可能です。
📌軽すぎる多言語モジュールを直接作成して適用し、他のWebプロジェクトに適用できます。
📌 On-Premises 運用が必要な方のための Node.js と Nest.js ベースの Express サーバーを提供します。
💡 Three.js + i18n(Internationalization) + Node.js & Nest.js Server & Git/Netlify.
文法勉強、従う用途ではなく、実務適用可能で、面接審査委員も驚くクールなポートフォリオ
Three.jsに基づいていますが、実際のWebサービスを提供するためのFullstack Semiコースを提供します

Three.jsでオブジェクトだけを作ったのですが、それ以降は気になった方?
2/3Dみんな良いですが、これをどこにどのように書くべきでしょうか。毎回BoxGeometry回転するのがほとんどですが、どこに活用しますか?
Three.js入門者/IT社員

Three.jsの保存/オープン方法は?
new THREE.Scene() オブジェクトを toJSON() すればよいですか?その後、どのようにオープンして見せますか?容量は膨大で(数十〜百M / GB)、またはMaximum callエラー😰
Three.js開発者/IT代理店

Webの最初から最後まで気になる?
Three.jsの方が良いとは言えませんが、単純なフルスタックはありませんか? Node.jsは何ですか、Nest.jsは何ですか?簡単に実装するか、不明ですか? ThreeJSでのみWeb実装になりますか?気になる方
Web-フロント開発者/コンピュータ室代理店
Three.jsを活用して、glb、glTF、および汎用Loaderベースのオブジェクトを拡大して独自のソリューションを作成できます。
多言語をサポートしてLinkedinなどにポートフォリオを上げても肩に大変です。
フルスタックでログイン/アウト処理するだけで、期待以上の投資を含む多くの提案を受けることができます。
Three.jsをホームページ用途以上に企画し、デジタルツインメーカーにポートフォリオを提出、退職してください
自信を持ってマニュアルをもう少し見て基礎を取ります。あなたの年俸は上昇します。
Windows (11) ベースで説明します。開発はmacOS(12)、window11ともテストしました。
Cursor : 0.49.6 (winSurf: 25% 安い, Vscode: とても安い, cline: Good)
ThreeJS: r176
Node.js:v22。 15 .0 LTS & v22.15.0 (ncu, ncu -u, npm i ; 教育を受けた方は? 😃 )
Nest.js: v11.1.1 (@nestjs/core)
セクション別進行プログラムの授業資料と授業ノートで提供します。
練習環境
オペレーティングシステムとバージョン(OS)
-.Front-End: Chrome b
rowser サポート OS
-.Back-End:Node対応OS
使用ツール:Git、Netlifyはすべて無料です(Netlify有料もあります)
選手の知識と注意
JavaScriptの基本は必要です。
Three.js入門レベルは必要です。
質問/回答はASAPまたは3日以内を目指しており、現在のカリキュラムのThree.jsバージョンを毎週最新のものにします。完全な改訂ではなく、役に立つ改訂および追加モジュールは、更新後に通知されます。
レッスンや学習資料の著作権は複製、類似レベルの再販売、Git Publicの公開は不可です。つまり、 Git Privateや皆さんの製品に入れて変更、活用、配布などはすべて可能です。
(皆さん製品に使用した場合は販売可能で、売上が多ければ寄付もたくさんしてください。.^^ )
一部の授業映像は音質が均一でない点、受講の際は参考にお願いします。
学習対象は
誰でしょう?
Three.jsやJSの基礎だけよりも、実務で即応用可能なソースをもとに学習・応用・発展させたい方
3Dはあらゆる分野に応用可能で、最近流行しているメタバース、デジタルツイン、AR、VR、ML、DLなどの可視化分野で差別化を図りたいエンジニア
一般的な FEツールだけではもう差別化が難しいと感じている方
前提知識、
必要でしょうか?
JS、Three.jsの基礎があると良いです。無くても大変ですが、不可能ではありません。リバースエンジニアリング(逆行工学)方式として、既にレベルの高い完成モジュールを逆に解釈・理解する方法論もあります。
長い間、技術の変化に対応しながら過ごしてきた時間が多いため、これまでに培った技術と経験を初・中級者の方々に微力ながら提供し、共に急速な成長を目指していきたいと考えています。
DB Modeling, C/S & Web フルスタック開発者
ウェブサイト https://iam-work.com/#top
YouTube https://www.youtube.com/channel/UCBiU3IgXYAQHK1tUMXq3isQ
-.Mono-Repo (Turbo: "^2.3.4"), FCM(Firebase Cloud Message), WebHook, Redis, MQTT
-. MUI-X, Material-UI など Next & React エコシステムの UI
-.OCR(Naver), RIMS, Popbill, SNS Login(Google,Naver,Kakao)
-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,
D3, Three (WebGL), C2i: 青瓦台納品 BI チャート, echarts, Vuetify, Quasar, Telerick(Progress)
IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...
-.Leaflet.js, Cesium.js, Daum & Naver 地図
-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net
-.Node, Nest, Spring Boot, Docker, Git, pm2
-.AWS, Azure, nCloud(Naver)
-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase
-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,
-.TensorFlow, Keras, ScikitRun, LangChain
-.シティ・ワウ(City-Wow): 国土、国防、公共および病院、製造企業などの3Dシミュレーションおよび
リアルタイムモニタリングサービス ('23.10 ~ 現在; Three, Vanila.js)
-.SeeU(シーユー): 業種別ビデオチャットサービス(病院、製造..)(Google Meet + クロマキー、STT & TTS Chatting)
('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.サーベイ・ワウ(Survey-Wow): Googleフォーム、MSフォーム、ネイバーフォームのアンケート結果を簡単に分析し、
共有するデータ分析ウェブサービス ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)
-.データ・ワウ(Data-Wow): xls, json, csv, API連携など公共データの自動分析・可視化
('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - 行安部公共データ表彰
-.DDMV(Data-Dam Multi-Dimensional Vis-): データダム多次元探索的視覚化分析サービス
('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - 仁川市公共データ賞 受賞
-.C2i(Chart Intelligence Insights) チャートコンポーネント: チャートギャラリーメニュー
BIベースのチャート (with D3.js): '15.04 ~ 現在 ; D3.js(v3.3 ~ v7.9) ベースのBIパターンのチャートソリューション
(文在寅政府雇用ダッシュボード青瓦台納品、モンゴル財政管理国策プロジェクト納品。多言語対応)
-.(株)カジュアル・インサイト (Casual-Insights) CTO
-.元 KISTI 研究員
-.元 LG-CNS Oracle Modeler, DBA & 主任研究員
-.元 極東(現代)石油 電算室 社員
**. データダム多次元可視化-.総合紹介(必須) : https://youtu.be/noZ9H7wftsI
-.消費商圏-I(必須:百貨店売場POSデータ - 一般製造流通業者) : https://youtu.be/ArL-Pv3U-40 -.消費/商圏-II (韓国KDX、食神データ提供): https://youtu.be/Wcpu29gI53Y
-.保健医療 (韓国 KDX、オンヌリH&Cデータ提供): https://youtu.be/I8WBqAFp9L4-
.公共データ(京畿道華城市役所公共データ提供):https://youtu.be/2QCw_6aeRVE
*.D3 & ThreeJS チャートギャラリー :https://gregory-han.github.io/chart/
全体
35件 ∙ (17時間 32分)
講座資料(こうぎしりょう):
1. 全体講義の紹介
28:04
2. 講義目標と成果
11:32
3. 講義準備と初期設定
11:50
4. プロジェクトフォルダの設定
02:40
5. 基本に従ってください
06:15
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥5,225
25%
¥6,965