クラスコンポーネント関数コンポーネント クラスコンポーネントの型つけ // props とstateの型を宣言する type Todo ={ id:number body: string } type TodosState = {} // ここは特になければオブジェクトを受け取る type TodosProps = { todos: Todo[] } c…

Typescriptを勉強するにあたり Typescriptは、型の推論をする事。 ジェネリクスが何となくわかればギリギリ戦える 型の種類 8つあるらしい。 ただ、最初は、Number、String、Boolean、Nullくらいで良い気がする Undefined Null Boolean Number Bigint String…

expressの基本 インストール npm install --save express シンプルなリクエストレスポンス localhost:3000にアクセスすると、Hello worldの文字が ## index.js const express = require('express') const app = express() const portNo = 3000 app.get('/', …

React 動的なフォームコンポーネントを作る components UI Input Input.js Input.css App.js Imput コンポーネント import React from 'react'; import ReactDOM from 'react-dom'; import classes from './input.css' const input = (props) => { console.l…

React Router 基本 インストール npm install --save-dev react-router react-router-dom 必要なファイル index.js ## エントリーのファイル App.js ## index.jsで読み込む最初のコンポーネント First,Second,Third ## リンクさせたいコンポーネント index.j…

クラスライフサイクルメソッド 実行順番 結構この順番を理解していないと、レンダリングされる順番を理解していないと、 修正がうまく反映されないことがあるので、とても役に立ちそう 実行順番は下記らしい 1.constructor() 2. getDerivedStateFromProps(pr…

アロー関数の書き方 Reactの本だったら動画を見る時に、アロー関数で、ソースを読み進める事が苦労したので、まとめ。 アロー関数は、実はReactは関係なくJavascriptの記法らしいです。 ただ、Reactでやたら出てくるので、覚えて置くと便利 通常の書き方と、…

結論 コンポーネント内に入れてしまうでいいかなと思いました components tweets tweets.js tweets.scss cssファイルの呼び方 import 'パス' こんな書き方もある const styles = { red: {color: 'red'} } <h1 style={styles.red}>hello</h1> => helloが赤色になる 参考にした記事 jsで管…

ファイルのインポートエクスポート Reactと書いてありますが、これはjavscriptの記法だった気がします インポート インポートする時にエクスポートの方法によって、異なるので注意が必要です。 exportはデフォルトをつける場合とつけない場合があります。 デ…

React 関数を子コンポーネントに渡す 地味にここつまりました この入力フィールドに入れた値を更新している import React from 'react'; import logo from './logo.svg'; import './App.css'; class App extends React.Component { constructor(props) { sup…

関数コンポーネントの書き方 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } ## これ同じ const Welcome = () => ( <h1>Hello, {props.name}</h1>; ) 注意点 ()でかくと、デフォルトでreturnをしてくれる。 {} で書くとエラーになる const Welcome = () =>…

大枠 stateで現在のタブを管理する（currentTab） stageで選択したタブを管理して、setStateで更新する 内容の部分に関しては、stateの内容に応じて出し分ける まずは、選択する部分を作ってみる これは現時点のTwitterのカテゴリーを参考にしています cssを…

webサービスとは？ 自分なりの解釈ですが、 【ブラウザー上で使えるサービス】の事をwebサービスをと 呼ぶのかなと思いました。 webサービスに出てくる登場人物 リソース（HTML・CSS・Javascript） 私たちがブラウザーで見ている画面は、HTML・CSS・Javascri…

絞り込み検索 Reactで絞り検索を実装する 挙動動画 gyazo.com ポイント ポイントは、2つ。 1つめは、filterメソッドを利用する。 配列の中身を検索するメソッド。 検索ワードを、onChangeイベントで取得して、 filterメソッドで条件にヒットしたモノだけを配…

モーダルを自作しみる 内容は、クラスの付け替えで実装しました。 display: none;とblockを活用 キャプチャー ボタンを設置 ボタンをクリックする Xをクリックするとモーダルが消える ソース <button id="target">クリック</button> <div id="box"> <div id="close">X</div> <form action=""> <label for=""> 名前: <input type="text"> </label> <br> <label for=""> Email: <input type="text"> </label> </form></div>

要素をフルフルする フルフルさせる要素を設置 # フルフルさせる要素 <div id="target">hello</div> css id targetで、箱みたいな要素を作成する shakeクラスではアニメーションをプロパティで動かせる animationの引数では、shakeの変数を見に行っていて、@keyframesで定義している…

rails ハッシュタグ検索をできる様にする 要件を考える ハッシュタグがつく文字列に色付けをする ハッシュタグで検索する方法を考える ハッシュタグで検索する方法を考える これは簡単そうだ。 LIKE検索でいける Tweet.where('body like ?','%#テストハッシ…

ヘッダーを固定する 完成 手順大枠 cssを書く idをhtmlにつける jsで特定の高さになった場合にクラスをつける cssを書く positionで高さを固定 z-indexで要素を一番上に持ってくる #header-title.fixed{ position: fixed; top: 0; background-color: white; …

Reactで画像を送信する上で要点をまとめました。 カラムを追加する class AddImageToTweets < ActiveRecord::Migration[5.2] def change add_column :tweets, :image, :string end end carriaweaveを入れる gem 'carrierwave' アップローダーを作成 rails g …

スマホ対応のブレイクポイント 結論 下記の様に分ければ良い！！ 今は560pxでスマホとPCの幅が区切られるらしい。 iphoneXでも、widthが370px程らしい # スマホ対応 @media (max-width: 559px) { } ## pcの対応 @media (min-width: 560px) { } 注意点 max-wi…

react で絵文字を入力できる様にする emoji-martで簡単に実装できた。 実装イメージ インストール yarn i emoji-mart 絵文字ってどんなデータなんだ？ 投げキッスをした絵文字のオブジェクトを見て見る nativeのkeyを見るとそのままやんけ！！ 想定していた…

スマホの実機でローカルの開発環境を動かす 参考記事のままです localhost をスマホで確認する方法 1.同じ Wi-Fi に PC / スマホで接続する 2.PC のIPアドレスを確認する（Mac の場合は システム環境設定 => ネットワーク など） 3.localhost を PC で起動 4…

Docker でrails を立ててみる やはりDockerからは逃げられないなという事でrailsを立てて見ました。 ドキュメントを参考にやってみたのですが、自分で調べて見たところをメモがてら ドキュメントを参考にやりました docs.docker.jp ※ドキュメントをなぞればr…

アイコンにカーソルを当てたら、色を変える 地味に苦戦した。Twitterの様に作成したい 完成 こんな感じ。 地味に作るのに苦労しました html <ul className="side-links"> <li><i className="fa fa-search"></i></li> <li><i className="fa fa-search"></i></li> <li><i className="fa fa-search"></i></li> <li><i className="fa fa-search"></i></li> <li></li></ul>

scope使い方 ifがついている場合はtrueの時だけ実行 この場合、access_keyにnilかfalseが入って入れば実行されない scope :search_proeucts, -> (access_key) { where(access_key: access_key) if access_key.present? }

React Formのドキュメントを読んで見る ja.reactjs.org 元のソース class Test extends React.Component { constructor(props) { super(props) } render () { console.log(this) return ( <div className="App" > </div> ); } } export default Test; thisをみて見る thisの中身にはprops…

基本レイアウト 実装 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="wrapper"> <div class="header"> </div> <div class="main"> <div class="left"> </div> <div class="right"> </div> </div> <div class="footer"> </div> </div> </body> </html>

box-shadowの使い方 box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; 四角形に影をつけてみる .box{ width: 100px; height: 100px; background-color: skyblue; box-shadow: 3px 3px 4px; } 参考記事 saruwakakun.com

opacityの使い方 要素を透明にする事ができる よく使うケースは、hoverと組み合わせるケースがほとんどな気がします。 hoverとopacityを組み合わせた場合 li { list-style: none; } .link { color: blue; } .link:hover{ transition: .3s; opacity: 0.5; }

擬似要素の使い方 Hello worldの前と後ろに『』をつける 『Hello World』と一つのタグに入れる事もできるけど、記事要素を使うと分けられる .text::before{ content: '『'; font-weight: 10px; } .text::after{ content: '』'; color: skyblue; } これにはpo…