内容と経緯 実務にてパフォーマンスに関する相談があり、その中で話題になった知識や相談に乗る上（パフォーマンスを考慮する上）で意識すると良い点などを走り書きのメモにはなりますが、こちらに書き起こしておきます。 パフォーマンス 遅延処理（ジョブキ…

instanceof と inの違い instanceof object instanceof constructor instanceof 演算子は、object のプロトタイプチェーンに constructor.prototype が存在することを検査します。 in prop in object in 演算子は、指定されたプロパティが指定されたオブジェ…

1. クラスフィールド宣言ができるようになった そもそもクラスフィールドとは フィールドはクラスの中でデータの値を保管するために使用するものです。 メリット 今までのClass構文ではconstrutor()でフィールドを持たせる必要がありましたが、ES2022からは…

問題 https://algo-method.com/tasks/213 ◇ 問題の意図 配列の中から一番大きな数字を取り出してほしいようです。 Rubyで解いてみる ◇ 解く過程 問題を解くためのメソッドを検索 『ruby 配列 大きい要素』検索でヒットした記事 - Ruby リファレンス 3.1 ◇ 提…

今回の問題 配列の要素と右隣の数字を比較して右隣が大きいケースの回数をカウントするという内容です。 解答 yano's answer Array.prototype.reduce()を使用しました。 countを出す・配列のindexを使って操作する点などでreduceが妥当と判断しました。 //(…

今回実装した機能 投稿一覧ページにログインユーザーの新規投稿ページへ遷移するボタンを実装 仕様 userとpostを紐付ける new Postリンクをクリックすると、投稿フォームが出る 投稿に成功したら、投稿一覧に遷移する 投稿に成功したら、「投稿に成功しまし…

テーブル構成 ◆ usersテーブル name:string email: string crypted_password: string salt: string ◆ postsテーブル title:string body: text user_id:bigint(references) ◆ commentsテーブル body: text text: string 実装 ログイン機能・サインアップ機能…

Reactの差分検出処理エンジン Reactではstateの値とpropsの値に差分を検出すると、コンポーネントのレンダリング処理を再実行します。 stateとprops stateは、コンポーネントが持つ状態のことです。 stateでは、エラーがあるか、モーダルウィンドウが開いて…

世代におけるフロントエンド技術の特徴 フロントエンド技術を世代分けすると、第1世代が prototype.jsやjQuery といった DOM 操作を中心に据えたユーティリティライブラリ、第2世代がAngularJSが挙げられます。 現在はReact、Vue.js、Angularが第３世代と呼…

Ryuji's answer TypeScript import * as fs from 'fs' const input = fs.readFileSync("/dev/stdin", "utf8") const [nv, alist] = input.split("\n") const [n,v,..._] = nv.split(" ").map(Number) const list = alist.split(" ").map(Number) type LastIn…

単方向データフローとは Reactでは親コンポーネントから子コンポーネントにpropsという形でデータが流れ落ちます。子コンポーネントから親コンポーネントにデータが逆流することはありません。 双方向バインディング 親コンポーネントと子コンポーネント間で…

Ryuji's answer TypeScript import * as fs from 'fs' const input = fs.readFileSync("/dev/stdin", "utf8") const [nv, alist] = input.split("\n") const [n,v,..._] = nv.split(" ").map(Number) const list = alist.split(" ").map(Number) type PlusNu…

ポリモーフィック関連付けとは ある一つのモデルが複数のモデルと関連付けがある事をpolymorphic: trueと1つの関連付けのみで示すことができます。モデルにポリモーフィック関連付けを行なった場合、データベースにもテーブル同士の関連付けがある事をマイグ…

Component-Based(コンポーネントベース)、Just The UI(UIにしか関知しない) ReactにはRuby on RailsのようなMVCという概念はなく、model, controllerはアプリケーションを構築するのに必要ないと考えているのではないかと書籍では語られています。 コンポー…

