【AngularとNode.jsで始める】JavaScript系 WEBアプリケーション開発コンプリートガイド①

そもそもターミナルとはどういう目的で使用するものなのかを説明していきます。

ターミナルのデフォルト設定が素っ気ないので、かっこいデザインにカスタマイズする方法を説明していきます。

フォントサイズなども自分の好みに合うようにカスタマイズしていきましょう

ターミナルのフォント色を変更する為に必要なフレームワークを導入する為に、先にgitコマンドを使えるようにしていきます。

ターミナルの基本操作で大切なlsコマンドとcdコマンドをご説明していきます。

ターミナルやFinderで隠しファイルを見る方法をご紹介していきます。

ターミナルでgitコマンドが使えるようにしていきます。

WindowsでGitコマンドを使えるようにする方法も解説していきます。

Preztoを使ってターミナルのフォント色が変更されるようにしていきます。

Preztoを使ってターミナルのフォント色が変更されるようにしていきます。

いかがでしたか？

プログラミングしていくにあたり、ターミナルはよく使うかと思います。

せっかくなら映画に出てくるようなカッコイイデザインにしておくことで、日々のテンションが上がり、開発効率も上がると思いますので是非チャレンジしてみてくださいね。

Gitとは何か？ということを説明していきます。

このコースでは、GitKrakenを使うことでできる限りGUIベースで作業を行なっていきます。

GitHubアカウントの作成手順をご説明して行きます。

SSHの概要とGitHub公式SSH接続ガイドのご紹介をしていきます。

SSHキーを使ってのGitHubアクセスを行う為に、SSHキーの作成手順をご説明して行きます。

生成したSSH公開鍵をGitHubに登録する手順をご説明して行きます。

SSH接続の確認方法をご説明して行きます。

ターミナルでのコマンドが苦手な方にお勧めの「GitKraken」の紹介とインストール手順をご説明して行きます。

GUIでブランチ状況が確認できるのでお勧めのツールです。

GitKrakenにもSSH鍵の紐付けを行い、GitHubアカウントと連携できるように設定を行います。

Gitはプログラミングを進めていく上で非常に便利なツールです。

コマンドが苦手な人も、GitKrakenを上手く組み合わせることで上手く使いこなして行きましょう！

開発で役立つVSCodeの紹介とインストール方法をご説明して行きます。

いよいよ本編に入ります。

前回までのセクションで、開発の上で必要となる様々な知識を既に学んでいるので、本編の方で、その知識をアウトプットしながら理解をより深めて行きましょう！

実際に開発に入る前に、今回開発するシステムの全体像をご説明して行きます。

Postmanは主にバックエンド側のAPI通信テストを行う目的で利用します。

例えば、いきなりフロントエンドとバックエンドをそれぞれ開発し、接続エラーが発生した場合、どちらに原因があるのかを確認するのに苦労します。

なので、最初はバックエンド側を単体でテストし、不具合を解消した後、フロントエンドと結合を進めます。

Javascriptプログラミング言語で必須となるNode.jsのインストール手順をご紹介して行きます。

Angularをローカル環境でビルドできるようにCLIをインストールして行きます。

ローカル環境にAngularアプリの作成する手順をご紹介して行きます。

ソースコードの編集手順やリビルドについてご説明して行きます。

GitHubに今回作成したAngularアプリケーションを登録する手順をご紹介して行きます。

GitでのCommit（コミット）・Push（プッシュ）・Pull（プル）についてのご説明をして行きます。

GitKrakenでPushする方法をご説明していきます。

新規にAngularアプリケーションを作成して行きましょう。

新規に生成したアプリとGitHubリポジトリとの紐付けを行っていきましょう。

一からレスポンシブデザインをコーディングして行くのは大変です。

それを楽にする為にBootstrap（ブートストラップ）を使います。

これによりフロントエンドデザインの汎用的な部分のコーディングの負担が大幅に抑えられます。

実際にBootstrapフレームワークをインストールして行きましょう。

Bootstrapを使ってヘッダーコンポーネントを作って行きましょう。

大まかに作りたいデザインをワイヤフレーム で作っておくと、頭の中を整理でき、コーディングに集中できるようになるのでオススメです。

ヘッダーコンポーネントの作り込みをして行きましょう。

出来上がったヘッダーコンポーネントなどのソースコードを一式GitHubにプッシュして行きましょう。

前のセクションでヘッダーを作ったので、このセクションではメインコンテンツ部分の作り込みを行っていきましょう。

授業を受ける中でわかりにくいレクチャーがあれば該当のレクチャーに対し、ぜひQ&AやDMでご質問くださいね。

直接ご回答させて頂くだけでなく、必要に合わせてレクチャーのアップデートも行います。

Bootstrapを使う事で、コーディングの負担を大幅に減らす事ができます。

便利なサービスを組み合わせながらシステム開発を行なっていきましょう。

Bootstrapを使いながらレスポンシブデザインを作り込む方法をご紹介していきます。

