問題 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（ハッ…