JavaScript
はじめに 例えばReactのコンポーネントなどで、以下のように関数コンポーネントを定義することがあると思います。 export default function MyComponent() { } 正直このexport defaultが何なのかよくわかっていなかったので、色々調べてみました。 結論 impo…
結論 どっちでもいい。 が、以下の方針に従うのがいいような気がします。 返却される値を全て利用する場合が多い→配列 返却される値の一部を利用する場合が多い→オブジェクト 例えばReact標準フックのuseStateを考えてみます。 useStateは値とその更新関数を…
npmってなんですか？ 世界一大きいソフトウェアライブラリ ソフトウェアパッケージマネージャー npmを使ってみる npm init オプション -- y npm install 基本の使い方 オプションなど --save-dev -g パッケージを指定しない場合 エイリアス npm uninstall 基…
JavaScriptでたびたび見かけるスプレッド構文についてまとめます。 構文 ...obj; // こういう感じ 配列の場合の例 const arr = [1,2,3,4,5]; const arr2 = [...arr, 6,7,8]; console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8] オブジェクトの場合の例 const us…
昨今のフロントエンド事情について行けていないので、アプリケーション作成時によく聞く単語などを整理する。 間違っているところもあるかもしれないが、現時点での理解を残す。 Webpack 複数のファイルを1つにまとめる。らしい。 ESLint JavaScript用の静的…
近年、Null安全という言葉と共に、各言語でNullを安全に扱うための構文が一般的になってきています。 こちらの記事にあるように、この流れはJavaScriptに限った話ではありません。 今回はJavaScriptに限った話になりますが、Nullを扱う際に便利な構文をいく…
React16.8から導入されたフックの基本を学びます。 概要 簡単に言うと、関数型のコンポーネントにstateを持たせる仕組みのことです。以下、公式ドキュメントからの引用です。 フックとは、関数コンポーネントに state やライフサイクルといった React の機能…
JavaScriptとCSSを使って、モーダルウィンドウを作成します。 実現方法は至って単純で、なんらかのボタンが押されたらモーダルのdisplay属性をnoneにしたりblockにしたりするだけです。 .modal { display: none; position: fixed; z-index: 1; left: 0; top:…
はじめに ctrl + Enterに限らず、特定のキーを押下した際になんらかのイベントを発火させる方法です。 ソースコード document.addEventListener('keydown', (e)=>{ if (e.ctrlKey && e.keyCode == 13) { alert('ctrl and enter!'); } }) 一応HTMLも。 <html> <head> <title>ctr</title></head></html>…
React開発中に出現したワーニングを対処しました。 ワーニングなのでそこまでクリティカルではないと思いますが備忘として残します。 調査 ワーニングメッセージを直訳すると、 まだマウントされていないコンポーネントでsetState()は呼び出すことができませ…
JavaScriptで使用できるLocalStorageについて学びます。 LocalStorageとは ブラウザにデータを保存できる仕組みです。 公式ドキュメントはこちらです。 使い方 localStorageへデータを保存する //例 localStorage.setItem('key', value); localStorageへデー…
アロー関数について勉強します。 基本の書き方 まずはおなじみの、公式サイトからの引用です。 アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッ…
Reactを学習中なのですが、たびたび出現するbind()メソッドがよくわからなかったため、メモ。 はじめに 結論を言ってしまうと、bind()メソッドを理解するためにはJavaScriptにおけるthisの挙動の理解が必要かもしれません。ひとまず、JavaScriptではthisの扱…
近年のフロントエンド全くわからんのです。 公式ページにチュートリアルもありますので、まずはここからですね。
変数宣言におけるconstとlet ES6から、変数宣言に使える予約語に、constとletが増えました。 これまではvarを使用して変数宣言をしていましたが、これからはvarを使うことはありません。 必ず、constまたはletを使うようにしましょう。 constとletの違い con…
