自動化無しに生活無し

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

JavaScript

  • Next.jsのインストール方法とプロジェクトの作成
    本記事ではUbuntu22.04にインストールする。 インストール パッケージの更新 sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove build-essentialのインストール sudo apt install build-essential nodeのインストール curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash – sudo apt install nodejs 参照元: Ubuntu18.04にnode.jsとnpm、vue-cliをインストールする プロジェクト作成 プロジェクトの作成 npx create-next-app next-project プロジェクトのディレクトリに移動 cd next-project サーバーを起動する。 npm run dev 結論 n ...
    続きを読む

  • 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 ...
    続きを読む

  • 【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】Typescript仕様のReactアプリを作る
    TypeScriptとは TypeScriptを使うことで、変数を宣言する際に型を定義する事ができる。 例えば、予め文字列型で定義した変数に対しては、文字列型以外を入れると、エラーが起こる。 let message: string = "こんにちは"; console.log(message); message = "おはよう"; console.log(message); //ここでエラーが起こる。 message = 0; console.log(message); 配列内の変数を取り決めたい場合、<>の中に型名を入れるジェネリクス(Generic ...
    続きを読む

  • 【React】グローバルなStateを使って、Propsバケツリレー問題を解決する
    Reactでは、Stateを使ってウェブアプリの状態を管理することができる。コンポーネントに対して引数を与えるにはPropsを使えば良い。 しかし、だからといって親コンポーネントで定義したStateを、Propsで子コンポーネントに引き渡すのは良くない。 このようなコンポーネントの階層が深い場合、無駄なPropsの受け渡しが発生してしまうからだ。 この問題を防ぐために、グローバルなStateを作る。グロ ...
    続きを読む

  • 【React】Props、State(useState)、useEffectなどの概念の解説
    ここではReactの基本的な概念であるProps、Stateについて扱う。 Props Propsを使うことで、コンポーネントの関数を呼び出す時、引数を与えることができる。 例えば、App.jsxとcomponents/HeaderContent.jsxがある。 App.jsxを以下のようにする。 import { HeaderContent } from "./components/HeaderContent"; export const App = () => { const message = "Hello!!"; return ( <> <HeaderContent /> </> ); } HeaderContent.jsxを以下とする。 export const HeaderContent = () => { const header_color = ...
    続きを読む

  • 【React】component(コンポーネント)の仕組み
    Reactではindex.jsを読み込むことで動作するが、全てをindex.jsに書いてしまうとindex.jsのコード行数が尋常ではなくなる。 故に、コンポーネントを使用してコードの一部を別ファイル化させる。 コンポーネントの構造 まずsrc内に以下がある。 App.jsxとindex.jsである。 App.jsxはコンポーネントのファイルである。見分けが付きやすいように拡張子を.jsxとしている。ind ...
    続きを読む