自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

フロントサイド

  • jQueryのslick.jsでカルーセルを表示する【.slick-dotsのCSS付きでボタンを押しやすく】
    jQueryとslick.jsを使うことでカルーセルを簡単に表現することができる。 CDNを読み込み 前もって、以下のCSSと <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> JSを読み込んでおく。(jQueryもセットで。) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 使い方 このような形のHTMLに対して <div class="slick_area"> <div class="slick_content">コンテンツ1</div> <div class="slick_content& ...
    続きを読む

  • JavaScriptのイベントリスナのアロー関数でthisは使わない【event.currentTargetを使おう】
    モダンなJavaScriptに慣れるため、無名関数を書くときにもアロー関数を使い、そしてthisを使おうとすると、意図したとおりにはならない。 アロー関数式とfunction関数ではthisの仕様が異なるからだ。下記ソースコードを元に動作を確かめよう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class="button" value="1">ボタン1</button> <button class="button" value=" ...
    続きを読む

  • 【jQuery】.animate()の使い方【アニメーション】
    .animate() の構文 $(要素).animate({ 発動するCSS }, 遅延 ); 遅延はミリ秒単位で書く <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .button-more{ display:inline-block; background:orange; padding:1rem; cursor:pointer; } </style> </head> <body> <span class="button-more">continue ...</span> <script> $('.button-more').on('mouseover', function() { console.log("over"); // このthisはこのイベントが発生した要素自身を意味している。 $(this).animate({ opacity: 0.5, marginLeft: 20, }, 100); }); $('.button-more').on('mouseout', function() { console.log("out"); $(this).animate({ opacity: 1.0, marginLeft: 0, }, 100); }); </script> </body> </html> 結論 jQueryを使用することで、簡単にアニメーションを再現することができる。 イベントと組み合わせることで、モーダルダイアログの表示や、入力欄の ...
    続きを読む

  • react-router-domの使い方【Reactでルーティング】
    ページが複数あるサイトをReactで作る場合、react-router-domでルーティングを行うと良いだろう。 npm install react-router-dom 使い方 コンポーネントを作る src/components/に以下ファイルを配置。 Home.jsx Portfolio.jsx Profile.jsx Home.jsx import { Link } from "react-router-dom"; export const Home = () => { return ( <> <div>ここはホームです</div> <Link to={`/portfolio`}>ポートフォリオ</Link> <Link to={`/pr ...
    続きを読む

  • 【React】GithubPagesへデプロイする【ビルドしてプッシュする】
    ReactはJavaScriptのライブラリであり、サーバーレスなのでGitHubPagesへのデプロイが可能。 端的に言うと、ビルドしてGitHubにプッシュするだけ。 【前提知識】package.jsonを編集して独自のnpmコマンドを作る package.jsonを編集して独自のnpmコマンドを作る。 例えば、 以下のようにscriptsに"hoge" : "echo 'hoge' "と追加してお ...
    続きを読む

  • 【CSS】変数を使用する【テーマカラーの統一、スキンの作成などに】
    SCSSなどではなく、素のCSSで変数が使えることに今になって気づいた。 ということで、実際に扱っていく。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Welcome to my portfolio site !!</title> <style> :root{ --base-color: #111111; --theme-color: #00ffcc; --font-color: white; } body { background:var(--base-color); color: var(--font-color); margin:0; } h1 { background: var(--theme-color); } </style> </head> <body> <h1>Welcome to my portfolio site !!</h1> <h2>Profile</h2> <h2>Portfolio</h2> </body> </html> :root{}で宣言した変数 --base-color等がプロパティの値として呼び出すことができる。 予めテーマカラーなどをまとめて冒頭に書いておけば、それを書き換えるだけですぐに対応できる。 この変数 ...
    続きを読む

  • 【JavaScript】Enterキーが押されたときにイベントを実行する【.addEventListener('keydown')】
    Enterのキーコードは13なので、イベント引数のeからkeyCodeを取り出す。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <input id="input" type="text"> <script> const input = document.getElementById("input"); input.addEventListener("keydown", (e) => { if( e.keyCode === 13 ){ console.log("Enter"); } }); </script> </body> </html> 他のキーと組み合わせて発火させるには？ 例えば、ShiftキーとEnterキーの組み合わせの場合、こうなる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <input id="input" type="text"> <script> const input = document.getElementById("input"); input.addEventListener("keydown", (e) => { if( e.keyCode === 13 && e.shiftKey ){ console.log("Enter"); } }); </script> </body> </html> ...

  • JavaScriptで動的に増減する要素に対してイベントを発動させる【Vanilla.js】
    動的に増減する要素に対して、以下のようなやり方ではイベントをセットすることはできない。(クリックして追加されたあと、ボタンをクリックしても追加はされない。) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <button class='test'>test</button> <script> const test = document.getElementsByClassName("test")[0]; test.addEventListener("click", () => { document.body.innerHTML += "<button class='test'>test</button>"; }); </script> </body> </html> jQueryではこのようにするが <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class='test'>test</button> <script> $(document).on("click", ".test", () => { $("body").append("<button class='test'>test</button>"); }); </script> </body> </html> Vanilla.jsではこのように書く <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <button class='test'>test</button> <script> //動的 ...
    続きを読む

  • Reactビギナーが15分で掲示板アプリを作る方法
    『モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）』みたいな教科書をなぞってみたけど、よくわからない、実践的な物を作りたいという方向け。 対象読者はReactをインストール済み、モダンなJavaScript構文を理解できる方向けとする。 流れ 以下、流れ プロジェクトを作る(1分) srcディレクトリ内のファイルを全て削除、index.jsとApp.jsxの2 ...
    続きを読む

  • 【React】リストをレンダリングする時は、key属性を付与する【Warning: Each child in a list should have a unique 'key' prop.】
    例えば、以下のような配列があったとする。 const topics = ["aaa","bbb","ccc"]; この配列をレンダリングする時、このようにしてしまうと return ( <> { topics.map( (topic) => { return ( <div className="border">{ topic }</div> ); }) } </> ); この警告が出る。 なぜ『Warning: Each child in a list should have a unique “key” prop.』と警告が出るのか？ Reactで配列をレンダリングする際にkey属性を指定しないと、無駄なレンダリングが発生してしまい、パフォーマンスが低下するから。 例えば、key未指定で3つのデータがレンダリ ...
    続きを読む