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研修を聞いてみた 会社規模 (100~300名) IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 トレ担 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン 会社規模 (~50名) DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 会社規模 (~99名) Wireshark パケットキャプチャ 管理職研修 部下育成 ワークあり 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 会社規模 (~25名) テスト技法 組織規模 51名~99名 組織規模:~199名 [組織規模]199名まで 組織規模 199名まで 組織規模199名まで 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上

Modern JavaScript 入門 -開発環境編- 研修コースに参加してみた

今回の参加した研修コースは Modern JavaScript -開発環境編 です。

JavaScriptをはじめとするフロントエンドの開発は目まぐるしく変わっています。Gulpなどを使ったビルドやTypeScript、Flowなどの静的型付け、ReactやVueなど仮想DOMを使ったSPA (Single Page Application) 開発、FlutterやReactNativeなどによるクロスプラットフォーム開発など話題に事欠きません。個人的にはPWA (Progressive Web Apps) がとても気になっています。

今回はModernなJavaScriptがどのような背景で登場してきたのかがわかり、複雑になった開発環境でも、よく使われている手法やパッケージを使って実際に環境構築してみました。範囲は広いものの、効率的に開発する仕組みが整ってきていると感じられました !!

そろそろモダンなJavaScriptにキャッチアップしようと思っている、もしくは自身で独学するには複雑すぎるとお考えの方には、いい感じにこなれた高速道路になっていますので、オススメです !!

では、コース内容をレポートします !!

 

想定する受講者

  • JavaScriptプログラミングの初級スキル
  • Webアプリケーション開発 (HTML, CSSなど)の初級スキル

 

受講目標

  • 近年のJavaScript開発における標準的な手法を理解する
  • JavaScript開発のためのビルドツールやテストツールなどの簡単な使い方を理解する

 

講師紹介

講師紹介のようなものはなくコースがスタートしましたが、このレポートでは講師を紹介します。

米山 学 さん

米山 学

過去にはオブジェクト指向を使った開発や多くの書籍を執筆されていましたが、今はもっぱら講師としてご活躍で、SEカレッジではハイエンドな技術コースを主に担当されています。

また、年間の1/3以上を海外遠征も含め山登りされています。

Amazon.co.jp: 米山 学:作品一覧、著者略歴 – アマゾン

 

Modern JavaScriptとは

まずはModern JavaScriptの背景からです。

 

 

  • Modern JavaScript そのものの正確な定義は無いが、ここ10年ぐらいのJavaScriptのテクノロジーを指していることが多い
  • 2005年の Ajax の登場から今までの使えない言語というイメージから見直され始める
  • 2008年のHTML5勧告からリッチなフロントエンドの開発の主流がFlashなどからJavaScriptに移行
    • jQueryの人気が最高潮
  • Node.js が登場し、サーバーサイドの実装もOKになった
    • サーバーサイドで使うには実行エンジンが貧弱だったが、Nodeの登場によりパワフルになった
  • Angular.js(Google)、React.js(Facebook)で大規模でリッチなフロントエンド開発ができるようになった
  • JavaScriptを拡張したTypeScript(MS)のようなaltJSが登場
  • 動的型付け->静的型付けにして大規模開発でも使えるように

 

フロントエンドをよりリッチに、大規模開発にも対応できるようにということが背景にありました。

 

Modern JavaScript の特長

では、大規模開発に対応できるように工夫・拡張された点はどのあたりなのか、解説いただきました。

 

 

  • ライブラリ・パッケージの管理
  • アーキテクチャ
  • 単体テスト環境 / テスト自動化
  • Minify / Uglify
    • Minify: ファイルサイズを圧縮するため、コメントなどをすべて圧縮
    • Uglify: さらに圧縮して難読化 (関数名とかもaとかbとかにしてしまう)

 

今回はこの開発環境を作ることがメインテーマですが、とはいえ、動きが早く、またたくさんライブラリなどがあるので、今回は下に絞って構築します。

  • サーバーサイドJavaScript
  • パッケージ・マネージャー
  • 単体テスト
  • タスクランナー/ビルドツール

 

サーバーサイドJavaScript

サーバーサイドでもJavaScriptを使えるようになったことで、学習コストを下げられたり、ライブラリを共通化できたり、工数を減らすことができます。

このサーバーサイドJavaScriptでデファクトスタンダードになっているのが Node.js です。

ここからはその Node.js の紹介となります。

  • V8: Googleが開発したJS実行エンジンを使う
  • サーバーサイドで必要になる Socket,HTTPなどのレイヤはC言語で実装されている
  • Webサーバーが変わる
    • Apache はマルチプロセス/マルチスレッド なのでアクセス過多で並列処理すると1万台ぐらいで動作が不安定になる
    • Node.jsはシングルプロセス(イベントドリブンでキューに突っ込んで順次実行)なので安定的にできる
    • Nginxと相性が良い
  • スタックもLAMPからMEANということで、一時もてはやされた
    • MongoDB: json を扱えるデータベース (最近はMySQLでもOKに)
    • Express: Webアプリフレームワーク (StrutsやRailsのようなもの)
    • Node: 実行環境
    • Angular: フロントのフレームワーク
  • いまはAngularのところがReactやVueになってきた

 

