JavaScript
開発環境は、Windows 10 Pro(64bit)。 ■直前の表現が0文字か1文字 ?[具体例] a?sagao「asagao」もしくは「sagao」にマッチする ■直前の表現が0文字以上 *[具体例] a*sagao「asagao」もしくは「sagao」もしくは「a....asagao」(....はaの繰り返し)にマッチす…
Null合体演算子(??) 左辺がnullかundefinedであれば、右の値を返し、そうでなければ、左の値を返します。 [使いどころ] 変数がnullやundefinedだった時に初期値を入れることができる。 const a = null ?? 'nullかundefinedです'; const b = undefined ?? 'nu…
テンプレートリテラル スプレッド構文 テンプレートリテラル テンプレートリテラルはダブルクォートやシングルクォートではなくて、`～`(バックティック)で文字列を囲みます。 console.log(`${3 * 3 * 3}`); // 27 let name = "Taro"; console.log(`Hello ${…
const, letについて 分割代入 アロー関数 const, letについて ・従来からある何もない変数やvarとの比較をすると、スコープと再代入・再宣言可能かどうかで違いがあります。 function hello(){ { a = "none"; var b = "var"; let c = "let"; const d = "cons…
開発環境は、Windows 10 Pro(64bit) + vue 2.6.12 + vuetify 2.4.11。 ■始めに Vuetifyでは、ルートとなるコンポーネントには、template部分に、v-appタグで囲っておかないといけない。 ■参考リンク Application ■指定の要素を中央に寄せたい ※中央に寄せた…
開発環境は、Windows 10 Pro(64bit) + node.js v14.17.0 + npm 6.14.13。JavaScriptのテストフレームワークであるJestを使ってテストをしてみたいと思います。1.チュートリアルを参考に、プロジェクトを作り、Jestをインストールするために以下のコマンドを1…
開発環境は、Windows 10 Pro(64bit)。 ■環境を整える 1.公式サイトへアクセスし、Start Learningボタンをクリック 2.公式サイトのチュートリアルに倣って、Cドライブ直下に移動して、以下のコマンドを入力。パッケージのインストールが開始されます。 npx cr…
開発環境は、Windows 10 Pro(64bit)。1.公式サイトへアクセスし、Get startedをクリック 2.以下のコマンドを入力し、アプリを作る環境を整えたいと思います。 開発ツールには、React Native CLIとExpo CLIの2つがあるみたいですが、今回は、公式が、紹介して…
開発環境は、Windows 10 Pro(64bit) + node.js v.10.15.0。Rome(ローマ)は、リントやバンドルやコンパイルやフォーマットやテストなどのすべてを統合したものを作り、もっと手軽に使えることを目的に開発が進められているプロジェクトです。現在はまだ、Java…
開発環境はWindows10 Professional + node v10.15.0 + npm 6.4.1 + npx 6.4.1。gulpは、画像を圧縮したり、SASS→CSSに変換したり、TypeScript→JavaScriptに変換したり、ファイルが更新されたら、ブラウザを自動的に、リロードしたり、いろんなタスクを自動化…
開発環境は、Windows 10 Pro(64bit) + node v14.17.0 + npm 6.14.13。TypeScriptは、JavaScriptを静的型付けとオブジェクト指向で書けるような言語で、最終的にはJavaScriptに変換して使います。1.以下のコマンドを入力して、ディレクトリを作成して、カレン…
開発環境は、Windows 10 Pro(64bit)。node.jsを事前にインストールしていることが前提条件です。ESLintは、JavaScriptのための静的検証ツールです。1.ディレクトリを作成し、カレントディレクトリを移動する cd c:\ && mkdir eslint_test && cd eslint_test2…
開発環境は、Windows 10 Pro(64bit)。node.jsを事前にインストールしていることが前提条件です。Mocha Mocha - the fun, simple, flexible JavaScript test framework1.テスト用のディレクトリを作成するため、コマンドプロンプト上で以下のコマンドを入力。…
開発環境は、Windows10 Pro(64bit) 。 現在のY軸のスクロール量を取得する window.pageYOffset Y軸のスクロール量の最大値 window.scrollMaxY 文書のY軸の高さを求める window.innerHeight + window.scrollMaxY ブラウザ画面内のY軸の高さを取得する window.…
開発環境は、Windows10 Pro(64bit) + Firefox 69.0.3(64bit)。例えば、ボタンをクリックして、モーダルを表示させるときなど、ウィンドウ以外の背景部分のコンテンツの上に、分かりやすくするために、透過した色の背景をオーバーレイして、クリックできない…
TwitterのDM部分は、スクロールが最初から一番下に位置していて、一番上に持っていくと、無限スクロールによって、古いDMが読み込まれるような構造です。最初に投稿した段階で、メッセージは一番下に来るようにするには、positionをabsoluteにしなくてはいけ…
開発環境は、Windows10 64bit(Pro) + Firefox 69.0(64bit)。書くのが楽だからといってオブジェクトを直接入れてしまった場合、obj_aの値を書き換えると、obj_bの値も変わってしまう。これは、シャローコピーと言って、単に参照を渡しているだけだから、そう…
開発環境は、Windows10 64bit(Pro) + react@16.8.6。 ■ライフサイクルメソッドについて ・stateが変更されるたびに、componentWillUpdate,componentDidUpdateメソッドがそれぞれ呼び出される。 ■componentWillMountを使用すると、querySelectorAllでは、まだ…
親コンポーネントのstateの状態に応じて、子コンポーネントの状態を切り替えたいと思います。 今回はサンプルプログラムとして、clickボタンを押すたびに、ONとOFFの表示が交互に切り替わるプログラムを書いてみたいと思います。親コンポーネントのstateの状…
開発環境は、Windows 10 Pro(64bit)。例えば、いいねボタンなどの複数のclass属性(今回はlike_btn)がある中で実際にクリックしたボタンのみを、色づけしたい、あるいは色づけを解除したい場合、jQueryのindexメソッドのようなものを、生のJavaScriptで行うに…
開発環境は、Windows 10 Pro(64bit) + npm 6.4.1。www.npmjs.com
開発環境は、Windows 10 Pro(64bit) + npm 6.4.1。https://react-bootstrap.github.io/ npm install react-bootstrap bootstraphtmlファイルのheadタグ部分に、
開発環境は、Windows 10 Pro(64bit) + node 10.15.0 + npm 6.4.1。下記のReact/Reduxの実装編をやっていて、途中で詰まったところをメモしておく。電卓アプリで学ぶReact/Redux入門(基礎知識編) https://qiita.com/nishina555/items/affcb3684e67cd0ee897 電…
開発環境は、Windows 7 Professional(32bit)。1.node.jsをインストールしている前提で、vue-cliをインストールする npm install -g vue-cli2.カレントディレクトリをC:\に移動して、以下のようなコマンドを入力する。 vue init テンプレート名 プロジェクト…
開発環境は、Windows7 Professional(32bit) + Firefox 61.0.1(32bit)。値渡し - 値を変更しても元のデータは変わらない let x = 10; let y = 12; y = 12; console.log(y); // 12 console.log(x); // 10 参照渡し - 値を変更すると元のデータが変わってしまう…
開発環境は、Windows 7 Professional(32bit) + Node.js v8.11.1。 ※Node.jsがすでにインストールされていることが条件です。1.コマンドプロンプトを実行し、以下のコマンドを実行する npm install -g create-react-app2.次にカレントディレクトリを移動し、…
開発環境は、Windows 7 Professional(32bit)例えば、査定サイトで査定価格の金額を0円から査定価格までタイマーで動かして見せる動作を加えるとする。0円から査定価格の1/10ずつ増やしていって、査定価格に達したら、査定価格と切り替えてタイマーを破棄する…
開発環境は、Windows 7 Professional(32bit)+XAMPP v3.22+PHP 7.1.7。PHP側 json_encode関数は、連想配列をjson形式に変換する関数。失敗すればfalseを返す。 PHP側もJavaScript側も文字コードはUTF-8で保存すること。 100, "orange" => 80, "grape" => 200…
開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。1.サイトへアクセスする GitHub - emojione/emojione: EmojiOne™ is the open emoji standard. #iwantemojione 2. /lib/js/emojione.min.jsへアクセスし、コピペしてemoj…
開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。HTML側 <div id="size"></div> <div id="size2"></div> jQuery側 $(window).on('load resize',function(){ $('#size').html('windowの横幅:' + $(window).width()); $('#size2').html('スクロールバーも含めたwindow…
