サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
devsakaso.com
ReactのuseStateとは? useStateを使うことで、リアルタイムで画面更新が可能になります。 Reactにコンポーネントの再実行(再レンダリング)を依頼して、新たなReact要素を作成します。 そして、そのためには変更した値をどこかに保持しておく必要があります。 それが、stateという場所に保存します。 これらを行う仕組みがuseStateという関数です。 import { useState } from 'react'; const Sample = () => { // useStateの()には初期値を設定する let arr = useState(0); // (2) [0, ƒ] 配列の0番目は参照用の値、1番目は更新用の関数 const handler = (e) => { const setFn = arr[1]; setFn(e.target.value);
2021年6月2日CSS SVGファイルをCSSでレスポンシブにする方法を紹介します。 おしゃれなSVGファイルの入手方法や編集方法は、unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順を参考にしてみてください。 <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg> SVGでは、上のように、widthとheightを直接指定することで幅と高さを決めることができますが、 これではレスポンシブになりません。 よって、次のようにします。 widthとheightを削除 <svg viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000
2021年4月4日JavaScript JavaScriptのPromiseでよく使うfetch()メソッドとjsonファイルについてまとめました。 Promiseの書き方は次の記事を参考にしてみてください。 jsonファイルについて jsonファイルについて、基本的には配列のような[]の中に、オブジェクトのような{}の形式でデータが羅列されています。 [ { "name": "yamada", "age": 30 }, { "name": "sasaki", "age": 40 }, { "name": "kondo", "age": 16 } ] 基本的にはJavaScriptの配列とオブジェクトの形式でOKなのですが、異なる点があるので、次の3点だけは押さえておきましょう。 jsonファイルでは、シングルクォーテーションで文字列を囲むことはできません。必ずダブルクオーテーションを使い
2021年6月19日Vue.js Vueのassetsフォルダに入れたimg画像ファイルを使用する方法をまとめました。 まず、Nust.jsで使う場合、こちらの記事がとても参考になります。 assetsフォルダではなくstaticにいれるなどした画像の配置場所で指定方法が異なるので注意が必要です。 フォルダ構成 src/ |- assets/ | |- img/ | | |- img1.jpg | | |- img2.jpg | | |- img3.jpg | | |- img4.jpg | | |- img5.jpg | ... | |- main.js |- App.vue srcフォルダのassetsフォルダにimgフォルダを作成して、その中に画像ファイルを格納しているとします。 imgタグの静的なsrc属性で指定 <template> <header class="header">
このページを最初にブックマークしてみませんか?
『devsakaso.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く