Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編
（最終更新日：2024年01月22日）
Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編のゴール
この講座では、JavaScriptについて、基礎的な開発知識を習得することを目的としています。たくさんの問題を解くことでプログラミングスキルの土台を築きます。
Webアプリ開発(フロントエンド, CSSやJavaScriptの演習) 基礎講座 実践編の詳細
講座詳細
- 受講対象者DX推進人材 共通スキル
- 受講可能形態集合研修・オープン研修・個別指導研修・eラーニング
- 想定受講時間（eラーニング）21.5時間
- 講座日数（研修）3日
習得スキル
- 必要となる前提知識HTML/CSS/JavaScript
- 習得できるスキル・知識プログラミング力
- 対応資格基本情報技術者試験
デジタルスキル標準項目
- 標準DX推進スキル標準
- 学習項目テクノロジー（ソフトウェア開発）
- Webアプリケーション基本技術
- フロントエンドシステム開発
カリキュラム詳細
STEP
1
JavaScriptでつくるHigher or Lower
- スタイル演習ブック
- 想定時間120分
- このブックでは、HTMLとJavaScriptを活用して 「Higher or Lower」というゲームを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。
STEP
2
JavaScriptでつくるおみくじ
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとJavaScriptを活用して簡単なおみくじを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。
STEP
3
JavaScriptでつくる残り文字数表示
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとJavaScriptを活用して簡単な残り文字数表示を作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。
STEP
4
JavaScriptでつくるポップアップ
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTMLとJavaScriptを活用して クリックで開閉するメッセージボックスを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。
STEP
5
JavaScriptでつくるタイマー
- スタイル演習ブック
- 想定時間90分
- このブックでは、HTMLとJavaScriptを活用して簡単なカウントダウンタイマーを作成します。実際に一つのプログラムを作成してゆく中で、HTMLとJSを連携させたプログラミングがどのように行われるかを理解することが可能です。
STEP
6
HTML&CSS&JSでつくるサムネイルグリッド
- スタイル演習ブック
- 想定時間120分
- このブックでは、HTML, CSS, JavaScriptを使用して、並べられた縮小店舗イメージ画像にマウスを乗せる事で 大きな画像が表示されるような、サムネイルグリッド型のレイアウトを作成していきます。
STEP
7
CSS3+jQueryでつくるスライドショー
- スタイル演習ブック
- 想定時間60分
- このブックでは、当サイトのコンテンツである「はじめてのCSS/CSS3」および「はじめてのJavaScript/jQuery」の学習を完了した方を対象として、CSS3とjQueryを使用した簡単なスライドショーを作成します。
STEP
8
CSS3+jQueryでつくる2Dゲームモーション
- スタイル演習ブック
- 想定時間90分
- このブックでは、CSS3とjQueryを活用してキャラクターの2Dゲームモーションを作成します。このブックを通して、「CSSスプライト」と呼ばれるコーディング技法を学習できます。
STEP
9
jQueryとCSSでつくるスクロールすると隠れるヘッダー
- スタイル演習ブック
- 想定時間60分
- このブックでは、スクロールダウンすると隠れるヘッダーメニューを作ります。 jQueryを使ったスクロールイベントの処理方法やCSSクラスを使った要素の表示/非表示の方法について深く学習することができます。
STEP
10
フロントエンド演習 jQueryとCSS3で作るアコーディオンパネル
- スタイル演習ブック
- 想定時間60分
- このブックでは，jQueryとCSS3を利用して簡単なアコーディオンパネルを作成します。 アコーディオンの開閉状態の変化に応じてアイコンを回転させるアニメーションを追加します。
STEP
11
jQueryとCSS3で作るコンタクトフォーム
- スタイル演習ブック
- 想定時間60分
- このブックでは、HTML,CSSとjQueryを利用してコンタクトフォームを作りながら、スクロールイベントの検知やCSSクラスを使った表示/非表示の方法など実践的な内容を学習することができます。 最終的に自分のコンタクトフォームを作成できることを目標にしています。
STEP
12
jQuery UIでつくる ドラッグ&ドロップリスト
- スタイル演習ブック
- 想定時間90分
- このチャプターでは jQueryの拡張ライブラリ(機能群)である「jQueryUI」を使用して、ドラッグ & ドロップで操作ができるリストを作成します。
STEP
13
jQueryでつくるタブ切り替え
- スタイル演習ブック
- 想定時間90分
- このブックでは、jQueryを使用して タブをクリックすると中身が切り替わるレイアウトの学習を行います。
STEP
14
jQueryでつくるパララックス
- スタイル演習ブック
- 想定時間60分
- 「パララックス」は、スクロールをした際に要素ごとに移動速度をずらすことで視覚的な効果を生じさせる技法です。パララックスを活用することにより、表現力豊かなサイトを作成することが可能になります。このブックでは、パララックスの基礎的な仕組みと簡単な実装についてjQueryで学習します。
STEP
15
jQueryで作る数独ソルバ Part.1
- スタイル演習ブック
- 学習時間90分
- このブックでは数独パズルの正解を計算するソルバプログラムを作成します。 手がかりの少ない難しい数独パズルを解くためにはバックトラックという手法が必要になりますが、このブックではバックトラックは扱わず簡単な数独問題のみ解答できるソルバの作成をゴールとします。 (バックトラックについてはPart.2で扱います。) 配列操作を多用するので、先に「JavaScriptの配列操作を理解する」を読んでおくことをおすすめします。
STEP
16
jQueryで作る数独ソルバ Part.2
- スタイル演習ブック
- 想定時間60分
- Part.1では単純な方法で簡単な数独パズルを解くプログラムを作成しました。 しかし、手がかりの少ない難しい数独パズルを解くためにはそれだけでは不十分です。 ここではバックトラックという手法を用いて難しい数独パズルも解けるようにプログラムを改良していきます。
STEP
17
フロントエンド演習 jQueryでつくるシンプルなマークダウンエディタ
- スタイル演習ブック
- 想定時間60分
- このブックでは，jQueryとさまざまなオープンソースライブラリを組み合わせてマークダウンエディタを作ってみます。 オープンソースライブラリを多く利用するためかなり実践的です。事前に「JavaScript基礎 jQuery編」「CSS基礎 margin padding編」を学習しておくとよいでしょう。
他の講座を見る
生成AI関連講座
資格取得対策講座
DXリテラシー標準領域
CONTACT
ご相談・ご要望など、お気軽にお問い合わせください
