ぐらみんこーど レベル10：本格Webサービス開発
ぐらみんこーど レベル10：本格Webサービス開発
No.131 ～ 150
このレベルでは、サーバーやデータ保存など、より本格的な Web サービス開発に挑戦します。 デザイン面では CSS や Bootstrap を使った見た目の改善方法も学びます。 実際の Web サービスに近い仕組みを学びながら、発展的な内容に取り組みます。
学ぶ内容
- Webアプリ制作
- CSS デザイン
- Bootstrap デザイン
- JSON ファイル
できるようになること
- 本格的なWebサービスの仕組みを理解する
- 実際の開発に近い構成を体験できる
このレベルの課題
| No. | タイトル | 課題のねらい |
|---|---|---|
| 131 | 見た映画のデータベースに機能を追加する（その１） | 123 から作成していたデータベースに更に評価や検索、並べ替え機能を追加します。 ここでは以前のプログラムをどのように変更していくかの方針を確認します。 |
| 132 | 見た映画のデータベースに機能を追加する（その２） | 131 からの続きの課題となります。ここでは不要なデータを削除し、必要な関数を追加して一通りメニューが表示されるところまで実施します。 |
| 133 | 見た映画のデータベースに機能を追加する（その３） | 131 からの続きの課題となります。 ここでは映画自体の情報を登録・閲覧・削除する機能を作成します。 |
| 134 | 見た映画のデータベースに機能を追加する（その４） | 131 からの続きの課題となります。 ここでは映画の閲覧履歴に映画の情報を登録できる機能を作成します。 |
| 135 | 見た映画のデータベースに機能を追加する（その５） | 131 からの続きの課題となります。ここでは映画情報に監督やタイトルを追加し、登録した情報を外部ファイルに保存する機能を作成します。 |
| 136 | 見た映画のデータベースに機能を追加する（その6） | 131 からの続きの課題となります。ここでは登録したデータを日付やタイトルで検索したり、並べかえを行う機能を作成します。これでアプリは完成です。 |
| 137 | CSSでもっと進んだスタイルを使おう（その１） | 見栄えを作る Style を使って枠線をつけたり余白を付ける方法を学習します。 |
| 138 | CSSでもっと進んだスタイルを使おう（その２） | 見栄えを作る Style を外部の CSS ファイルに分ける方法を学習します。 |
| 139 | Bootstrapで見た目をかっこよくしよう（その１） | CSS フレームワークである Bootstrap を使った HTML ページの作り方を学習します。ここではテンプレートを変更していきます。 |
| 140 | Bootstrapで見た目をかっこよくしよう（その２） | 139 からの続きの課題となります。Bootstrap で余白を付けたりボタンや入力フォームを作成します。 |
| 141 | Bootstrapで見た目をかっこよくしよう（その３） | 139〜140 からの続きの課題となります。Bootstrap のアラートメッセージ、グリッド機能、ナビゲーションメニューなどを使って、Web ページの見た目をより洗練させる方法を学習します。 |
| 142 | Webアプリの映画鑑賞記録を作ろう（その１） | Bootstrap と Express.js を組み合わせて映画鑑賞記録の Web アプリ版の開発を開始します。プロジェクトの構築、HTML の大枠設計、タイトルの設定など基礎的な部分を作成します。 |
| 143 | Webアプリの映画鑑賞記録を作ろう（その２） | 142 からの続きの課題となります。ナビゲーションメニューを追加し、データ表示用のテーブルと映画追加フォームの HTML 構造を実装します。 |
| 144 | Webアプリの映画鑑賞記録を作ろう（その３） | 142 からの続きの課題となります。映画データページの HTML を作成し、複数ページを統合的に設計して鑑賞記録ページとの連携構造を構築します。 |
| 145 | Webアプリの映画鑑賞記録を作ろう（その４） | 142 からの続きの課題となります。Node.js と Express.js を使い、静的ファイルの配信と EJS テンプレートエンジンを使って URL によって動的にページを表示する仕組みを実装します。 |
| 146 | Webアプリの映画鑑賞記録を作ろう（その５） | 142 からの続きの課題となります。フォームから送信された映画データをサーバーで受け取り、JSON 形式でファイルに保存・読み込みする処理と番号の自動付与機能を実装します。 |
| 147 | Webアプリの映画鑑賞記録を作ろう（その６） | 142 からの続きの課題となります。JSON ファイルに保存した映画データを読み込んで画面に表示する機能と、データの削除機能を実装します。 |
| 148 | Webアプリの映画鑑賞記録を作ろう（その７） | 142 からの続きの課題となります。複数の JSON ファイル（映画データと鑑賞記録）を連携させ、セレクトボックスの動的生成、鑑賞記録の保存、番号の自動付与機能を実装します。 |
| 149 | Webアプリの映画鑑賞記録を作ろう（その８） | 142 からの続きの課題となります。鑑賞記録を JSON ファイルから読み込んで表示し、映画データとの連携表示および削除機能を実装します。これで Web アプリが完成します。 |
| 150 | ぐらみんこーど修了 | ぐらみんこーど修了の課題です。これまで学習してきた内容の振り返りと、プログラミングスキルをさらに向上させるためのアドバイス、プログラミングが活躍する職業の紹介など、今後の学習の方向性を案内します。 |