Webアプリケーション制作のための小ネタ集（人気順）

ここでは、過去の新人エンジニアの皆さんから相談のあった技術を人気順にご紹介しています。リンクになっていますので、下記の見出しをクリックしてください。サンプルページがあるものには(Sample)というリンクがあり、別窓で開きます。

MySQLを使うネタ

1. データベースのエクスポートとインポート
2. JavaのLocalDateTimeとMySQLのDATETIME型を連携させる方法
3. MySQLの日付操作まとめ＆使い方ガイド
4. 開始終了時間を指定してレンタル予約可能なものを知りたい
5. ウィンドウ関数ROW_NUMBER／RANKでランキングを出したい
6. AUTO_INCREMENTをリセットしたいときの対処法と注意点
7. オートコミットモードのオンオフを切り替えたい
8. クエリ結果の行数を制限したい
9. MySQL Workbenchでセーフモードを解除する方法
10. 外部キー制約を一時的に無効にしたい
11. ユーザー権限を安全に扱うための基本ガイド
12. MySQLで自己結合（Self Join）を使いこなす
13. テーブルのデータを定期的に更新したい
14. データの矛盾が起こらないように排他制御したい
15. ビュー（View）の使い方とメリット
16. MySQLのストアドプロシージャをJavaから呼び出す方法

JavaとEclipseを使うネタ(共通)

1. パスワードを安全にハッシュ化する方法
2. ファイルの変更内容を確認しながらマージ（結合）したい
3. キーによる高速なアクセスが可能なHashMapを使いたい
4. コードを書いていて行き詰まったらFIXMEで後日チャレンジする
5. Eclipseの使い方で疑問がある（FAQ）

Spring Bootを使うネタ

1. 画像をアップロードしたい
2. 検索条件を動的に変更できるDAOを作りたい（編集中）
3. JavaScriptにデータを渡して動的に画面に表示したい
4. チェックボックスの値をListや配列で受け取る方法
5. セレクトボックスを使ったフォーム送信
6. 画面上に表示させずにデータを保持し、コントローラーへ渡したい
7. フォームからコントローラーに渡したいデータが多すぎるときの対応方法
8. System.out.printlnを卒業してLogback／SLF4Jでログを残したい
9. LINEのように複数人でチャットできるようにしたい
10. Thymeleafで入れ子のリストにアクセスする方法を知りたい
11. Thymeleafで添字を使いたい
12. Thymeleafでnullの場合にデフォルト値を表示したい

HTML/CSSを使うネタ

1. GoogleMapを使って現在地から目的地までのルートを表示したい (Sample)
2. 背景を動画で覆いたい (Sample)
3. 背景画像を1枚の写真で覆いたい (Sample)
4. Font Awesome を使いたい (Sample)
5. グーグルウェブフォントを使いたい (Sample)
6. モーダルウィンドウを作りたい (Sample)
7. ラジオボタンのラベルの色を変化させて押しやすくしたい (Sample)
8. ラジオボタンを選択した際の色を変えたい (Sample)
9. フォーム部品をグループ化して分かりやすくしたい (Sample)
10. ビデオを再生したい (Sample)
11. ページ内リンクでゆっくりスクロールさせたい (Sample)
12. 「必須」などの文字を項目の後ろにつけたい (Sample)
13. 入力フォーム側で様々な入力チェック（バリデーション）をしたい (Sample)
14. datalistを使って入力欄で予測変換（入力候補）を出したい (Sample)
15. 音楽ファイルを扱いたい (Sample)
16. メールアドレス等を指定してメールを送れるリンクを作成したい (Sample)
17. 吹き出しにタイプライター効果で文字列を表示したい (Sample)
18. 最大値と最小値の制限のある数値入力フォームを作りたい (Sample)
19. ボタンにホバーした際の様々な効果を知りたい (Sample)
20. ツールチップで詳細情報を表示したい (Sample)

JavaScriptを使うネタ

フォーム

