close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー ソフトウェア・レビュー ライフハック 新しい働き方 エクササイズ ビジネスモデルキャンバス 状況認識 ストレス 必須コマンド Web 今日わかる きほん 状況把握 意思決定 心の健康 IT書籍 書籍紹介 営業マン 類推法 クラス プロセス指向 PdM 共用 ウェビナーレポート 地方創生 GraphQL CSS OWASP ZAP セキュリティマネジメント 問題解決 ソフトウェア 新技術 雑談力 テスト見積もり Scala Go Rust Relay Cloud AI Kaggle ITエンジニア フレッシャーズ 経営戦略 事業戦略 マインドフルネス 基本情報技術者試験 ニューノーマル プロジェクト会議 メソドロジ 講師インタビュー システム障害 販売管理システム VMware セキュリティ事例 ケーススタディ インターネット通信 ビジネスマン 品質向上 提案 ロジック図解術 バーチャルマシン 対策事例 アスリート 国の動向 アンチパターン リモートアクセス 脳ヨガ 自律神経 整え方 組み立て方 コミュニケーション術 リーダー 新人 知っておきたいこと 対人能力 洞察力 一文作成 サッカー業界 グループワーク マネジメント手法 IT業界 Octave セキュリティ管理 IT ネットワーク機器の特徴 ネットワーク機器の仕組み 基本のキ プレゼンテーションの組み立て方 伝え力 試験合格後 時短術 作成のコツ 導入事例 メンタルマネジメント メンタルヘルスケア DXプロジェクト プログラミング教育 プログラミング的思考 子供向けプログラミング データ定義言語 DDL モダンWebアプリケーション ドキュメント作成 Docker Compose Docker Hub AR VBAエキスパート試験 Azure メディア掲載 サーバーアーキテクチャ データ操作言語 DML NewSQL ソフトウェアセキュリティ 数学 VR アパレル業界 Kubernetes Power BI Android プロダクトオーナーシップ プロダクトオーナー 内製化 情報システム部門 Z世代 クラウドネイティブ 技術教育 Windows server 2019 XSS CSRF クリックジャッキング ビジネスパーソン VPC IAM AWS Fargete ECS 問題発見力 問題分析力編 Access 流通業界 金融業界 ネットワーク設定 トラブル対応 評価 ソフトウェア品質 クレーム対応 呼吸法 戦国武将 エンジニアリング 組織論 SpreadSheet GAS ゼロトラスト Express 3D Arduino 業務分析法 業務構造 経営者 ストレングスファインダー 発注者視点 情報セキュリティ 顧客体験 エンターテインメント お笑い オンライン学習 オンライン教育 学校教育 情報化社会 スポーツ デジタル戦略 ITフェスティバル GoogleSpreadSheet GoogleAppsScript(GAS) SQL 問題分析力 メタバース NFT 資産形成 資産運用 Typescript WebXR 講師が注目する技術 プラクティス ローコード ホワイトハッカーに学ぶ Google Cloud LinuC レイヤ3スイッチ ホワイトハッカー ハッキング 脆弱性 ビジネススキル キャリア戦略 NFTアート リテンションマネジメント ゲーム制作 トラブル防止 システム外注 食事メソッド コード ソフトウェア設計 ドメイン駆動設計 人事評価制度 報告書 稟議書 契約書 Rails 業務自動化 価値 原則 睡眠 IT用語 DBA 炎上対策 2022年版 パフォーマンス パフォーマンス向上 Kubernetes入門 実践 チューニング 2020年代 2010年代 リモートアクセスVPN VPN構築 Railsの教科書 CCNA試験 ウェビナー 老後 人生設計 OSPF入門 Ruby on Rails 脆弱性対策 説明上手 説明力 システム障害報告 システム障害解決 いまさら聞けない 仕掛けから考える ネットワーク基礎 社会人 基礎知識 今日から変わる 睡眠マネジメント 仕事の成果を上げる 出るとこだけ 情報セキュリティマネジメント試験 狩野モデル 独学 若手向け 若手に受けてほしい ルーティング基礎 ルーティング実践 ネットワークエンジニア はじめての サイバー攻撃対策 2022 機械学習エンジニア 実演 AI基礎 Java開発 HTML Web基礎 JavaScriptフレームワーク Vue.js入門 明日から使える 最新テクノロジー 生産性向上 組織開発 PMBOK®第6版 リスクマネジメント 結合 副問合わせ Linux 実践演習 シェルスクリプト入門 マネジメント変革 押さえておきたい DHCPサーバー DNSサーバー VLANスイッチ レイヤ3 LAN NW技術 ローカルエリアネットワーク 知っておきたい 基本文法 Windowsプログラミング ネットワーク全体像 Git入門 GitHub入門 Pyhtonライブラリ プロジェクト QCD管理 Ruby入門 オブジェクト指向言語経験者向け PMBOK®ガイド第7版 ディープラーニング入門 グラフデータベース LinuC入門 サーバサイドJava入門 基礎編 応用編 AWS入門 AWSサービス ファイアウォール構築 Docker入門 データベース設計技術 オンプレミス オンプレ オンプレAD Windows Admin Centre データベース概念設計 Javaプログラミング 1日プログラミング特訓 AI開発 微分 線形代数 行列 統計検定 統計検定準拠 MySQL データベースメンテナンス データベース論理設計 ファイアウォール入門 副問合せ 顧客の売上アップ 売上アップ Azure入門 自分でつくる Docker実行環境 午後アルゴリズム問題 解き方のコツ FE シェルスクリプト実践 仮題で学ぶ 課題で学ぶ 現場 コミュニケーション管理 DX最新動向 DX推進人材 DX人材 Windows server Django データベース連携 インフラエンジニア最新動向 なんとなくわかるからもう一歩 アルゴリズム入門 アルゴリズム基礎 プログラム ハードウェア Javaアルゴリズム 1日特訓 現場でよく使う Rails入門 データベース障害復旧 Google Cloud Vision AI Dialogflow Cloud Functions Pythonプログラミング 社内資格制度 今日から使える 「仕掛け」から考える ITベンダー 診断ツール Webセキュリティ Webセキュリティ基礎 新任PM 新任PL テスト NW機器 独学できる Windows Admin Center プログラミング体験 Java開発者のための C#開発 RPA RPA入門 NWエンジニア NFT入門 だれにでもわかる サーバサイドJavq サーバサイドJava基礎 サーバサイドJava応用 炎上しないための AWSサーバ プログラム基礎 アセンブラ基礎 人工知能 ICT 課題解決 自律性 システム開発基礎 プロジェクト基礎 Webアプリ パターン別 アプリケーション開発 エンジニア初級 2022年からの 実用的な 発注 受け入れ Microsoft Office AI最新動向 良いSQL 悪いSQL データベース管理 インデックス Webの基本 NW管理 C#開発者のための ルータ TCP/IP通信 積分 数学基礎 NWセキュリティ 基本パターン JavaScriptでつくる DX時代 デザインシンキング入門 データ構造 PHPフレームワーク Linuxで学ぶ 速習 VLAN基礎 ゼロからはじめる jQuery入門 JavaScriptドリル Ruby on rails基礎 テストツール リレーショナルデータベース はじめて学ぶ データベースのしくみ 人生100年時代 令和 デザイン デザイン入門 現場ですぐに使える テーブル設計実践 情シス 外部設計 外部設計基礎 小規模ネットワーク Linux必須コマンド 違いを知ろう AWS CLI AWS CLI入門 CloudFormation NW設計 親子で作る メタバースプログラミング サーバー仮想化入門 DNSサーバー構築 秋冬版 IoT基礎 新人PM マネジメント研修 人を動かす 仕組みづくり イノベーション・マネジメント入門 心理的安全性 チーム チーム運営 3時間で学ぶ OS基礎 サーバー基礎 情報漏えい対策 プロジェクトマネジメント入門 組織改革 やさしいチームのつくりかた 簿記から学ぶ ビジネス基礎 データベースマネジメント 乃木坂46 乃木坂46に学ぶ マーケティング論 なっとく! LinuCレベル1 101試験 LinuCレベル1 101試験 ファイルシステム ディスク管理 データ分析基礎 一発OKを引き出す 資料作成術 プレゼン資料 クラウドサービス NW NW構築 SQL入門 目標達成マネジメント マネジメント基礎 目標管理 行動分析学 人の動かし方 組織の動かし方 科学的な Tableau MongoDB基礎 IoT実践 データ収集 データ自動収集 データ管理 技術者 SEのための 論理的思考 PM PL アルゴリズム再入門 GoFデザインパターン オブジェクト指向未経験者向け 令和版 失敗事例から学ぶ データベース構築 原価管理 業務連動 Access基本操作 クエリ活用 フォーム作成 レポート作成 実務事例で学ぶ 実務 知識活用 ネットワーク管理コマンド PCスキル 最強の習慣 ストレスフリー 作業効率化 Windows 11 webサーバ カラダとココロ ハワイアンストレッチ 身体のケア ストレス解消 パワーアップ リフレッシュ 1日で習得する ユーザ視点で考える 今知っておきたい UX向上 ユーザエクスペリエンス ユーザ体験 比べて学ぶ 仮想化 仮想マシンとコンテナ データサイエンスプログラミング データ視覚化 オリンピックコーチが伝える セルフマネジメントメソッド セルフイメージ 仮想環境 仮想環境で学ぶ セキュリティ実践 サーバーセキュリティ オンライン攻撃事例 質問技法 SE JavaScriptだけでつくる バッチ処理 テストデータ作成 ストアドプロシージャ バッチ テストデータ 実践編 デザイン力 テレワーク時代 収納術 インテリア術 サイバーセキュリティ 無線LAN Wi-FI 人事 BGP入門 ルーティングプロトコル 文系でもわかる 統計学入門 IPv6 IPv6入門 IPv4 人材育成 人が育つ仕組み 売れる仕組み マーケティング入門 セールスパーソン セールスマネージャー セキュリティ対策 計画の立て方 脱TCP HTTP/3 HTTP/3時代 AWS認定資格 Amazon Web Services 作業自動化 顧客折衝 Webサーバー自動構築 JavaScriptコーディング JavaScriptコーダーのための エンジニアのための ここが危ない テレワークセキュリティ サイバー攻撃事例 相手が理解し納得できる プレゼン 図解活用術 図解活用 Webアプリケーション Webアプリケーションセキュリティ クロスサイトスクリプティング OSコマンドインジェクション PowerPointで作る 資料デザイン 見やすい資料 IT業界人 知っておくべき 目の疲れ 眼精疲労 新習慣 習慣 栄養 運動習慣 イノベーション IMS ISO56000 イノベーション・マネジメントシステム 顧客視点 デザイン思考 Excel初級編 オブジェクト指向基礎 Javaでオブジェクト指向 Vue3 Vueアプリケーション FE試験 リーン開発 情報システム 情報システム開発 開発手法 C#プログラミング 応用情報技術者試験 AP AP試験 情報漏えい事例 心理学 E-R図 PMBOKから学ぶ 新人エンジニア 0年目エンジニア Webサービス Webサービス基礎 スコープ・ベースライン スコープ記述書 WBS辞書 ステークホルダ 3Dオブジェクト 3Dプログラミング canvas WebGL Three.js 3D描画 Pythonによる ローコードAI開発 Pandas scikit-learn Pycaret データ前処理 AIエンジニア Windows server基礎 攻撃対策 攻撃手段 マルウェア マルウェア対策 攻撃監視 Power BI Desktop BI ERD SQLマスター SQL実践 特訓講座 Google Apps Script AWSベースサービス Amazon ECS Amazon Elastic Container Service リーダーが知るべき Dockerビルド Docker応用 Docker構築 自動ビルド 伝達力 プランニング ネットワーク仮想化 ストレージ仮想化 達意の文章 書く力 GCP GCP入門 クラウドサービス基礎 伝わる文章 Cloud IAM Cloud Pub/Sub GCP応用 GCPリソース連携 TCP/IPプロトコル Webページ作成 コーディング NW全体像 NW機器の仕組み NW機器の特徴 つながりで理解できる マイクロサービスアーキテクチャ RESTfulアーキテクチャ Web API設計 Web技術 Web API実装 無線LAN基礎 体調快調生活 酸素不足 ITキャリア アプリケーション登録 システム基本設計 システム設計入門 PoC 成果定量化 プロジェクトアンチパターン 要求管理 IoT人材 心理的安全性の高め方 webサイト webサイト制作 タイムマネジメント原理原則 時間管理 時間効率化 時は金なり 時はいのち ECRSの原則 JavaScript実践 JavaScript基本コード NW基礎 サブネット分割 コンプライアンス基礎 情報管理 ハラスメント 社会人基礎 ハラスメント防止 ネットワークセキュリティ基礎 NWセキュリティ基礎 NoSQL基礎 3C分析 セールス 簿記3級 顧客理解 Scratch Scratchで学ぶ プログラミング未経験者向け クイックツアー プログラミング言語の歴史 IT入門 ITの歴史 Ciscoルータ IPv6移行 IPv6ルーティング 小規模NW いちばんやさしい HTML/CSS入門 正規形 JSP サーブレット WindowsServerでつくる IIS Microsoft DNS Server 工数 係数モデル FP法 ボトムアップ法 WBS法 1日で学ぼう PostgreSQL DBA必見 AI活用事例 Gitコマンド バージョン管理ソフト NW設定 RDBMS基礎 レビュー技法 リーディング技法 超特訓講座 Git中級 Git応用 CLI 契約 著作権 アプローチ手法 アプローチ ソフトウェア開発 ユーザ視点 UXデザイナー 最強の週間 IT基本用語 LinuC Lv.1 ロジカル ITパスポート試験 若手エンジニアのための ゼロトラストセキュリティ 派遣 業務請負 知的財産 トヨタ生産方式 リーン開発で学ぶ フロントエンド開発 新価値創造 新価値創造プロジェクト 事業開発 デジタル変革 DB リレーションシップ Tableau基礎 データ可視化 データ可視化ツール クエリ データ加工 Access活用 Webアプリケーションフレームワーク 社内プレゼン 健康 ダイナミックルーティング テスト自動化ツール Selenium フローチャート スタティックルーティング プログラミング言語 デジタルイノベーション なぜプログラムは動くのか 定量化 DXの前に知っておきたい IT技術 CSS3で学ぶ CSS基礎 Pythonを使った データ・サイエンティスト WebAPI マイクロ・サービス・アーキテクチャ RESTful 気を付けよう パソコン AWS CloudShell IaC IoT用語 トップアスリート NW管理コマンド ベンダー試験 ベンダー資格 データベース管理基礎 1日で学ぶ データベース管理者 基礎から始める メールサーバー インターネットサーバー Git実践 べからず集 ネットワーク管理プロトコル NW管理プロトコル ホスティング 10の力 Fargate AWS Fargate データ分析ツール ノーコード/ローコードで体験する Google Teachable Machine Google Colaboratory 新人PL 脆弱性診断ツール 時短テク 時短テクニック クラウドホスティング EBS EFS XAMPP TypeScriptで書く シェルスクリプトによる Webサーバー自動構築入門 Windows Serverでつくる DBセキュリティ 楽しく学ぶ TypeScriptコーディング シェルスクリプト作成 DOA Windows Server構築 TCP/IPモデル SQLの書き方 環境心理学 行動心理学 CIツール TortoiseGit MVCモデル JDBC モビリティ MaaS 移動革命 中小企業 デジタルマーケティング 量子コンピュータ 農業 農業DX リスキリング 学びなおし Gitコマンド実践 プロジェクト再生 プ譜 心構え プロダクト テックカンパニー 学習体験 スポーツIT DX実現 技術プレゼンテーション フィットネス イメージ構築 ロードマップ ファイル操作 AutoML アジャイル開発 Prometheus SIer SIerビジネス Unity キャリア設計 サバイブ戦略 資格試験 監視 主体性 思考法 哲学 コンポーネント指向 コミュニケーション戦術 自走型チーム Power Automate Power Automate for desktop SSL SSL(HTTPS)通信 HTTPS 個人情報保護法 創造的な仕事 Google Analytics アナリティクス オーラルケア スキルロードマップ ワークスタイル 組織づくり 勉強法 知的財産権 取引関連 新人向け 科目B HTTPクライアント PMBOK®第7版 システム導入プロジェクト ステートフル通信 プロジェクト戦略 統計 確率 関数 Word テクノロジー 温かいテクノロジー Salesforce バージョン管理システム  スクラム開発 AD AAD 新人指導 自律神経専門整体師 競技プログラミング アイディア タスク管 タスク管理 プロジェクト進行 モデリング技術 TCP コンテナ運用 仏教 LinuCレベル1 102試験 データ集計 パワークエリ ビジネスモデル ログ管理 社内会議運営 技術書 読書術 脳の生産性 行動力を高める 放送作家 セロトニン呼吸 自動化 幸せホルモン 手取りを増やす Webサイト構築 新NISA WAF ヨガ 若手社員 病態関連図 言語化 NISA ルーター設定 伝える技術 サーバー自動構築 営業向け 人事向け 会議 生成AI ヒアリング プログラミングの歴史 部下への目配り 部下への心配り ITエンジニアリング デザイン基礎 マクロ SNS SNS依存 イベント イベント演出論 データ基盤アーキテクチャ テレビの手法 サッカー ビジネスモデル仮説構築 セキュリティ芸人 教育 思考の言語化 日本史 歴史研究 コミュニケーション環境 チームの成果 チームワーク 人材育成計画 持続可能なチーム 自動アプリケーション登録 Google Cloudサービス GCP Cloud Pub/Sub 組織を動かす 法改訂 ICT基礎 レスポンシブ対応 持続可能なチームづくり 労働生産性向上 メンバー メンバー別コミュニケーション 成果を出す

