JavaScript– category –
-
TypeScript
【Next.js】ボタンを押したらAPIを叩いてデータを取得する(TypeScript)
Next.jsのWebアプリケーション内にて、ボタンを押したらAPIを叩いてデータを取得し描写するまでの流れを紹介いたします! イメージとしてはこんな感じです。 See the Pen push_button by Taichi.Y (@tai72) on CodePen. 「キーワードを入力してください」... -
TypeScript
【Next.js】getServerSidePropsからAPIを叩く方法
getServerSidePropsを用いてサーバーサイドでAPIを叩いてデータを取得し、レンダリングするまでの流れをご紹介します。 【getServerSidePropsとは】 Next.jsの公式チュートリアルによると、getServerSidePropsについてこのように記載されています。 getSer... -
TypeScript
CodePenで「React × TypeScript」を行うための最低限の設定(注意点あり)
CodePenで React × TypeScript のアプリケーションを試すための最低限のセッティングをご紹介します。 CodePen自体のセッティングが済んでいることが前提ですので、お済みでない方はまずアカウントの作成を行いましょう。 セッティング方法や、そもそもCod... -
TypeScript
【Next.js×TypeScript】フォームで郵便番号から住所を取得する
本記事では、「フォームで入力した郵便番号から住所を取得する方法」をご紹介していきます! こんな感じです。 See the Pen Address Form by Taichi.Y (@tai72) on CodePen. このように、「ユーザーが入力した郵便番号」から「住所」を取得して入力を省け... -
jQuery
【jQuery】(図多め!)スクロール量でアニメーションの開始を制御する方法を解説
Webサイトで、スクロールすることで初めてコンテンツが表示されたりするのをみたことありませんか? サイトに動きが追加され、見る人の注意を惹くことができます。 このロジック自体は簡単なのですが、サイトの動きのバリエーションを大幅に増やすことがで... -
JavaScript
【JavaScript】slickを用いて要素をスライドさせる(レスポンシブも)
JavaScriptのプラグインslickを用いてスライドを作成する方法の備忘録。 PCではスライドさせずにスマホのみでスライドさせる ドキュメントはここ。 【なにができるか】 ① ② ③ これができる。 【作り方】 slick読み込み CDNで読み込む方法。 headタグの一番... -
JavaScript
【JavaScript】(オブジェクト指向)カプセル化の考え方
オブジェクト指向を支えている3つの概念として、「継承」「カプセル化」「ポリモーフィズム」という概念があります。 本記事では、カプセル化の概念がざっくりどんな感じなのか知りたい方向けに例を交えて解説していきます! 「オブジェクト指向って??... -
JavaScript
【JavaScript】(初心者向け!)ボタンを押したら文字の背景色を変える
本記事は、「htmlとcssのイメージはなんとなくできるけど、JavaScriptでどんなことができるのかイマイチ分からない」といった方向けに、とりあえずJavaScriptを用いてどんなことができるのか紹介いたします! JavaScriptはなんといっても動的に動かせると...
1