ThymeleafはHTMLを動的に生成してWeb上に表示する方法でした。しかし、近年のWeb開発では、画面ではなく”データ”を返すAPIの重要性が高まっています。この記事では、HTMLではなくJSON形式でデータをやりとりするREST APIの基本構成について解説します。
「RESTって何？」「@RestControllerってどう使うの？」「JSONって聞いたことあるけどよくわからない…」という方でも大丈夫！この記事を読み終える頃には、Spring BootでシンプルなREST APIを作ってJSONで入出力できるようになります。
続きを読む
「Controllerで処理はできたけど、画面にはどう出すの？」と悩んだことはありませんか？本記事では、Spring BootのMVC構成における「View層」の役割と、テンプレートエンジンThymeleafの基本的な使い方を解説します。HTMLとJavaをつなぐ仕組みを学ぶことで、静的なページから動的なWebアプリへと一歩進んだ開発ができるようになります。
続きを読む
このチートシートでは、Spring Bootと連携して使うThymeleafの基本的な構文や使い方を一通り確認できます。変数の出力、条件分岐、ループ処理、フォームとの連携、共通パーツの再利用、JavaScriptとの連携まで、実践的なテンプレート開発に必要な知識を網羅的に確認できます。
困ったらこのシート見れば解決できます！
続きを読む
Webページに数値データ（会社の売り上げ，社員数，アンケート結果等）を表示する時に，ただ数値を載せるだけでは，あまり注目されないことが多いと思います．自分が一番注目して欲しいデータは，何かしらの強調表現を付け加えなければいけません！強調方法は，デザインで補ったり，アニメーションをつけて補ったりします．今回は，数値をカウントアップさせ，Webページに動きをつける関数をjQueryで作成します．この関数は，初期値，終了値，アニメーション時間，イージング，要素を指定して使えるようにしています．ぜひコピペで使ってみてください！
続きを読む
この記事では，Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装します．ウィンドウのスクロール量に応じてインジケータが指し示す点も上下に移動します．また現在のインジケーター以外のインジケーターをクリックすることで，その高さのウィンドウまで自動スクロールするように実装します．Webページ全長がとても長い場合等に有効な方法です．それではインジケーターの作り方を見ていきましょう．
続きを読む
ハンバーガーメニューとは，三本線のボタンのことです．クリックまたは，タップするとメニューが表示されます．一般的にはスマートフォン用のデザインで採用されることが多く，画面領域の有効活用ができます．もちろんPC等の画面が広いデバイスでも使用されることはありますが，今回はスマホ用の画面で，ハンバーガーメニューを表示し，大きい画面ではメニューを横並びにヘッダーに表示させます．これはCSSのみでは難しいので，jQueryを交えて実装していきます．
続きを読む
この記事ではSNSアイコンのホバーエフェクトを作っていきます．CSSだけでも実装することはできるのですが，CSSが冗長になってしまうので，アニメーションはjQueryで作成していきます．今回は複数のレイヤーがマウスオーバー時に縦に展開するアニメーションを作成します．単純なボタンにするより，おしゃれでモダンなサイトに近づくことでしょう！
続きを読む
Webページってコンテンツが増えると，どんどん長くなっていきますよね．ヘッダーにサイトメニューを置いていたりすると，一番上まで戻らないといけません．結構めんどくさかったりします．もちろんスティッキヘッダーを使ったり，サイドバーを使ったりすれば，解決できますが，上の方のコンテンツを見るために戻ることもあると思います．そこで下から上へ戻るスムーズスクロールボタンがあれば，親切なサイトになるでしょう．今回はWebページ最上部へ戻るスムーズスクロールボタンをjQueryとCSSで作っていきます．
続きを読む