3 時間で学ぶ TypeScript 入門 ~ 「型」初心者が挑戦|研修コースに参加してみた

calendar_month2022-04-05 公開 update2022-04-14 更新

今回参加したコースは 3 時間で学ぶ TypeScript 入門 です。

React や Vue.js のフロントエンドフレームワークに続き、モダンなフロントエンド開発ではすっかり定番となった TypeScript です。

以前に C 言語をチョロっと見ただけで、動的型付け言語やマークアップ言語しかやってこなかった私には、初めての静的型付け言語です。 実際、学んでみると中々にお作法の違いがあるなと実感し、コースを受講する前は「フロントエンド書くなら今は TypeScript でしょ」と安易に考えていましたが、ちゃんと用途を分けて使わないといけないと気付けました!

そろそろ TypeScript をやってみるか、と思う方には、従来の JavaScript との違いもわかるコースでしたので、とてもオススメです!

 

では、どのような内容だったのか、レポートします!

このコースはいつものライブ配信コースではなく、「いつでも動画」という SE カレッジ動画契約企業であればいつでも視聴できるコーナーのコースで、 「 TypeScript 概要編」 → 「 TypeScript 入門編」 → 「 TypeScript 開発環境編」の 3 つ、それぞれ 1 時間程度の内容をまとめたレポートです。