• ログイン情報を記憶するログインフォームが欲しい (Sample)
• よく使う項目が上にくるドロップダウン(Sample)
• データ送信を確認するダイアログを出したい (Sample)
• OKとキャンセルが選べるダイアログを表示したい (Sample)
• データが入力できるダイアログを表示したい (Sample)
• リアルタイムにインクリメンタルサーチをしたい (Sample)
• リアルタイムバリデーション付きユーザー登録フォームを作りたい (Sample)
• 最後まで読まないとチェックできないチェックボックスを作りたい (Sample)
• 「同意する」をチェックしないと押せないボタンを作りたい (Sample)
• 郵便番号から住所を自動入力したい (Sample)
• 漢字を入力したら自動的にカタカナを入力したい (Sample)
• テキストエリアに入力された文字数を数えたい (Sample)
• パスワードを表示するチェックボックスをつけたい (Sample)
• チェックボックスでチェックできる項目数を制限したい (Sample)
• 二重送信を防止するボタンを作りたい (Sample)
• リップル（波紋）効果のあるボタンを作りたい (Sample)
• 検索キーワードをcookieに保存して繰り返し同じキーワードで検索できるようにしたい (Sample)

画像

• モーダルウィンドウの画像のギャラリーを作りたい (Sample)
• 背景をぼかしたモーダルウィンドウを作りたい (Sample)
• オンラインショールームを作りたい (Sample)
• カラーピッカーを使って色を塗りたい (Sample)
• アップロードする画像をプレビュー表示させたい (Sample)
• 折れ線グラフを表示したい (Sample)
• 円グラフを表示したい (Sample)
• 棒グラフを表示したい (Sample)
• 5角形レーダーチャートを表示したい (Sample)
• 写真のズームアウトアニメーションを作成したい (Sample)
• ローディング画面を表示してユーザーに待ちのストレスを与えない (Sample)
• ドラッグアンドドロップで画像ファイルをアップロードした上でプレビューをしたい (Sample)

動き

• 下にスクロールしたら「ページトップへ戻る」を表示させたい (Sample)
• タブで表示を切り替えたい (Sample)
• 更新中を表示するボタンでユーザーのストレスを軽減したい (Sample)
• 一定時間経過後に処理を実行させたい (Sample)
• 自ウィンドウを閉じたい (Sample)
• ページネーションでページ送りしたい (Sample)
• サイドバー（ドロワー）メニューを作りたい (Sample)

アニメーション

1. 数値をカウントアップするアニメーションを作成したい (Sample)
2. 進捗バーをアニメーションで動かしたい (Sample)
3. トランプのカードをダブルクリックでめくる効果を表現したい (Sample)

日時

• 過去の日付を選択できないようにしたい (Sample)
• 日時選択で開始日時以前の終了日時を選択できなくしたい (Sample)
• 誕生日から年齢を計算したい (Sample)
• 選択できる時間を15分刻みに制限したい (Sample)
• デフォルトで選択できる日時を過去の日付にしたい。20年前をデフォルトにしたい (Sample)

その他

1. テキスト読み上げ機能を実装したい (Sample)
2. 車の画像をクリックしてエンジン音を再生したい (Sample)
3. 1枚のHTMLをボタンで切り替えて複数枚のように見せたい (Sample)
4. Google Map APIを使いたい (Sample)
5. JavaScriptで簡易的に見積もりをしたい (Sample)
6. 遅延読み込みと慣性ローディングを実現したい (Sample)
7. X(旧Twitter)、Facebook、LINE等に投稿したい (Sample)
8. 日本語だけでなく英語などの多言語に対応したサイトを作りたい (Sample)
9. バッテリーの状態を表示したい (Sample)
10. webカメラを起動したい (Sample)
11. 音声チャットを実現したい (Sample)
12. 現在のページをPDFやCSVにしてダウンロードしたい (Sample)
13. コピーできないWebページを作成したい (Sample)
14. Ajaxを使いJSON形式のデータを取得したい
15. Ajaxを使いページを更新することなくページの内容を入れ替えたい（非同期通信を行いたい）
16. Ajaxを使いバリデーションをしたい
17. Ajaxを使いリアルタイムチャットを実現したい

Webアプリケーション制作のための小ネタ集　最後までお読みいただきありがとうございます。