react

プリミティブ値のリテラルとラッパーオブジェクト JavaScriptではプリミティブ値を定義するときにリテラルを用います。 リテラルとは、英語で「文字通り」を意味し、コードに書いた値がそのまま実行時にもその値のまま意味をもちます。（型定義せずに値の意味を持つ？？） 各プリミティブ型に用意されているリテラル - Boolean型 真偽値リテラル（true、false） - Number型 数値リテラル 浮動小数点リテラル（2.1e8 = 2.1 × 10の8乗） - BigInt型 数値リテラル（100nは小数点以下を四捨五入する） - String型 シングルクォオートなどで囲む文字列リテラル…

お勉強メモ。嘘ついたらごめんなさい。 React Query で、cacheTime, staleTime と、invalidateQueries, resetQueries あたりの使い分けの話。 お試し用コードは最後に載せてます。

What is JavaScript？ 第一級関数とオブジェクト指向をサポートしたブラウザで動く言語をつくろうとして生み出されたのがJavaScript 当時流行していたJavaに構文と名前を似せた。 JavaとJavaScriptは違うよ(タイと台湾、インドとインドネシアくらい違う) TypeScriptはJavaScript（関数型言語）の上位互換の言語 世界的にはJavaScriptは再評価されてきている！！（日本がんばれ） リテラルとは const hoge = "Hello" 値のこと。上記コードで言えば、Helloがリテラル（文字リテラル） 変数の中にある値を示す。 オブジェクトは…

Reactで出てくる言葉 トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ importとexport 主にjsのモジュールと同じ考え 「入れ込むのか」「出力するのか」を書いてあげる https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export 更に、エントリポイントと呼ばれるファイルを作りimportしたものを他へexportさせたりすることが出来る。index.jsで行うことが多い印象。 例えば、export default Fuga;の様にdefaultという部分が名前になっ…

概要 関数コンポーネントと Formik を使用して画像をブラウザにアップロードする方法が見当たらなかったので作成しました。 ソースコードは以下 github.com codesandboxは以下 codesandbox.io 実装 全体像 実装の全体は以下のようになります（./src/App.tsx）。 ３つのコンポーネント（Thumb、ImageUploader、App）から構成されています。 順を追って説明していきます。 import { FC, useState, useEffect } from "react"; import { Formik } from "formik"; im…

Reactで出てくる言葉 トラハックさんの動画や書籍と教材から知っておくべき部分のまとめ *JavaScriptは長いのでjsと書く Component(コンポーネント) - UIの部品、またはそのUIを表現するパーツの単位 - パーツなので1コンポーネント = 1ファイル(再利用できる!) - ファイルを分けることで管理がしやすい - 一箇所変えれば使っているコンポーネント全てに反映される - コンポーネントを組み合わせてページを作る - 2つの記述方法がある (classと関数) - 頭文字は大文字で書く事 ○ <Welcome /> x <welcome /> 以下２つの記述例です Cl…

りあクト！輪読会[第3.1版]【 1.言語・環境編】 2021年8月22日 Node.jsはなぜ必要？ JavaScriptsはWeb上（ブラウザ上、クライアントサイド）で動かすための言語 Node.jsとはJavaScriptsをローカル上で動くようにするためのソフトウェア Node.jsを使うと、JavaScriptをRubyやPhytonみたいにサーバーサイド言語として使えるようになる npm(NodePackageManager)とはrubyでいうbundlerのようなもの、バージョン管理ツール rails sでローカルが起動した時にサーバー立ち上げ(rackとかミドルウェアも含んで)…

問題 2021/9/17時点で確認された不具合 原因 対処方法 問題 仕事先ではRnovateを使用して週１でライブラリのアップデートを行っています。 Renovateって何？って方はこちらから www.whitesourcesoftware.com メジャーバージョンアップ時はその対象のモジュール単体で、マイナーバージョンアップ時はその週に更新された依存モジュールを まとめてPRを作成して開発者が確認を行いライブラリのメンテナンスを行っています。 ついこの間マイナーバージョンアップでPRが作成されていたので確認したところ、テストが失敗してました。 その中にはjest v27.1.0→v27.…