コース情報

想定している受講者 Javascript に関する基礎知識を保有している
受講目標
  • TypeScript の概要および特徴を理解する
  • TypeScript における Web アプリケーション開発の流れを理解する

講師紹介

プログラミング分野で演習の組み立てが上手な 冨原 祐 さんが登壇されました。

講師インタビュー 冨原 祐
「講師を一生の仕事にする」

TypeScript とは

まずは TypeScript の特徴を紹介いただきました。

  • Microsoft が開発した OSS の言語
  • JavaScript を拡張した「型」がある言語
  • TypeScript と JavaScript は相互に変換( トランスパイル )可能
    • ただし型を厳密にすると JavaScript → TypeScript ができない
    • これを回避するために型をany 型 (何でも許容する型) がある
  • コンパイルする前に IDE が検知するため、結果的に実装は速くなる
  • オブジェクト指向言語

JavaScript との違いを簡単な例で比較してみます。

codeJavaScript

var x = 1;
  x = 'こんにちは';

codeTypeScript

var x: number = 1;
  x = 'こんにちは';

変数宣言のあとに number という “型” があることに加えて、実行時には TypeScript の方はエラーがでます。 宣言と異なる型だからですね。

では、 JavaScript から TypeScript にすると開発が楽になるのでしょうか。

  • 学習コストが高いので、急に開発効率が上がらない
  • ソースコードの保守性では確実にメリットがある
  • 大規模開発になれば生産性向上が見込める

