2025/6/13の記録です。
講師：小谷先生
JavaScriptとは？
JavaScriptは、HTMLやCSSと並ぶWebの中核技術の1つで、Webページに動的な要素を追加するためのプログラミング言語です。
※Javaとは全く異なる言語です。
JavaScriptの特徴と活用
どんな時に使う？
-
アニメーション
-
ボタンの動作
-
ポップアップなど、インタラクティブな動きの追加
何のために使う？
-
Webコンテンツの動的生成
-
フォーム入力のチェック
-
ブラウザとサービス間のやりとり など
難しさの理由
-
HTML/CSSとの連携が必要なため、基礎知識がないと難しい
-
Webサイトの見える部分に関係する言語で、構造と装飾の理解も不可欠
メリット
-
環境構築不要（すぐに書き始められる）
-
フロントエンドもバックエンドも対応可
-
フレームワークが豊富
jQueryとは？
jQueryは、JavaScriptを簡単に書くためのライブラリです。2006年にJohn Resigによって開発されました。
多くのWebサイトがjQueryを使って動的な動きを実現しています。
jQueryを使うための3ステップ
【その1】jQuery本体の読み込み
HTMLファイルの一番上に、以下のような記述を追加します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
読み込み方法は2種類：
-
CDNで読み込む（一般的）
-
ファイルをダウンロードして読み込む
【その2】自作のコードを読み込む
<script type="text/javascript">
// ここに自作コード
</script>
または外部ファイルとして読み込む方法：
<script type="text/javascript" src="js/custom.js"></script>
【その3】HTMLの要素と連動させる
HTMLのタグにIDなどを指定し、JavaScriptと連携。
この工程にはHTML・CSSの理解が必須です。
Webページの基本構造は3つ！
-
HTML（構造）
-
CSS（装飾）
-
JavaScript（動き）
この3つだけで、今のWebページの大半が作られています。
ソースを見る力をつけよう！
実際のWebページのソースを見て、「どこにどんなコードが使われているか」を理解することが大切です。
よくある現場の会話：「こんな動きのページ作れる？」に対応するには、仕組みの解析が必要！
よく使われるキーワード例（検索用）
JavaScript系
-
js アコーディオンメニュー
-
js タブメニュー
-
js ハンバーガーメニュー
-
js スライダー
-
js ドリルダウン
-
js フェードイン／アウト
-
js モーダルウィンドウ
-
js カルーセル
-
js ユーザーエージェント切り替え
-
js 電話発信
CSS系
-
CSS アコーディオンメニュー
-
CSS タブメニュー
-
CSS スライダー
-
CSS モーダルウィンドウ
※CSS3の進化により、JavaScriptを使わず実装できる動きも増えています。
まとめと注意点
-
WebサイトはHTML・CSS・JavaScriptで構成されています。
-
「作る」よりも「修正できる」能力が重視されます。
-
実務では「再現力」「解析力」「改修力」が大切です。
作るだけでは不十分。
実際の案件では、他人が作ったWebサイトを理解し、適切に修正・改善できる技術と経験が求められます。
