SlideShare a Scribd company logo
Vue.js&Node.jsによるSPA開発
ワークショップ
-REST、テスト、TypeScript-
受講後の情報共有等
概要
以下公式サイトのリンクにある通り SPA のシステム構築に関わる技術に関して3
日間を通して学べるという様な研修。(以下公式サイト参照)
https://www.casareal.co.jp/ls/service/openseminar/html/s180
大枠として以下の様な日程
・1日目: Vue3.0 の基礎に加えて ESLint や prettier など
・2日目: Vue の演習及び Express の基礎
・3日目: Vue + Express の形でのアプリ開発の演習及び jest について
受講目的
・SPA のシステムの構築について体系的に学び直したい
(開発経験自体はあれど細かい部分我流な所も無きにしも非ずという感じのため・・)
他の受講者に関しても同様の受講理由の様でしたが、中には javascript 自体殆ど経験が無い
という参加者の方もいました。
参考として こちら にある通り前提として以下の様な人を対象にしているようですが経験が
無くてもフォローして頂けているようでした。
■ Vue.jsを使って簡単なアプリケーションを作成できる方
■ Expressを使って簡単なアプリケーションを作成できる方
Day 1
主に以下のような内容
・TypeScript の基礎
・Vue.js の基礎(Vue3 対応)及び練習
Vue Cli で雛形を作成する部分からフロントのみで簡単なアプリケーションの実装まで実施。
(この段階では API は Mock)
良い点 → ESLint や prettier の詳細な設定についてまで学ぶ事ができた
気になった点 → 基本の説明が長い印象。受講対象がある程度の基礎がある人を対象との記載
があったためもう少し踏み込んだ内容をメインにして欲しかった気も。
Day 2
・Vuex の基礎と設計について
・Atomic Design
・Express の基礎と演習
Express について個人的には使用経験が浅く基礎的な部分が学べたのはありがたかった。
他の Node.js フレームワークとの比較のうえ Express の特徴や自由なアーキテクチャについて
知る事ができた。
また現プロジェクトでも使用している Atomic Design についても軽くだが説明があった。
Day 3
・フロント Vue.js と API側 Express を実際に用いて簡単なアプリケーションの作成演習
・jest を用いたテストについて
1日目、2日目で学んだ事のアウトプットが出来る時間を長くとる事ができた。
実装をする中で改めて確認したい事等講師の方と直接コミュニケーションを取りながらコーデ
ィングを行う事ができたため細かい部分まで学ぶ事ができると感じた。
全体の感想
TypeScript を用いたアプリケーション開発を一から総合的に学ぶ事が出来る良い内容だと思い
ました。個人的には基礎知識がある人が対象参加者となっていたため、もう少し基礎的な内容
を省いた上で演習や応用的な内容に当たる部分の時間を多くとって欲しいという気もしました
が、この研修さえ受けておけばこれらの技術を用いたプロジェクトにメンバーとしてアサイン
できるのではないか、と感じました。
コロナ渦という事もあり受講者は 3 人という小規模でしたがおかげで随時講師の方とコミュニ
ケーションを取る事ができ学べる事も多い印象でした。
余談ですが偶然にも講師の方は来年度の弊社新人研修を担当してくれる事になった方の様でし
た。自分の頃は無かったので新人時代にカサレアルさんの研修を受けられるのは羨ましい限り
です。

More Related Content

Similar to 研修受講後情報共有

Vue.jsスロットの近代史
Vue.jsスロットの近代史Vue.jsスロットの近代史
Vue.jsスロットの近代史
fuku68
 
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
好洋 山崎
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるdavid9142
 
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
慎一 古賀
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう Shuhei Iitsuka
 
第2回勉強会
第2回勉強会第2回勉強会
第2回勉強会
Mugen Fujii
 
クラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれクラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれMasataka MIZUNO
 
○○をAWSで作るにはどうすればいい? ~ 構築例とアーキテクチャ図を添えて
○○をAWSで作るにはどうすればいい?  ~ 構築例とアーキテクチャ図を添えて○○をAWSで作るにはどうすればいい?  ~ 構築例とアーキテクチャ図を添えて
○○をAWSで作るにはどうすればいい? ~ 構築例とアーキテクチャ図を添えて
mokomoko9
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
 
サービスリリースから安定軌道に乗せるまでに行った開発施策
サービスリリースから安定軌道に乗せるまでに行った開発施策サービスリリースから安定軌道に乗せるまでに行った開発施策
サービスリリースから安定軌道に乗せるまでに行った開発施策
Keiichi Hagiwara
 
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
de:code 2017
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
 
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
 
CloudSpiral 2014年度 Webアプリ講義(1日目)
CloudSpiral 2014年度 Webアプリ講義(1日目)CloudSpiral 2014年度 Webアプリ講義(1日目)
CloudSpiral 2014年度 Webアプリ講義(1日目)
Shin Matsumoto
 
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
miso- soup3
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
Akira Inoue
 
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web ServiceSpring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
WataruOhno
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~normalian
 

Similar to 研修受講後情報共有 (20)

Vue.jsスロットの近代史
Vue.jsスロットの近代史Vue.jsスロットの近代史
Vue.jsスロットの近代史
 
JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?JavaScriptフレームワーク入門にVue.jsはいかが?
JavaScriptフレームワーク入門にVue.jsはいかが?
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
 
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップASP.NET SPA開発をはじめよう~今と未来とステップアップ
ASP.NET SPA開発をはじめよう~今と未来とステップアップ
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
 
第2回勉強会
第2回勉強会第2回勉強会
第2回勉強会
 
クラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれクラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれ
 
○○をAWSで作るにはどうすればいい? ~ 構築例とアーキテクチャ図を添えて
○○をAWSで作るにはどうすればいい?  ~ 構築例とアーキテクチャ図を添えて○○をAWSで作るにはどうすればいい?  ~ 構築例とアーキテクチャ図を添えて
○○をAWSで作るにはどうすればいい? ~ 構築例とアーキテクチャ図を添えて
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
 
サービスリリースから安定軌道に乗せるまでに行った開発施策
サービスリリースから安定軌道に乗せるまでに行った開発施策サービスリリースから安定軌道に乗せるまでに行った開発施策
サービスリリースから安定軌道に乗せるまでに行った開発施策
 
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
 
React VR ことはじめ
React VR ことはじめReact VR ことはじめ
React VR ことはじめ
 
Windows Azure PHP Tips
Windows Azure PHP Tips Windows Azure PHP Tips
Windows Azure PHP Tips
 
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
 
CloudSpiral 2014年度 Webアプリ講義(1日目)
CloudSpiral 2014年度 Webアプリ講義(1日目)CloudSpiral 2014年度 Webアプリ講義(1日目)
CloudSpiral 2014年度 Webアプリ講義(1日目)
 
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
 
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web ServiceSpring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 

Recently uploaded

This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 

Recently uploaded (9)

This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 

研修受講後情報共有