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

なお、順番は過去の受講者の人気順です。

MySQLを使うネタ

  1. データベースのエクスポートとインポート
  2. JavaのLocalDateTime型をMySQLのDATETIME型で扱う
  3. auto_incrementの連番をリセットする
  4. view表を作る
  5. 日付関数を知りたい
  6. ストアドプロシージャを作る
  7. ストアドプロシージャをJavaから呼び出す
  8. MySQL WorkbenchのLimitを外す
  9. MySQL WorkbenchのSafe Updatesを外す
  10. ユーザーを作成し権限を付与する
  11. テーブルの自己結合
  12. テーブルのデータを定期的に更新したい
  13. データの矛盾が起こらないように排他制御したい
  14. トランザクションを使いデータの不整合を防ぐ

Javaを使うネタ

  1. 定型コードを書かないで済むようにFilterを使いたい
  2. 定型コードを書かないで済むようにLombokを使いたい
  3. コードを書いていて行き詰まったらFIXMEで後日チャレンジする
  4. パスワードをハッシュ化したい
  5. 画像などのファイルをサーバーにアップロードできるようにしたい
  6. Fileクラスを使ってディレクトリやファイルを操作したい
  7. キーによる高速なアクセスが可能なHashMapを使いたい
  8. 2重送信を防止したい
  9. QRコードを扱いたい
  10. APIを使い天気の情報を入手したい
  11. パスワードジェネレータを作りたい(Sample)

BootStrap5を使うネタ

  1. 画像を使ったスライドショーを作りたい(Sample)
  2. Webサイトのひな型が欲しい(Sample)
  3. アラートボックスを閉じるボタンで閉じたい(Sample)
  4. 大量のデータを表示するためにページネーションを使いたい
  5. アコーディオンを使って開閉できるようにしたい(Sample)
  6. バッジを使ってユーザーの注意を引きたい(Sample)
  7. パンくずリストを使ってユーザー回遊を促したい

HTML/CSSを使うネタ

  1. Font Awesome 5を使いたい (Sample)
  2. モーダルウィンドウを作りたい (Sample)
  3. 背景画像を1枚の写真で覆いたい(Sample)
  4. 背景を動画で覆いたい(Sample)
  5. カラフルなログインフォームを作りたい(Sample)
  6. フォーカスされたら1行テキストの枠色を変えたい(Sample)
  7. ラジオボタンのラベルの色を変化させて押しやすくしたい(Sample)
  8. ラジオボタンを選択した際の色を変えたい(Sample)
  9. フォーム部品をグループ化して分かりやすくしたい(Sample)
  10. スピナーを表示してユーザーの処理待ちのストレスを軽減したい (Sample)
  11. グーグルウェブフォントを使いたい (Sample)
  12. 画像を丸く切り抜きたい(Sample)
  13. ビデオを再生したい(Sample)
  14. ページ内リンクでゆっくりスクロールさせたい(Sample)
  15. マウスを載せたら画像を変化させたい(Sample)
  16. マウスではなくショートカットキーで操作したい(Sample)
  17. 中央ぞろえにしたい
  18. 選択できる日時を制限したい。今日から3ヶ月間で15分刻みの時間を指定したい(Sample)

JavaScriptを使うネタ

  1. データ送信を確認するダイアログを出したい(Sample)
  2. モーダルウィンドウを作りたい(Sample)
  3. 下にスクロールしたら「ページトップへ戻る」を表示させたい(Sample)
  4. 郵便番号から住所を自動入力したい(Sample)
  5. OKとキャンセルが選べるダイアログを表示したい(Sample)
  6. データが入力できるダイアログを表示したい(Sample)[
  7. 「同意する」をチェックしないと押せないボタンを作りたい(Sample)
  8. 時計を表示させたい(Sample)
  9. 日付を表示させたい(Sample)
  10. アップロードする画像をプレビュー表示させたい(Sample)
  11. 画像をスライドさせたい(Sample)
  12. 折れ線グラフを表示したい(Sample)
  13. 円グラフを表示したい(Sample)
  14. 棒グラフを表示したい(Sample)
  15. 定期的に処理を実行させたい・ウェブページを定期的に書き換えたい(Sample)
  16. 一定時間経過後に処理を実行させたい(Sample)
  17. カップラーメンタイマーを作りたい(Sample)
  18. マウスイベントを検知したい(Sample)
  19. 自ウィンドウを閉じたい(Sample)
  20. リンクを新しいウィンドウで開きたい(Sample)
  21. テキストエリアに入力された文字数を数えたい(Sample)
  22. モーダルウィンドウの画像のギャラリーを作りたい(Sample)
  23. ブラウザバックのリンクを作成したい(Sample)
  24. データをクッキーを使って読み書きしたい(Sample)
  25. パスワードを表示するチェックボックスをつけたい(Sample)
  26. ページネーションでページ送りしたい(Sample)
  27. ボタンで開閉するメニューを作りたい(Sample)
  28. ドロワーメニューを作りたい(Sample)
  29. Google Map APIを使いたい(Sample)
  30. Ajaxを使いページを更新することなくページの内容を入れ替えたい(非同期通信を行いたい)
  31. Ajaxを使いバリデーションをしたい
  32. Ajaxを使いリアルタイムチャットを実現したい
  33. Ajaxを使いJSON形式のデータを取得したい

JavaScriptのライブラリを使うネタ

  1. Flatpickrを使用して日付選択のウィジェットを追加したい(Sample)
  2. MediumZoom.jsを使用してスライドショーを実現したい(Sample)
  3. Moment.jsを使用して日付と時刻を表示したい(Sample)
  4. Clipboard.jsを使用してクリップボードにコピーしたい(Sample)
  5. Typed.jsを使用してタイピング風アニメーションを実現したい(Sample)
  6. SweetAlert2を使用してポップアップダイアログを表示したい(Sample)
  7. AOSを使用してプレゼンテーションのようなアニメーションを実現したい(Sample)
  8. Plyrを使用してHTML5ビデオプレーヤーを作成したい(Sample)
  9. Intro-jsを使用してページのチュートリアルを追加したい(Sample)
  10. Three.jsを使用して3D画像を動かしたい(Sample)
  11. Anime.jsを使用して画像を動かしたい(Sample)

外部リンク

  1. Bootstrap5のコンポーネント一覧
  2. Bootstrap5のチートシート
  3. LINEのトーク画面風のデザイン
  4. ボタンジェネレータ
  5. JavaScript版数当てゲーム

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