早期リターン 早期リターンをすると可読性が上がる function handleConsole(a:string, b:string) { if (a != 'a' || b != (b) ) { return } if (a == "a") { console.log("a") } else if (b = "b") { console.log("b") } } function hello(a: string, b:stri…

基本 private name: string;は this.nameの型 name: stringは初期化時の引数の型 class Greeter { // プロパティの定義（デフォルトで public） private name: string; // ここで肩を定義 // コンストラクタの定義 constructor(name: string) { this.name = …

React 環境変数で環境を識別する process.env.NODE_ENV => developmen

方法 stateのbooleanを更新したら、styled-componentで動的に変更する キャプチャー こんな感じのボタンを作成 クリックしたら文字色が赤になる様にします ボタンをクリックしたら文字が赤くなる ソース アプリケーション側 import RoundButton from './comp…

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

アロー関数の書き方 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を…

モーダルを自作しみる 内容は、クラスの付け替えで実装しました。 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 …

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

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…

react 再レンダリング stateのデータを更新する時に、 更新の方法によっては再レンダリングがされなくて一覧のデータが更新されない stateの更新の方法 stateを配列で持っていたとする this.state = { tweets: [] } 更新する ## NGパターン handleSave(){ co…