×210 1日1問、半年以内に習得 シェル・ワンライナー160本ノック：書籍案内｜技術評論社 ×130 CentOS 8とバイナリ互換のRHELクローン「MIRACLE LINUX 8.4」が無償公開へ。今後のバグフィクスやアップデートも無償。CentOS 8の代替を狙う － Publickey ×35 Ransomware Encrypts South Africa's Entire Department of Justice Network - Slashdot ×25 NASA Confirms Thousands of Massive, Ancient Volcanic Eruptio…

Create React Appで作成したアプリケーションに対して、E2EテストをTestCafeで実装した。 ローカルでE2Eテストを動かす分にはさほど難しくはなかったが、GitHub Actions で動かす際にはハマったりすることが多かったので、一旦このように書けば動く、というコードをこちらに載せることにした。 将来、自分がサクッとTestCafeによるE2EテストをGitHub Actionsで動かすためのメモ的なニュアンスとなる。 なお、GitHub Actionsで動かす際にハマったあれこれについては、後日備忘録にまとめてこちらに別途残しておこうと思う。 TestCafeによるテス…

Privacy policy ① →本日は同②となります。 How we use collected information up-load.io gathers and uses Users individual data for the accompanying purposes: - To customize client experience We may utilize data in the total to see how our Users as a gathering utilize the administrations and assets gave on our Sit…

今日のイチオシDreamNews ベトナムからITエンジニアの緊急派遣サービスを提供 ～最短3日で即派遣、ピンポイントでエンジニアを調達。～PHP,AWS,Reactのフルスタック対応 VTD,Inc.

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。 しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも…

どうも、次世代デジタル基盤開発事業部（旧ブロックチェーン事業部）の土田です。 今回から前回つくった開発環境を使ってDappsを作っていきたいと思います。 tec.tecotec.co.jp 今回のゴール コントラクトを書いて、プライベートチェーン上にデプロイし、実行するところまでをやっていきます。 Ganacheの永続化 まずはGanacheで立てたノードの永続化を行います。起動時にオプションを指定するだけです。 yarn ganache-cli --db 任意のパス --mnemonic "任意の文字" --networkId 任意の数字 各種オプションについては下記を参照して下さい。 gi…

Reactアプリの続きです。前回は配色ジェネレーターを作りました。今回からTone.jsを使った音楽アプリ編に入ります。以前CodePenで作成したビートプレイヤーをReact/Next環境に移植してみました。それではいきましょう！

どうも、ちゃんなるです！ 今日はrobots.txtについてまとめます。 先日React.jsを学ぶために公式チュートリアルを始めました。アプリの土台を作るためにコマンド（npx create-react-app sample-app: sample-appをアプリ名とする）を叩くと、色々なファイルとともにrobots.txtも生成されました。 「えっ？なにこれ？」となって今に至ります。 robots.txtとは？ 参考文献 robots.txtとは？ これは、検索エンジンのクローラに対して、サイトのどのURLにアクセスして良いかを伝えるものです。 基本的にはクローラのサイトへのトラフィックを…

ソースコード 甲 乙 デフォルトはtype="submit" 発生時 まとめ ソースコード 甲 <button></button> 乙 <button type="button"></button> 甲だとクリック時リロードされ、 乙だとリロードされないんですね。 デフォルトはtype="submit" <button>でtypeを指定なしにすると、 デフォルトのsubmitの振る舞いをするようです。 発生時 最近はReactでtodoアプリを最近作っていまして、 datepickerを<button>か、 nput[type="text"]にしようかと迷っており、 前者を試した時に現象が出ま…

概要 HTML の <textarea /> には autofocus という属性があり、これを指定するだけでフォーカスが効きます。 textarea - HTML: HyperText Markup Language | MDN ただし、初期状態でテキストが入力されている場合、文頭にカーソルが置かれてしまいます。 そんな時は、setSelectionRange 関数が使えます。 HTMLInputElement.setSelectionRange() - Web API | MDN 本来はテキストを選択状態にする関数ですが、第一引数（selectionStart）と第二引数（selectio…