ここでは、過去の新人エンジニアの皆さんから相談のあった技術をご紹介しています。リンクになっていますので、下記の見出しをクリックしてください。サンプルページがあるものには(Sample)というリンクがあり、別窓で開きます。
MySQLを使うネタ
- データベースのエクスポートとインポート
- JavaのLocalDateTime型をMySQLのDATETIME型で扱う
- auto_incrementの連番をリセットする
- view表を作る
- 日付関数を知りたい
- ストアドプロシージャを作る
- ストアドプロシージャをJavaから呼び出す
- MySQL WorkbenchのLimitを外す
- MySQL WorkbenchのSafe Updatesを外す
- ユーザーを作成し権限を付与する
- テーブルの自己結合
- テーブルのデータを定期的に更新したい
- データの矛盾が起こらないように排他制御したい
- トランザクションを使いデータの不整合を防ぐ
- 開始終了時間を指定してレンタル予約可能なものを知りたい
- MySQLに入っている誕生日をJavaで扱いたい
- ログインが成功したユーザーにポイントを付与したい
Javaを使うネタ
- 日本語文字化け対策のFilter
- JavaScriptのサニタイズをするFilter
- ログインチェックのFilter
- jspの直打ちを禁止するFilter
- エラーが起こった場合にエラーページに遷移させるFilter
- ブラウザキャッシュを無効化するFilter
- 定型コードを書かないで済むようにLombokを使いたい
- コードを書いていて行き詰まったらFIXMEで後日チャレンジする
- パスワードをハッシュ化したい
- 画像などのファイルをサーバーにアップロードできるようにしたい
- Fileクラスを使ってディレクトリやファイルを操作したい
- 大量のデータを表示するためにページネーションを使いたい
- キーによる高速なアクセスが可能なHashMapを使いたい
- 2重送信を防止したい
- QRコードを扱いたい
- APIを使い天気の情報を入手したい
- 2つの日時の差を分単位で求めたい
- チェックボックスの値をサーブレット側で取得したい
- Eclipseの使い方で疑問がある(FAQ)
HTML/CSSを使うネタ
- 様々なフォーム部品を使いたい
- 様々な要素を中央ぞろえや右寄せにしたい (Sample)
- Font Awesome を使いたい (Sample)
- グーグルウェブフォントを使いたい (Sample)
- モーダルウィンドウを作りたい (Sample)
- 背景画像を1枚の写真で覆いたい (Sample)
- 背景を動画で覆いたい (Sample)
- ラジオボタンのラベルの色を変化させて押しやすくしたい (Sample)
- ラジオボタンを選択した際の色を変えたい (Sample)
- フォーム部品をグループ化して分かりやすくしたい (Sample)
- 画像を丸く切り抜きたい (Sample)
- ビデオを再生したい (Sample)
- ページ内リンクでゆっくりスクロールさせたい (Sample)
- 「必須」などの文字を項目の後ろにつけたい (Sample)
- 画像の中央揃えをまとめてほしい (Sample)
- テキストの中央揃えをまとめてほしい (Sample)
- 入力フォーム側で様々な入力チェック(バリデーション)をしたい (Sample)
- datalistを使って入力欄で予測変換(入力候補)を出したい (Sample)
- 音楽ファイルを扱いたい (Sample)
- floatを使って写真と文字を横に並べたい (Sample)
- flexboxを使って写真と文字を横に並べたい (Sample)
- gridを使って写真と文字を横に並べたい (Sample)
- メールアドレス等を指定してメールを送れるリンクを作成したい (Sample)
- 吹き出しにタイプライター効果で文字列を表示したい (Sample)
- 最大値と最小値の制限のある数値入力フォームを作りたい (Sample)
- 画面サイズによって表示が変化するレスポンシブデザインを実現したい (Sample)
- ボタンにホバーした際の様々な効果を知りたい (Sample)
- GoogleMapを使って現在地から目的地までのルートを表示したい (Sample)
- Lorem Picsumを使ってサンプル画像を表示したい
- ブラウザのタブにファビコンを設置したい
- ツールチップで詳細情報を表示したい (Sample)
BootStrap5を使うネタ
- 画像を使ったスライドショーを作りたい (Sample)
- アラートボックスの通知を閉じるボタンで閉じたい (Sample)
- アコーディオンを使って開閉できるようにしたい (Sample)
- バッジを使ってユーザーの注意を引きたい (Sample)
- プログレスバーを使って進捗を示したい (Sample)
- パンくずリストを使ってユーザー回遊を促したい (Sample)
- モーダルウィンドウを使ってユーザーの注目を集めたい (Sample)
- ドロップダウンメニューを使って小さな面積で選択肢を示したい (Sample)
- 写真とテキストを横に並べたい (Sample)
- トースト通知を表示して一定時間が経過したら非表示にしたい (Sample)
- ドロップダウンメニューを作りたい (Sample)
JavaScriptを使うネタ
フォーム
- データ送信を確認するダイアログを出したい (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)
- ローディング画面を表示してユーザーに待ちのストレスを与えない (Sample)
- ドラッグアンドドロップで画像ファイルをアップロードした上でプレビューをしたい (Sample)
- フェードインでふわっと画像等を表示させたい (Sample)
動き
- 下にスクロールしたら「ページトップへ戻る」を表示させたい (Sample)
- タブで表示を切り替えたい (Sample)
- 更新中を表示するボタンでユーザーのストレスを軽減したい (Sample)
- 一定時間経過後に処理を実行させたい (Sample)
- 自ウィンドウを閉じたい (Sample)
- ページネーションでページ送りしたい (Sample)
- サイドバー(ドロワー)メニューを作りたい (Sample)
アニメーション
- 数値をカウントアップするアニメーションを作成したい。 (Sample)
- 進捗バーをアニメーションで動かしたい (Sample)
- トランプのカードをダブルクリックでめくる効果を表現したい (Sample)
- 瞑想のアプリを作りたい (Sample)
日時
- 過去の日付を選択できないようにしたい。 (Sample)
- 誕生日から年齢を計算したい (Sample)
- 日時選択で開始日時以前の終了日時を選択できなくしたい。 (Sample)
- 選択できる時間を15分刻みに制限したい (Sample)
- デフォルトで選択できる日時を過去の日付にしたい。20年前をデフォルトにしたい (Sample)
その他
- テキスト読み上げ機能を実装したい (Sample)
- Google Map APIを使いたい (Sample)
- JavaScriptで簡易的に見積もりをしたい (Sample)
- 遅延読み込みと慣性ローディングを実現したい (Sample)
- X(旧Twitter)、Facebook、LINE等に投稿したい (Sample)
- 日本語だけでなく英語などの多言語に対応したサイトを作りたい (Sample)
- バッテリーの状態を表示したい (Sample)
- webカメラを起動したい (Sample)
- 音声チャットを実現したい (Sample)
- 現在のページをPDFやCSVにしてダウンロードしたい (Sample)
- コピーできないWebページを作成したい。 (Sample)
- 〇〇診断のような調査ページを作成したい。 (Sample)
- JavaScriptを使ったゲームアイディア集
- Ajaxを使いJSON形式のデータを取得したい
- Ajaxを使いページを更新することなくページの内容を入れ替えたい(非同期通信を行いたい)
- Ajaxを使いバリデーションをしたい
- Ajaxを使いリアルタイムチャットを実現したい
JavaScriptのライブラリを使うネタ
- Swiperを使い無限に画像をスライドさせ続けたい (Sample)
- Masonry.jsを使い、Pinterestのようなページを作りたい (Sample)
- GSAPとScrollTriggerを使い画像効果を実現したい (Sample)
- AOS.jsを使いスクロール時に要素にアニメーション効果をつけたい (Sample)
- Luminous.jsを使いコンテンツを拡大表示したい (Sample)
- Slickを使いスライドショーを表示したい (Sample)
- Vanta.jsを使いマウスに反応する鳥の群れの効果を追加したい (Sample)
- darkmode.jsを使ってWebサイトにダークモードを実装したい (Sample)
- particles.jsを使って幾何学模様、雪、雨、星、泡等、様々なエフェクトを実装したい (Sample)
- simple-statisticsを使って中央値、最頻値、標準偏差等のデータを出力したい (Sample)
- SheetJSを使ってエクセルのデータを読み込みたい (Sample)
- qrcode.jsを使って文字列をQRコードにしたい (Sample)
- vue.jsを使って各都市の天気を調べたい (Sample)
- vue.jsを使ってレーティングの星を選択させたい (Sample)
- vue.jsを使ってタイマーを表示させたい (Sample)
- vue.jsとchart.jsを使って家計簿アプリを作りたい (Sample)
- vue.jsとDraggableを使ってドラッグ・アンド・ドロップ可能なアプリを作りたい (Sample)
コピペできるCSSのスニペット集
- コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)
- CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!
- ナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめ
- 実務で使える!グローバルメニューホバーアニメーションスニペット集
- 問い合わせフォームのデザイン9選!コピペで使えるhtmlとCSSを紹介
- ログイン画面をおしゃれにするCSSスニペット16選。サインアップフォーム切り替えも!
- コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ
- 【CSS】よくあるfooterテンプレ(コピペOK)
その他外部リンク
- Bootstrap5のコンポーネント一覧
- Bootstrap5のチートシート
- 写真のフリー素材
- 画像の形式変換(PNG、WEBP等をJPG形式に変換)とサイズ変換
- codic: プログラマーのためのネーミング辞書
- 疑似個人情報データ生成サービス
- ダミーテキストジェネレータ
- faviconジェネレータ
- 開発者向けのウェブ技術 MDN
- 画像をクリックしてリンク先に飛ぶようにできるクリッカブルマップ