“大規模” の定義が難しいところですが、冨原さんから「変数を使いまわして、何が入っているのかわからなくなる規模」とのことでした。 確かに大きいフレームワークやライブラリの中を見たときに、変数とか見えなさすぎてしんどかった記憶が蘇りました。 ちゃんと変数なり、定義があったほうが楽ですね

TypesScript の型

では、 TypeScript にはどんな型があるのでしょうか。

  • 型の種類
    • number: 数値型 (整数、少数の違いはない)
    • string: 文字列
    • boolean: 真偽値
    • null: null も型
    • any: すべての型を許容する
    • 配列

型の書き方

続いて、型の書き方について、サンプルコードをもとに見てみましょう。

  • 型の宣言
    • 変数名の横に書く
    
    var num: number = 3;
    var name: string = '田中';
    var isLock: boolean = false;
    var sample: any = 'テスト';
    
  • 関数での書き方
    
    // 戻り値がない実行型の場合
    function sample(name: string): void {
    }
    
    // 戻り値がある場合
    function sample(name: string): number {
        return 0;
    }
    
  • クラスでの書き方
    • constructor() は予約語
    
    class Person {
      constructor(private name: string, age: number) {
      // 処理
      }
      purblic run(speed: number): void {
      // 処理
      }
    }
    
  • 型エイリアス

    型の別名を定義する 型エイリアス も使えます。

    
    // 型エイリアスは type を使って定義
    type str = string;
    var name: str = '田中';
    

    単純に 1 つの型をエイリアスにするだけでなく、複数の値が入った連想配列も名前を付けられます。

    
    type Person = { name: string, age: number };
    var p: Person = {
      name: '田中',
      age: 25
    }
    

    こうすると、一時的なクラスのように扱えます。 C 言語の構造体のようですね。 ほかのクラスといっしょに小さいデータ構造を定義する場合や、クラスの中にプライベートクラスを定義するときなどに使えます。

    TypeScript 入門演習

    では、ここからは座学で学んだことをもとに演習しながら、確かめてみましょう。

    インストール

    まずはインストールからです。

    
    $ npm install -g typescript
    

    インストールできたか確かめてみます。

    
    $ tsc --version
    Version 4.6.2
    

    トランスコンパイルしてみよう

    TypeScript <–> JavaScript でトランスコンパイルしてみましょう。

    
    class User {
        constructor(public userName: string, public userAddress: string) {
            console.log("constructor");
        }
        getInfo() : string {
            return "名前:" + this.userName + " 住所:" + this.userAddress;
        }
    };
    var user = new User('田中', '東京都');
    var str = user.getInfo();
    console.log(str);
    
      コードの解説

    • 変数宣言や Setter/Getter 無しで construct するのが常道
      • 変数は public にする

    このコードをトランスコンパイルします。

    
    $ tsc Sample.ts
    

    生成された JavaScript のソースコードを見てみます。

    
    var User = /** @class */ (function () {
        function User(userName, userAddress) {
            this.userName = userName;
            this.userAddress = userAddress;
            console.log("constructor");
        }
        User.prototype.getInfo = function () {
            return "名前:" + this.userName
                + " 住所:" + this.userAddress;
        };
        return User;
    }());
    ;
    var user = new User('田中', '東京都');
    var str = user.getInfo();
    console.log(str);
    

    prototype を使って継承しているのですね。

    それはさておき、これで node.js で実行できるようになったので、動かしてみましょう。

    
    $ node Sample.js
    constructor
    名前:田中 住所:東京都
    

    ただし、いちいちトランスコンパイルするのは面倒なので、一発でコマンド実行できる ts-node をインストールします。

    
    $ npm install -g ts-node
    

    トランスコンパイルするための設定ファイルが必要なので、それを生成します。 package.json を作るのと同じですね。

    $ tsc --init
    
    Created a new tsconfig.json with:
    
      target: es2016
      module: commonjs
      strict: true
      esModuleInterop: true
      skipLibCheck: true
      forceConsistentCasingInFileNames: true
    
    
    You can learn more at https://aka.ms/tsconfig.json
    

    では、.ts ファイルを実行してみましょう。

    $ ts-node Sample.ts 
    constructor
    名前:田中住所:東京都
    

    できましたね!

    ジェネリクス

    今度は型を試しながら、 TypeScript はもちろん Java や C# など静的型付け言語ではおなじみの ジェネリクス を使ってみます。

    
    // JavaScript
    function writeMessage(mes) {
        console.log(mes);
    }
    writeMessage('テスト');
    writeMessage(2);
    

    引数に型がいらない JavaScript では問題が起きないコードも TypeScript ではエラーになります。

    
    // TypeScript
    function writeMessage(mes: string) {
        console.log(mes);
    }
    writeMessage('テスト');
    writeMessage(2); // エラーになる
    

    そこで登場するのがジェネリクスです。

    
    function writeGenerics<T>(mes: T): void {
        console.log(mes);
    }
    writeGenerics<string>('テスト'); // テスト
    writeGenerics<number>(2); // 2
    writeGenerics(3); // 3
    
      コードの解説

    • 型が不明なときは T を使う
    • 利用するときに型を指定して引数に入れる
    • 型推論が効くので writeGenerics(3) はエラーにならない

    実際のジェネリクスの使い方を見てみます。

    
    class ItemAttr<T>{
    
      name: string;
      attr: T;
      
      constructor(name: string, attr: T){
          this.name = name;
          this.attr = attr;
      }
    
      getAttribute(): T {
          return this.attr;
      }
    }
    
      コードの解説

    • key を受け取って value に複数の型を取るクラス
    • getAttribute() の戻り値も複数の型

    このクラスを使ってみましょう。

    
    // 文字列を value に取るときは T を string に
    var attr1 = new ItemAttr<string>("氏名", "田中");
    
    // number を value に取るときは T を number に
    var attr2 = new ItemAttr<number>("年齢", 25);
    
    // 戻り値が string なら T を string にする
    var namestr: string = attr1.getAttribute(); // 田中
    
    // 戻り値が number なら T を number にする
    var age: number = attr2.getAttribute(); // 25
    

    冨原さんから「持ちたい値ごとに型を指定する」と補足されましたが、確かに変数に何が入るのか、明示的になりますね。

    オーバーロード

    関数を複数定義して、コンテキストに合わせて使い分けたいときもあります。

    
    function overloads(num: number): number {
        return 0;
    }
    function overloads(str: string): number {
        return 0;
    }
    

    当然ですが、これはエラーになります。 そこで登場するのが オーバーロード です。

    1. インターフェイスを 2 つ書く
      
      function overloads(num: number): number;
      function overloads(str: string): number;
      
    2. 本体の処理は 1 つ
      • 引数は any にする
      • 
        function overloads(value: any) {
            if (typeof value === 'number'){
                return 0;
            }
            if (typeof value === 'string'){
                return 1;
            }
            return -1;
        }
        

    実行してみましょう

    
    console.log("文字の場合:" + overloads("あああ")); // 文字列の場合:0
    
    console.log("数値の場合:" + overloads(0)); // 数値の場合:1
    

    とはいえ、ジェネリクスにせよ、オーバーロードにせよ、素の JavaScript で書くときより考えることが増えます。

    TypeScript 実践演習 ~ フロントエンドで TypeScript を使ってみよう

    TypeScript の特徴を学んだところで、実際にフロントエンドの開発で使ってみましょう。

    環境構築

    まずは環境構築からです。

    • ビルドツールとして webpack を使う
      • 複数のファイルをまとめる
      • Web サーバにもなる

    では、環境構築を進めましょう。

    1. typescript と ts-loader をインストール
      
      $ npm install typescript ts-loader
      
    2. webpack / webpack-cli (webpack をコマンドラインで使用) / webpack-dev-server (開発用 Web サーバ) をインストール
      
      $ npm install webpack webpack-cli webpack-dev-server
      

    必要なものをインストールできたので、色々な設定ファイルを作成・編集します。

    1. webpack でビルドして、サーバを動かせるよう package.json にコマンドを追加
      
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "buiild": "webpack --mode=development",
          "start": "webpack-dev-server --mode=development"
        },
      
        npm run build でビルド、npm start でサーバ起動

        • build は予約語ではないのでコマンド時に run が必要になる
    2. webpack のビルド手順をまとめた設定ファイル webpack.config.js を書く
      • ジェネレータが無く手動で書く (げっ 😱)
      • 今回は用意いただいたものを使用 (ほっ 😅)
        
        const path = require('path');
        module.exports = {
            // 指定できる値は、ファイル名の文字列や、それを並べた配列やオブジェクト
            // 下記はオブジェクトとして指定した例 
            entry: {
                bundle: './src/app.ts'
            },  
            output: {
                // "__dirname"はこのファイルが存在するディレクトリを表す node.js で定義済みの定数
                path: path.join(__dirname,'dist'),
                filename: '[name].js'  // [name]はentryで記述した名前(この例ではbundle)が入る
            },
            // 例えば「 import Foo from './foo' 」と記述すると "foo.ts" という名前のファイルをモジュールとして探す
            // デフォルトは['.js', '.json']
            resolve: {
                extensions:['.ts', '.js']
            },
            devServer: {
                static: path.join(__dirname, 'dist')
            },
            module: {
                rules: [
                    {
                        // 拡張子が .ts で終わるファイルに対して TypeScript コンパイラを適用する
                        test:/\.ts$/,loader: 'ts-loader'
                    }
                ]
            }
        }
        
      • entry でビルドを始めるファイルを指定
      • output はビルドしたときに生成されるファイルのファイル名と格納場所を指定
      • resolve でビルドに使うファイルの拡張子を指定
      • devServer に公開するディレクトリを指定
      • module でビルドするルールを記述。 今回は .ts ファイルを ts-loader でコンパイルする
    3. ts ファイルを実行できる tsconfig.json をつくる
      
      $ tsc --init
      

    設定ファイルの準備が完了したので、ブラウザで表示するファイルを準備します。

    1. HTML ファイルを格納する dist ディレクトリと、ソースコードを格納する src ディレクトリを作成
    2. 空でよいので src 配下に app.ts を作成
    3. dist 配下に index.html を作成
      • VS Code で html… と入力すれば自動補完で html テンプレートが入力される
        
        <!DOCTYPE html>
        <html lang="ja">
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        </head>
        <body>
          <h1>Hello, TypeScript !!</h1>
        </body>
        </html>
        

    では、実行してみましょう!

    
    $ npm start
    
    > type_01@1.0.0 start
    > webpack-dev-server --mode=development
    
    <i> [webpack-dev-server] Project is running at:
    <i> [webpack-dev-server] Loopback: http://localhost:8080/
    # 中略
    webpack 5.70.0 compiled successfully in 3367 ms
    

    localhost:8080 でも確かめてみましょう。


    無事に動きましたね。

    簡単な Web アプリケーションを開発

    環境構築が完了したところで、簡単な Web アプリケーションを開発してみます。

    今回のお題

    • 実装する Person クラス
      • write() メソッドを持つ
        • Person の情報を受け取って、それを HTML の要素にする

    Person クラス (person.ts) を定義 → app.ts でインスタンス化 → index.html にデータ表示 とデータを受け渡すよう、作っていきます。

    1. Person クラスを作り constructor() を書く
      • コンストラクタ引数は id / 名前 / 住所
      
      class Person {
          constructor(
              private id: number,
              private personName: string,
              private personAddress: string
          ){}
      }
      
    2. write() メソッドを書く
      
      export class Person {
          constructor(
              private id: number,
              private personName: string,
              private personAddress: string
          ){}
          
          // 引数に null が入る可能性があるので or null を入れる
          public write(elem : HTMLElement | null): void {
              // 要素が null なら何もしない
              if (elem) {
                  // innerHTML で elem の中に要素を入れる
                  elem.innerHTML += '
      ' + 'ID:' + this.id + ' 名前:' + this.personName + ' 住所:' + this.personAddress + '
      '; } } }
    3. 環境構築で作った空の app.ts に Person クラスをインスタンス化して index.html に入れる処理を書く
      
      import {Person} from './person';
      
      // 画面から id="content" の要素を取得する。 なお getElementById() は空なら null を返す
      var elem = document.getElementById('content');
      
      // Person に情報を入れる
      var person = new Person(1, '田中', '東京都');
      var person = new Person(1, '鈴木', '千葉県');
      
      // 情報が入った HTML 要素を作る
      person.write(elem);
      
    4. index.html に content エレメントを追加
      
      <body>
        <div id="content"></div>
        <!-- app.ts がビルドされて bundle.js になる -->
        <script src="bundle.js"></script>
      </body>
      

    実行してみましょう!


    ちなみに app.ts に新しいデータを追加して保存すると、リロードや再ビルドしなくても自動で更新されます。

    React + TypeScript で開発してみよう

    フロントエンド開発で主流となっている React と TypeScript を混ぜると、どうなるのでしょうか?

    素の JavaScript との違いを体験してみましょう。

    環境構築

    TypeScript で React はトランスコンパイルできないので、これまでと環境構築が変わります。

    1. create-react-app を使用する
      • TypeScript をテンプレートにしたプロジェクトも作成できる
      • ただし create-react-app はフロントエンドのみで開発される場合などで使用されることが多い
      
      $ npx create-react-app type_02 --template typescript
      
    2. type_02 というディレクトリが生成されるので移動して npm start

    以前にも create-react-app を使いましたが、2 つのコマンドで完了しました!

    React / Express で作る Web アプリケーション開発入門|研修コースに参加してみた

    なお、私は WSL で構築していたため、 Linux での権限がうまく設定されず、何度も泣きながら構築しました … 。

    React コンポーネントにおける TypeScript の書き方の違い

    では、 React のコンポーネントを作って、 TypeScript と従来の Javascript との違いを体験しましょう。

    1. src 配下に components ディレクトリを作成
    2. コンポーネント Hello.tsx を作成
      • .tsx は JSX を含んだファイルの場合に使われる拡張子
      • コンポーネントは state や property を持つが、どれになるかは不明
      • ジェネリクスを使って解消する
      
      // 文字列型の name というプロパティを持つことを宣言
      type Props = {
        name: string;
      }
      
      // プロパティがあるコンポーネントと認識させる
      export class Hello extends React.Component<Props> {
        public render() : JSX.Element {
          return <h1>こんにちは {this.props.name} さん!</h1>
        }
      };
      
    3. 一番最初にビルドする App.tsx を編集
      • Hello を import する
      • 表示する箇所に Hello を入れる
      import React from 'react';
      import logo from './logo.svg';
      import './App.css';
      import { Hello } from './components/Hello'
      
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Hello name='田中'></Hello>
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
      

    では、実行してみましょう。


    やりました!

    ただ、素の JavaScript で React を書くときと比べると、コンポーネントの書き方一つとってもジェネリクスを使ったりと手間が増えます。 冒頭、冨原さんが “学習コストが高い” というのは慣れるのに時間がかかる、ということかも知れませんね。

    create-react-app を使わない環境構築

    先程は create-react-app を使って 2 コマンドで React 環境を構築しましたが、それではそれぞれのライブラリがどんな役割を果たしているのか、わかりません。

    ここでは番外編として、 React 環境を一から構築してみましょう。

    1. npm init で package.json を作成
    2. webpack, webpack-cli, typescript, ts-loader をnpm install
    3. react, react-dom, @types/react, @types-react-dom をnpm install
      • React は TypeScript を使って開発されてない
      • そこで TypeScript の型定義を入れるライブラリ (@type~) を追加
    4. TypeScript のコンパイル設定をするため tsconfig.json を作成
      • カスタマイズが必要 (ES (ECMAScript: JavaSCript の規格) のバージョン指定など)
      
      "compilerOptions": {
        // 中略
        "target": "ES5",
        "lib": ["ES2020", "DOM"],
        // 中略
        "module": "ES2015",
      }
      
    5. ビルド手順をまとめた webpack.config.js を編集
      • .tsx のビルドルールやビルドで使用するファイルを指定
      
        module: {
          rules: [
            {
              test: /\.tsx?$/,
              use: "ts-loader"
            }
          ]
        },
        resolve: {
          extensions: [".ts", ".tsx", ".js", ".json"]
        },
      
    6. ビルドの起点となる /src/app.tsx を作成
    7. npm コマンドでビルドできるよう package.json を編集
      • scripts パラメータに build のコマンドを指定 (今回は build のみ使用)
      
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "build": "webpack",
        },
      

    では、ビルドしてみましょう。

    
    $ npm run build
    
    > type_03@1.0.0 build
    > webpack
    
    asset main.js 1.21 KiB [emitted] (name: main)
    ./src/app.tsx 14 bytes [built] [code generated]
    webpack 5.70.0 compiled successfully in 2518 ms
    

    無事にビルドが通りました!

     

    このあと Vue.js でも TypeScript を併用した環境構築を行いました。

    これから TypeScript の勉強を始める方へのアドバイス

    最後に、このコースをもとに TypeScript の学習を進める方へのアドバイスや注意すべきことをお話いただきました。

    • TypeScript ならではの基本的な書き方、変数や戻り値の型、ジェネリクス、クラスやコンストラクタなどを覚えよう
      • ただしパターンは少ない
    • ライブラリには型定義 (.d.ts ファイル) がないものがあるので注意
      • 無い場合はライブラリのソースコードを読んで自分で型定義を書く必要がある

    ライブラリについては、フロントエンドの開発では小さいライブラリを大量に使ってツールチェインしているので、かなり注意が必要ですね。

     

    この最後のアドバイスをもってコースは修了しました。

    まとめ

    TypeScript の特徴と型宣言の書き方、ジェネリクスなど特有の書き方を学び、フロントエンドで React も含めた開発を体験しました。

    コース内で再三、冨原さんから学習コストが高いこと、用途に合わせて使うこと、この 2 つを繰り返されていました。 確かに書いてみると JavaScript に慣れているフロントエンドエンジニアには手間や考えることが増えるので、規模が大きい、クリティカルなエラーは許されないケースなど、 “型” のメリットが活かせることが採用する前提になりますね。

    一方で、すでに大規模だったりクリティカルな場合で TypeScript に移行するには、かなり開発コストが膨らむような印象も受けます。

    100万行の大規模なJavaScript製システムをTypeScriptに移行するためにやったこと | CyberAgent Developers Blog

    このため、新規開発で MVP など小さく作る場合は JavaScript で進め、マーケットフィットしたタイミングで TypeScript に移行といった判断が必要になるのかも知れません。

    「TypeScript どうしようかな」と思っている方には、その特徴が演習を通じて、よくわかる内容でした!

     


    SEカレッジについて

    label SEカレッジを詳しく知りたいという方はこちらから !!

    SEcollege logo
    SEカレッジ
    IT専門の定額制研修 月額28,000円 ~/ 1社 で IT研修 制度を導入できます。
    年間 670 講座をほぼ毎日開催中!!

    免除修了試験 Q & A

    タグ一覧