Angular, React, Vue.jsなどのJavascript言語の目玉機能の一つであるSPA（シングル・ページ・アプリケーション）をシステムに適用していきましょう。

商品詳細ページの作り込みを行なっていきましょう。

*ngForを使う事で、html内でfor文が扱えます。とても便利なのでぜひ使いこなせるようにしましょう。

スタイルシートはhtmlでのデザインを作り込む際に使います。簡単なスタイルシートの使い方と、Angularでのスタイルシートの使い方をご紹介していきます。

スタイルシートを使って、スタイルの微調整とオリジナルClassの作り方をご紹介していきます。

同じclass名を定義した場合の適用優先順位についてご説明していきます。

コンポーネント毎に用意されるスタイルシート内にスタイル情報を記述する事で、そのスタイルはそのコンポーネントのみに適用されます。

プロジェクト全体にスタイルを適用させたい場合はGlobalスタイルシートであるstyles.scssに記述していきます。用途に合わせて使い分けを行いましょう。

VSCodeはそのままでも便利なツールですが、エクステンションを使う事でより使いやすく便利にカスタマイズする事が可能です。その方法についてご説明していきます。

Module（モジュール）の役割についてご説明していきます。

Productのコンポーネントが増えてきたので、Module化（モジュール化）を行っていきましょう。

Productのコンポーネントが増えてきたので、Module化（モジュール化）を行っていきましょう。

Productのコンポーネントが増えてきたので、Module化（モジュール化）を行っていきましょう。

スタイルシートのデフォルトでのお節介機能を無効化する方法をご紹介していきます。

プロジェクト途中で複数のファイル名を纏めて（まとめて）変更したくなった際の対応方法についてご説明していきます。

以前「Angular入門」セクションで学んだ知識を活かして動的ページを作る課題にチャレンジしましょう。

動的ページの作り方についてのご説明をしていきます。

商品詳細ページの作り込みを行っていきましょう。

商品詳細ページの作り込みを行っていきましょう。

今後DB（データベース）経由でデータを取得できるようにする為に、ハードコーディング（ソースコードへテキストの直書き）していた箇所を動的に変更されるように改修していきましょう。

カード部分のテキストを動的に対応させる方法をご紹介していきます。

カード部分のテキストを動的に対応させる方法をご紹介していきます。

商品詳細ページのテキストを動的に対応させる方法をご紹介していきます。

商品詳細ページのテキストを動的に対応させる方法をご紹介していきます。

商品詳細ページにカバー写真が適用されるようにアップデートしていきましょう。

Base64とは何か？というご説明をしていきます。

商品詳細ページで読み込めるようにしたカバー写真を動的に読み込まれるようにアップデートしていきましょう。

商品リスティングページのカード写真も動的に読み込まれるようにアップデートしていきましょう。

これまでの変更内容ごGitHubへPushしていきましょう。

Masterブランチにマージする為に、MasterへPullリクエストを作成し、GitHub側でそのPullリクエストを承認します。そのプロセスを含めてご紹介していきます。

フロントエンド側がある程度できてきたので、このセクションではバックエンドサーバーの開発を行います。バックエンド側はNode.jsで開発を行っていきます。

バックエンド開発を進めるにあたり必要なexpressやmongooseなど必要となるフレームワークをインストールし、起動できるまでセットアップをしていきましょう。

「エンドポイントとは何か」とエンドポイントの作成方法についてご紹介していきます。

バックエンド開発で便利なPostmanという開発ツールを用いて開発したエンドポイントの動作チェックを行っていきましょう。

このコースではNoSQLであるMongoDBを用いてDB（データベース）側の開発を行っていきます。

こちらも非常に使い勝手の良いシステムなので、ぜひ頑張って覚えていきましょう。

作成したDB（データベース）に接続していきましょう！

GitHubに公開されては困る機密情報を、自動でPushされないように対策する方法として.gitignoreを使います。その設定方法についてこの授業で詳しくご紹介していきます。

以前Angular入門のセクションで「Type（型）」についてご説明しました。

Model（モデル）は、例えば「名前・身長・体重・血液型」のように決まった情報ルールを持たせる事ができます。

MongoDBにサンプルデータを保存できるようにする手順をご紹介していきます。

非同期処理を行う際に便利なAsync, Awaitについてのご説明をしていきます。

データベースの初期化を簡単にできるように設定する手順をご説明していきます。

今後システムが巨大化していく事に備え、用途に合わせてエンドポイントを分けられるように準備をしておきましょう。

商品用のエンドポイントを作成していきましょう。

商品用のエンドポイントを作成していきましょう。

エラーハンドラー（Error handler）の設定方法をご説明していきます。

Http通信におけるレスポンスステータスコードのルールについてご紹介していきます。

これまでの変更をGitHubにPushして行きましょう。

いよいよ別々に構築していたフロントエンドとバックエンドを一つのシステムとして結合して行きます。

もしプログラムが上手く動かない・・・という場合は、

以前の「レクチャー69 補足説明」の内容が反映されているかを確認してみてくださいね。

それでは引き続き頑張って行きましょう。

Udemy講師 アツシ先生

