1. トップ
  2. 学校紹介
  3. 情報公開
  4. 学科情報
  5. シラバス - 科目一覧

シラバス

Webデザイン科 2024年度入学生

科目名 Webアプリケーション制作Ⅰ 作成日 2024/03/13
区分 必修 講義/実習
開催時期 1年次 後期
講義・演習駒数/週 0駒
実習・実験駒数/週 1駒
合計駒数/週 1駒
総時間数 30時間
総単位数 1単位
企業連携
授業の目的 この授業では主にReactを用いてWebアプリケーションやデスクトップアプリケーションの作成方法を学習し、同時にNode.jsやそのエコシステムの利用方法を学習することを目的とする
到達目標 Reactを用いてWebアプリケーションを作成することが出来る。

評価項目 ①定期テスト ②小テスト ③レポート ④課題 ⑤作品 ⑥ポートフォリオ ⑦成果発表 ⑧その他
割合  %  %  % 40% 50%  %  % 10%
評価基準
①Reactの基本を理解した上でアプリケーション制作に用いる事ができること。 ②GitとGitHubを理解し開発時に適切に利用ができること。 ③VS Code、Node.jsを用いて自ら開発環境構築が出来ること。
※上記に示した評価項目の割合(%)を基準に、総合評価点を算出して成績評価を行う。
※出席率が80%未満の場合は、評価対象としない。

担当教員 川島 温哉
テキスト・参考文献 https://jsprimer.net/ このサイトに書かれている事が一通り理解出来ている事が望ましい。
実務経験有無  
Webアプリケーションやスマートフォンアプリの開発に従事した実務経験がある。その経験から得た知識やスキルを活かして、本科目のアプリ開発に対する実践的な教育を行う。 
関連科目 JavaScript実習、HTML&CSS実習、WebアプリケーションⅡ、サーバーサイドプログラミングⅠ、サーバーサイドプログラミングⅡ  履修前提 前期で行うJavaScript実習の知識が身についていることが前提となる。 

授業計画

回数 学習目標 学習項目
1 前期に学習したJavaScriptの基本項目を用いて基本的なプログラミングが出来る。   前期JavaScript実習の授業で学んだ基本項目についておさらいする。  
【理解度確認】課題
2 Reactの基本を理解し、簡単なUIをReactを用いてブラウザ上に表示できる。  Reactの仕組みを学習する。  
【理解度確認】課題
3 JSXを使ってHTMLを生成することができる。   JSXの基本的な書き方を学習する。関数コンポーネント、Reactフラグメントの使い方を学ぶ。  
【理解度確認】課題
4 Reactを用いて簡単なUIを作成することができる。   Reactの基礎(単方向データフロー、props、コンポーネント)を学ぶ。  
【理解度確認】課題
5 useState、useEffectを用いて簡易的なtodoリストを作成することができる。   いくつかの基本的なビルトインフックを学習する。  
【理解度確認】課題
6 useState、useEffectを用いて簡易的なtodoリストを作成することができる。  JSの知識の復習をする。デストラクチャリング、アロー関数、関数コンポーネント等  
【理解度確認】課題
7 Viteによりアプリの雛形を作成することができる。  モジュールの使い方、デフォルトエクスポート、名前付きエクスポートのやり方を学習し、Reactでのモジュールの読み込み方法を学習する。 
【理解度確認】課題
8 react-router-domにより簡単なSPAを作成することができる。   ルーターの役割と利用の仕方を学ぶ。またページをコンポーネント単位に分割しimportで読み込む方法を学習する。 
【理解度確認】課題
9 ReactとWeb APIを使って簡単なアプリケーションを作成することが出来る。  外部APIの利用。APIのトークン、エンドポイント、JSONをJavaScriptで利用する方法を学習する。 またReactのコンポーネントライフサイクルを学び、ビルトインフックの利用や全体のデータフローについても学習する。 
【理解度確認】課題
10 Reactを用いて簡単なアプリを作成する事ができる。   Reactを利用して複数画面から成るデスクトップアプリを作成する方法を学習する。 
【理解度確認】 課題
11 Reactを用いて簡単なアプリを作成する事ができる。  ReactとNodeモジュールを用いてアプリを作成する方法を学習する。  
【理解度確認】課題
12 TypeScriptの利用方法を学ぶ。基礎的なTypeScriptの書き方を理解し、VS Code上の環境設定を自ら行い開発をスタートすることができる。   TypeScriptの基礎、型定義、環境構築の方法を学習する。  
【理解度確認】課題
13 自分でアプリケーションの開発環境を構築することができる。外部のWeb APIを利用することができる。   ①Reactと外部APIを使ったオリジナルのアプリケーションの作成  
【理解度確認】課題
14 作るアプリによって適切な技術選定を行いアプリケーションを開発することが出来る。  ②Reactと外部APIを使ったオリジナルのアプリケーションの作成  
【理解度確認】課題
15 gitとGitHubを使ってコードを管理し、適切にコミットおよびプッシュが出来る。 Vercelと連携しアプリをデプロイ出来る。  ③Reactと外部APIを使ったオリジナルのアプリケーションの作成  
【理解度確認】課題