では、Node.js をインストールして、HTTPサーバーを立ち上げるコードを書いてみましょう。


コマンドで node http-server.js でサーバーを立ち上げて、ブラウザを確認してみました。

ただ、いちいちサーバー立ち上げるのは大変なので、実際はExpressなどWebアプリケーションフレームワークがやってくれます。

 

パッケージ・マネージャー

JavaScriptに限らず、OSSのライブラリを使って開発することは一般的になっているほか、大規模開発になると自身で実装するより、パッケージを使ったほうが効率的です。

 

  • 1つのライブラリに対してたくさんのライブラリで依存関係があるので、いちいち手動でダウンロードしてインストールして設定するとか無理ゲーです
    • a というライブラリに b や c や d の依存関係があり、c のライブラリには ~
  • 設定ファイル(Modern JavaScript の場合、 package.json )を書けば、パッケージ・マネージャーがやってくれる
  • Modern JavaScript のパッケージマネージャーは npm が主流

 

npm

  • npm (node pacage manager)
  • Nodeを入れると自動で入る

 

npm を使って実際パッケージをインストールしてみましょう

  • まず package.json を作る
    • 普通は書いていくけど今回は省略してenterをどんどん作成して自動生成
  • 生成された package.json
  • 実際にnpmでパッケージをインストールしてみる
  • コマンドで npm install lodash で lodash をインストールしてみる
    • 普段はpackage.jsonに書きます
  • インストールすると package-lock.json に記述される
    • ちなみに lodash を入れると、依存する lodash が依存するパッケージもインストールされる
  • package.json に書いておくと、npm install で package.json に書かれているものはすべてインストールされる
  • 開発環境をスグに構築できて、チームで一緒にできる (!!)

 

インストールしたパッケージを使ってみましょう