バックエンド側とのやり取りに関してはService（サービス）にまとめましょう。

これでComponent.tsはフロントエンド処理に関する記述に簡素化されてソースコードの視認性も良くなります。

バックエンドとの非同期通信を行う際にObservableを使うと便利なので、前段階としてObservableとは何か？という説明を行なっていきます。

先ずは理解を深める為に、Observableを用いたサンプルプログラムを作ってみましょう。

学んだObservableの知識を用いてフロントエンドとバックエンドの結合を行なっていきましょう。

フロントエンド側から、アドレスが異なるバックエンドサーバーにアクセスできるようにする為にProxy（プロキシ）設定を行なっていきましょう。

Observableのsubscribeは、通常であればcompleteまたはerrorが発生した時に終了しますが、http通信の場合はそもそもが一往復で通信が完了する仕様である為、nextでデータを受け取った後、自動的にcompleteが走ります。

商品詳細ページ側でも、MongoDBからデータを取得できるようにアップデートしていきましょう。

GitHubへPushしてMasterにマージさせる事で、このセクションで学んだ内容を成果としてアウトプットしましょう。

HerokuはAWSよりも簡単に、直感的に操作できるクラウド型のWebサーバーを提供するサービスです。

まだ日本でメジャーではないかもしれないですが、非常に便利なサービスなのでぜひ頑張って覚えて行きましょう。

Herokuでの初期設定の方法をご説明していきます。

HerokuはとてもUIが洗練されていて使いやすいのでぜひ一緒に頑張っていきましょう。

プロジェクト側も、Herokuがプロダクションビルドできるようにする為の設定を行う必要があります。

その方法をこの授業でご説明していきます。

Herokuでプロダクションビルドを行えるようにする為に、先ずはローカル環境でプロダクションビルドが行えるようにします。その後、その設定情報をHerokuで行えるように設定します。

Herokuでプロダクションビルドを行えるようにする為に、先ずはローカル環境でプロダクションビルドが行えるようにします。その後、その設定情報をHerokuで行えるように設定します。

Heroku側でサーバー起動時に実行されるスクリプトの設定を行います。

これにより、Heroku側でサーバー起動できるようになります。

本番DBと開発DBを自動的にシステム側で切り替わるように設定を行います。

自動化する事でヒューマンエラーの混入を未然に防ぎましょう。

本番環境用のDB（データベース）をセットアップします。

開発用DBと分ける事で、安心して開発が行えるようになります。

HerokuのWebサーバーにDeploy（デプロイ）を行います。

デプロイする事で、インターネットがつながる環境であればどこからでもアクセスできるようになります。

Herokuでビルドエラーが起きる場合の対処法について

いよいよフロントエンド側のデザインを作り込んでいきます！

一気にデザインのクオリティ（品質）をアップさせましょう！

ゼロから全てを作るには膨大な時間を要してしまいます。

上手にベースとなるデザインを取り入れて最高のデザインを一緒に作って行きましょう。

実際にダウンロードしたテーマをローカル環境で動かすまでを行います。

同時に既存プロジェクトをローカル環境で動かす手順も一緒に学んで行きましょう。

外部の組織が開発しているデザインプロジェクトを、自分たち（自社の）プロジェクトへ組み込んでいく為の全体の流れを解説していきます。

まずはスタイルシート側の移植から行っていきます。その次にHTMLの移植を行っていきます。

ヘッダー部分のHTMLの移植を行っていきます。元々のヘッダーデザインから、プロがデザインするヘッダーにデザインをアップデートしていきます。

ヘッダーの背景色などを簡単に変更する方法をご説明していきます。

ヘッダー部分のHTML移植と、必要なボタンの配置を行っていきます。

Angular12をインストールされている方へ。

Angular9からAngular12になり、次の動画で説明するapp.component.ts内の記述の方法が一部変わっています。

その詳細について説明させて頂きます。

ヘッダー部分をスクロールした際にフェードエフェクトを追加していく手順をご説明していきます。

続いて商品カード部分のHTMLデザインも移植していきましょう。

スタイルシートでVariablesを用意しておく事で、一つ一つのソースファイルの変更を行う事なく、Variablesの設定を変えるだけでサイト全体の設定を一気に変更できるので便利です。その使い方を含めてご説明していきます。

コンテンツページ側もデザインを一新していきましょう！カバー写真を設定するだけでサイトの印象が一気に変わります。

商品詳細ページのカバー写真部分もレスポンシブ対応していきます。その時にngStyleを使うと便利なのでその使い方を含めてご説明していきます。

続いて商品詳細ページのメインコンテンツ部分のデザインも移植していきます。デザインの印象がどんどん良くなっていきます。

{‌{}}（ダブルカーリーブラケット）を使ってDBからテキスト情報を取得できるようにアップデートしていきましょう。

移植したデザインHTMLにレスポンシブデザインを考慮した修正を加える手順をご説明していきます。

これまでの変更をコミットし、GitHubへPushとMasterにMergeしてサーバー側にも自動更新をかけましょう。