はじめに ES6以降のモダンなJavaScript仕様について以前こちらの記事にまとめたのですが、個人的に知らなかったシンタックスなどあったので追加でまとめます。 桁埋め // ES2017から '7'.padStart(2, 0) // '07' '7'.padEnd(2, '#') // '7#' '7'.padEnd(6, '…

メタ文字一覧 メタ文字意味文字列 / 正規表現 => マッチする箇所.任意の1文字hello / h.llo => hello\w単語を構成する文字hello / h\wllo => hello\W単語を構成しない文字hello! / hello\W => hello!\s空白文字(改行,タブ文字..含む)I am / I\sam => I am\S…

フォーカス時のボーダー色を変えるにはoutlineを使う .text_box:focus { outline: 2px solid blue; background-color: #FFF; } outlineではradiusを変えられないので、outlineを非表示、borderを変える .text_box:focus { outline: none !important; border:…

以下のコマンドで調査可能 $ git log -S "調べたい文字列" --patch file_name.py

JavaScriptで絵文字を除外する正規表現のコードスニペット const regEmoji = new RegExp(/[\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF]/, 'g'); const removeEmoji = input => ( //…

Reactで画像をアスペクト比を維持して表示する方法メモ。 import Img from './images/img.png' const imgStyle = { object-fit: contain; } const ImgComponent = () => ( <img className="imgStyle" src={Img} alt="" /> ) object-fitは、置換要素(<img>や<video>)などの中身を、コンテナーにどのようにはめ込むかを設</video>…

'1000' であれば1000を返し、'山田太郎'であれば'山田太郎'を返す関数 const func = (value) => { const parsedValue = Number(value); if (isNaN(parsedValue)) return value; return parsedValue; }

↓のようなエラーでsshができずかなり苦しんだ。 $ ssh host_name user@xx.xxx.xxx.xxx: Permission denied (publickey,gssapi-keyex,gssapi-with-mic). 今回の原因は、そもそもsshキーのユーザが間違っていた、というもの。 上記エラーで考えられる理由は複…

↓のように()で関数をかこうと即時関数になります。即時関数とは、定義と同時に実行される関数のこと。 (function() { console.log('hello') })() 次のように引数を渡すこともできます。 (function(name) { console.log(`hello, ${name}`) })('taro') 以上、…

今回はJavaScriptで配列/オブジェクトの要素の追加 /変更 / 編集 をイミュータブル(非破壊的)に行う方法をまとめます。 イミュータブルな操作の基本 基本的には、元の配列やオブジェクトをシャローコピーし、そのコピーに対して操作を加える、というやり方を…

Reactで配列やオブジェクトをfor文で回そうとするとESLintにUsing 'ForInStatement' is not allowed.eslint(no-restricted-syntax)と怒られてしまします。 NG例: 配列をfor...inで回す const arr = [1, 2, 3, 4]; for (e in arr) { console.log(e); } // Usi…

今回は、前回Reactで作った簡易掲示板をReduxでリプレイスします。 前回同様、↑のような簡易掲示板をReduxを使って作ります。 それでは、↓の手順にそって実装していきます。 必要なパッケージのインストールaction作成reducer作成store作成component作成 必…

Reactを用いて↓のような簡易掲示板を作ったのでメモ。 コンポーネントに分けず、Stateのみを用いたパターンと、コンポーネントにわけPropsを用いたパターンの2つを実装してみました。 実装 今回は値の追加にformは用いていません。handleInputChangeメソッド…

はじめに 今回は、情報セキュリティの定義や脅威についてまとめます。 情報セキュリティとは 情報セキュリティとは、情報の機密性、完全性、可用性を維持すること、とJIS Q 27002によって規定されています。 機密性 (Confidentiality) 情報へのアクセス許可…

Reactで子コンポーネントに値を渡すコードメモ。 propsは親コンポーネントから子コンポーネントへ値を渡す時に使い、変更不可な値(イミュータブル)。 ＊対してstateはコンポーネント内の状態であり、変更可(ミュータブル)。 ↓は、AppコンポーネントからUser…

「ハッキング・ラボのつくりかた」という書籍を読み進めているのですが、第４章の権限昇格のところで以下のような大量のwarningに遭遇しました。 msf5 exploit(windows/local/bypassuac_fodhelper) > exploit [] Started HTTPS reverse handler on https://1…

はじめに 今回は、aタグにtarget="_blank"を指定することのリスクと対処法についてまとめます。 こういうやつ↓の危険性ですね。 <a href="hoge.html" target="_blank"></a> target="_blank"の危険性 target="_blank"は、リンク先のページを新しいウィンドウで開く指定をする属性ですが、リンク先とし…

はじめに 今回はJavaScriptのsort()の副作用についてメモしていきます。 sort()の副作用 sort()は元の配列の順番を直接ソートします。破壊的メソッドというやつですね。 const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months)…

はじめに 今回はReactのstateについてメモ。setState()でstateの値を更新し、同期的に取得する方法を書いていきます。 結論 ↓のようにすると、同期的にstateの値を更新/取得することができます。 import React, { Component } from 'react'; class App exten…

はじめに ReactでpropTypesを書いている時にstatic propTypes とReact.PropTypes は何が違うのか気になったので、調べたことをメモします。 ↓の何が違うのか、ということです。 // static propTypes class App extends React.Component { static propTypes =…

はじめに 関数型プログラミングをJavaScriptで勉強中です。今回はreduce()の使い方についてメモします。 関数型プログラミングを学んでいるときに↓のようなコードを見かけました。この関数はどちらも、渡された配列要素の合計を返す関数です。 //reducerを使…

JSXで出てくる波括弧の意味について調べたのでメモします。 JSX内で出てくる波括弧{}は、JavaScriptの値を取得したいときに使います。 なので例えば、 <Button> title="なみかっこ" color="blue" style={{ display: 'none' }} </Button> のstyleの値部分は、 内側の{}はオブジ…

はじめに MacでツールをインストールしてPATHを通した後、Macを再起動するとPATHを通したはずのコマンドが使えなくなってました。その解決法メモ。 $ zsh: command not found: node 結論 早速結論ですが、指定しているログインシェルの設定ファイルに設定を…

はじめに 次にようなコードを書いていてエラーが起きたので、今回は関数の巻き上げについてメモ。 func(); //=> Hello function funcExpression(); //=> Uncaught ReferenceError: Cannot access 'funcExpression' before initialization function func () {…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。今回は論理演算子とショートサーキット評価(短絡評価)について書いていきます。 論理演算子 論理演算は3つ種類があります。 論理積(AND) / 論理和( || ) / 否定(NOT)の3つです。それらを表…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 今回はECMAScript2015(ES6)から導入された、分割代入やスプレッド記法などの配列/オブジェクトに関する便利な書き方についてまとめます。 まずは分割代入から。 分割代入 分割代入とは、…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 今回はECMAScript2015(ES6)から導入されたクラスについて書いていきます。基本的に他言語におけるクラスと同じですが、クラスの作成方法やプロパティの定義の仕方が独自ですのでまとめて…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 今回はECMAScript2015(ES6)で導入されたアロー関数とそのthisの挙動についてまとめます。 アロー関数って？ アロー関数は、ES6から導入された通常の関数(function)を代替する構文です。 /…

はじめに Reactを学ぶためのモダンなJavaScriptについてまとめます。 この記事では、ECMScript2015(ES6)から導入された新たなスコープについて、そして変数宣言(var/let/const)についてまとめていきます。 スコープ スコープとは、変数の有効範囲を定義した…

Reactを書籍やチュートリアルで勉強していると、見慣れないJavaScriptの記法をちらほら見かけました。調べてみると、それらはES6以降に導入されたものでした。この記事では、Reactで用いられるES6以降の仕様についてまとめていきます。 React開発で使われる…