パッケージ・マネージャーの注意点

  • バージョンアップで後方互換が崩れることがあるので ^ で指定する
  • 最近は Yarn というパッケージ・マネージャーも使われ始めている
    • Facebookが開発
    • ダウンロードが高速
    • セキュリティの問題も解消している -> 最近も npm の脆弱性が指摘されていました (https://qiita.com/mysticatea/items/0141657e4478d9cf4614)
    • npm 互換なので、npmのレジストリが一緒でコマンドも一緒

 

単体テスト環境

大規模に、かつサーバーサイドでも開発しようとすると、単体テストの実行は欠かせません。

  • 単体テストフレームワークで xUnit (JUnit,PHPUnitなど) の流れをくんだツールを使う
  • 幾つかあるけど Mocha がよく使われている

 

Mocha

  • TDD (Test Driven Development: テスト駆動開発) の考え方を採用している
  • 数値や変数など戻り値をチェックする
  • 仮の実装を書いてからテストを書く

 

実際にテストを書いて、テストを通してみましょう

  • まず仮の実装を書く // 下のコードは仕上げたものと区別するため、 faker とつけています
  • 次にテストを書く
  • 単体テストを実行する
    • npm test で実行する
    • もちろん失敗する
  • 単体テストを失敗させてから、仮実装を仕上げる
  • 改めて、テスト npm test を実行

サンプルでもテストが通るとうれしいものですね !!

 

タスクランナー

フロントをビルドするのには難読化したり、cssの変換などタスクがたくさんあります。このため、毎回手動でコマンドしているのは大変なので、タスクランナーを使います。

  • タスクランナーではGulpとGruntがよく使われる
  • 最近ではGulpが人気
    • jsで書ける
    • Gruntはjsonで書くので書きにくい

 

Gulp

  • gulpfile.js にタスクを書きます // 下のコードは書き足したものと区別するため initial とつけています
  • プラグインを使ったタスクを書く
  • gulp を実行。コマンドラインで gulp と実行
  • '/assets/js のファイルを確認すると、無事に難読化に成功!!
  • gulpテクニック
    • gulp watch をしておくと変更が入るとタスクが自動で走る

 

最後のGulpのテクニックを紹介して、SEカレッジの2018AutumnWinter (下半期) では実際にReactなどを使った実践編のコースがあることを告知して、コースは修了しました。

 

まとめ

とにかくトピックの多いModern JavaScriptを “大規模開発に使える” という切り口からサーバーサイドJS、パッケージマネージャ、単体テスト、タスクランナーを使ってみました。

npm install で依存環境が揃ったり、 gulp などを使ってビルドしたり、チームのローカル開発環境を統一することはとても重要です。 個人的にはテストや gulp が通って、気持ちが良かったです。

モダンなJavaScriptに、3時間でいい感じにキャッチアップできる高速道路コースでした !!

 


 

SEカレッジが気になった方はこちらからお気軽にお問合わせください!!

お問い合わせフォーム

SEカレッジの詳細をご覧になりたい方はこちら!!

SEカレッジ

特集・キャンペーン

よくある質問集

タグ一覧

参加してみた研修参加レポートJavaLinux基礎セキュリティプログラミングプロジェクトマネジメント基本情報技術者オブジェクト指向PythonネットワークAISQL基礎プログラミング基礎ヒューマンスキル資格コミュニケーションIoTアルゴリズムエンジニアデータベースJavaScriptLinux入門マネジメントC# 基礎テーブル設計仮想化技術ソフトウェアテストプログラミング入門SQL応用パケット解析ビジネスマナーPMBOK®jQueryLinux応用ビジネス文書ファイアウォールコンテナシェルスクリプトデータサイエンスデザインパターン教育研修担当者向け問題解決技法工数見積ER図障害対応プレゼンテーションテック用語RDBMSDockerIT研修制度を聞いてみたデータベース基礎LAN構築AWSWindowsサーバー基礎SEカレッジ導入事例テスト自動化DNS簿記情報処理資格Raspberry Pi要求定義ロジカルライティング新人研修サーバサイドJavaPマークVLAN単体テストトレンドネットワーク入門Javaプログラミング基礎インフラエンジニアアンガーマネジメントアジャイルプロジェクトマネージャベンダーコントロールプロトコルコーチングIT基礎GoF品質管理Javaプログラミング応用データサイエンティストC# 応用ロジカルコミュニケーションロジカルシンキング財務データベース設計ヘルスケアExcel営業知識マルチスレッドプログラミングCloudインフラ実機演習CCNATCP/IPテストケース決断力法律知識Modern JavaScriptLVSプロジェクト管理機械学習応用情報技術者WBSActive DirectoryCSS3サーバー構築パフォーマンスチューニング試験対策CentOS7フレームワークリファクタリングZabbixITILルーティングSQLインジェクション新人育成UIスクラムネットワーク構築インデックス設計図解術非エンジニア向け情報漏えい見える化ITパスポートHTML5HTML/CSSRDBJavaScript基礎クラウドOSPFVPNデータベースセキュリティ物理設計(データベース)Python入門統計学Deep Learning微分・積分ソフトウェアテスト基礎Vue.js片付け術サイバー攻撃UI/UX犯罪心理学正規化理論Webアプリケーション開発管理職研修JavaEEDHCP会社規模99名まで経営改善CentOSLAMP環境ロードバランサーBGPエンゲージメントマネジメントセキュリティ入門プロジェクト失敗事例システム開発データベース障害セルフマネジメントOS・システム基盤PDCAトラブルシューティングDBA中級Windowsサーバー応用業務効率化リスク管理マーケティングクリティカル・シンキングプロダクトマネージャLPIC-1ブロックチェーンデータベース応用Junit会社の仕組み法改定UXCisco情報セキュリティマネジメント内定者研修サーバーサイドJavascript基本コマンド要件定義コマンド冗長化Windows次世代高度IT人材UMLPHPウォーターフォールモデルM5Stackネットワーク管理顧客ヒアリング関数型プログラミングDevSecOps仮想通過IPAインターネットルーティング基礎IT人材マウスで学ぶMVC基礎プロダクトマネジメント論理設計IPアドレスITサービスマネジメントテスト手法CCENT塗り絵開発環境構築表計算ソフト栄養学HTTP会社規模199名までMachine Learningプロジェクト計画リーダーシップ論理設計(データベース)HTTP/2.0サーバーOSI参照モデルPMO失敗から学ぶWeb API財務諸表レビュー情報システム部門向けGit自己分析GO言語ビジネスインダストリインタビュー技法OJTインターネットルーティング応用会社規模49名まで業務知識/業界知識ソフトウェアテスト応用教養Wireshark会話術継続的インテグレーション (CI)インバスケットRIP冗長化入門LaravelWebSocketC-CENT自動構築Node.js新人教育画像認識チームビルディング令和時代パケットキャプチャテスト技法並列処理PMP®Apacheシステム設計バージョン管理スタティックルートモダンJS (Modern JavaScript) 基礎概念設計(データベース)インフラ監視ニューラルネットワークWebWorkerSelenidechefコンピュータ数学サーバーダウンnpmやり直し数学Infrastructure as CodeチャットポットRESTful APIHaskellスクリプト言語PDUEC2継続的インテグレーション(CI)GitHubバッファオーバーフローハンズオンプライベートクラウドgulpフロントエンド超上流工程目標設定4Bizリーダブルコード会社規模300名以上アプリ開発Go言語 (golang)LightsailネゴシエーションDoS攻撃IT資格Chainer数字力基本設計財務会計アセンブラキャリア形成タイムマネジメントビルドツールつながる工場内部設計見積手法OpenStackデータマイニングリスクコントロールMicrosoft Azureエディタ負荷分散共創AI人材FinTechBootstrapコンピュータ基礎ワークライフバランスシンギュラリティモチベーション労働関連法基本用語プロジェクトリーダー

過去の記事