プログラム上で入力を扱う Ruby N, V = gets.split(' ').map!(&:to_i) A = gets.split(' ').map!(&:to_i) puts N puts V puts A.class JavaScript function main(input) { const args = input.split("\n"); const inputArray = args.map((n) => n.split(" ")…

フロントエンドの歴史 年 出来事 2005 Googleマップが登場 2006 jQueryが登場 2008 GoogleがChromeのJavaScriptエンジンであるV8をオープンソース化して公開 2009 V8エンジンを採用したJavaScriptの実行環境であるNode.jsがリリース 2009 ES5を発表 2010 Bac…

has_many :through 関連付け Physician・・・・医者 Appointment・・・診察予約 Patient・・・患者 class Physician < ApplicationRecord has_many :appointments has_many :patients, through: :appointments end class Appointment < ApplicationRecord be…

stylelintとは stylelintはCSSのlinterです。 使用するには4つのパッケージをインストールします。 stylelint ... stylelint本体です。 stylelint-config-standard ... stylelint公式による標準の共有設定です。 stylelint-order ... stylelintの並び順に関…

基本的な用語 コレクション コレクションとは，いくつかのオブジェクトをまとめて取り扱うための「容器」として振る舞うオブジェクトです。Rubyの標準ライブラリはいくつかのコレクション・クラスを提供しています。代表的なものはArray（配列）とHash（ハッ…

アルゴ式とは プログラミングを解くドリルが提供されているWEBサービスである。by yano 今回の問題 配列の全探索 1 Ryuji's answer JavaScript function main(input) { const args = input.split("\n"); const inputArray = args.map((n) => n.split(" ")); …

Prettier Prettierはフロントエンドのメジャーどころをほぼ網羅しているフォーマッタです。 TypeScript、HTML、CSS、Vue、Angular、GraphQL、CSS in JS の styled-components など コードフォーマッタとは インデントや改行などの記述スタイルのフォーマット…

問題 １以上の整数nが与えられたとき、１からnまでの整数の内 7で割り切れない数の合計を出力するプログラムを示してください。 例えばnが７の場合は1, 2, 3, 4, 6, 7の合計を出力する。 関数型プログラミングと手続型プログラミングの違い 関数型プログラミ…

依存パッケージをリストアップする npm info パッケージ名 peerDependenciesを実行すると、依存しているパッケージをリストアップできます。 以下の例では、styled-componentsの依存パッケージをリストアップしています。 ➜ frontend git:(feature/add_#403)…

RubyではRubocopなどを用いることでコードのバグの警告や自動整形を行うことが出来ます。対してJavaScriptではlinterやコードフォーマッタを使用します。 linterとは コードを静的解析してコンパイルではじかれない潜在的なバグを警告するものです。 放って…

復習 トランスパイル 一つのプログラミング言語で書かれたプログラムのソースコードを別のプログラミング言語と同等のソースコードを生成すること また、それを行うプログラムをトランスパイラといいます。 BabelはES2015以降のJavaScriptやJSXをトランスパ…

JSXの基本構文 JSX構文 <MyComponent foo="bar">baz</MyComponent> コンパイルされると 以下のReact.createElementの形式に変換されます。 React.createElement(component, props, ...children) React.createElement(MyComponent, { foo: 'bar' }, 'baz'); React.createElementの実行結果が以下の…

JSXの基本文法 tsconfig.jsonのjsxオプション reactに設定している場合 JSXの記述はReact.createElement(...) のように変換されます。 createElement メソッドの上位モジュールのReactをインポートする必要があります。 react-jsxにしている場合 TypeScript4…

なぜReactはテンプレートを使わないのか JSファースト(思想) ReactではJavaScriptで一貫してviewのレンダリングも行います。 JSXはオブジェクトを生成するためのJavaScriptの純粋な式であり、フレームワークから特別扱いされることはありません。 HTML テン…

JSXとは 名前の由来は『JavaScript』と『XML』の組み合わせです。 XMLライクな記述を出来るようにしたECMAScript2015を構文拡張したものです。 JSXは、コンパイル後にReact.createElementになります。 React.createElementを実行すると、ReactElementオブジ…

TypeScriptのコンパイルオプション tsconfig.json TypeScriptプロジェクトのコンパイラ設定を保存しておくためのファイルです。 コンパイルが実行される際、デフォルトではプロジェクトルート配下から順に探索し、最初に見つかったtsconfig.json ファイルが…