2020-12-01から1ヶ月間の記事一覧
ボタンを押すとAPIのJsonの情報が追加されるようにする ▼asyncとawait fetchというのを使うと良い ・htmlにいれる <button id = "addBtn"> <script src="index.js"></script> const button = document.getElementById('addBtn'); const lists = document.getElementById('lists'); button.addEventListener("click",</button>…
画像を中央の位置でトリミングするなど、欲しい部分で画像を取り出す方法 www.webcreatorbox.com
文字列からアクセルするときはバッククオートとドルマークを使う。${変数[配列番号]} 'use strict'; { const scores= [ 80, 90, 40,90000 ,478888892387]; // console.log(`Score: ${scores[0]}`); // console.log(`Score: ${scores[1]}`); // console.log(`…
lessコマンドから抜けられなくなった時（git logをみて、元のコマンド画面に戻りたい時など） 以下の資料を参考にqを押下したら抜けられた https://www.webdesignleaves.com/pr/plugins/mac_terminal_basics_01.html
基本 ▼htmlのheadにstyleタグを入れる <link rel="stylesheet" href="css/[ファイル名].css"> ・文字カラー ※セクレター： 色； hi{ color: red; } ▼枠の全てのh1ではなく、枠の中の直下の階層にだけスタイルを適応させたい時（不等号記号を使ってあげる） .works > h1{} .works > section > h1{} /*ワークスの直</link>…
JSのきほん ・JSは大文字、小文字を区別する ・デベロッパーツールのconsoleを見てあげること（エラーメッセージが出る） クリックしたら、背景が変わるようにシステムを作りたい ▼まず、クリックできることを指定するのに、CSSで「cursor:pointer」とつける…
JSのきほん ・JSは大文字、小文字を区別する ・デベロッパーツールのconsoleを見てあげること（エラーメッセージが出る） クリックしたら、背景が変わるようにシステムを作りたい ▼まず、クリックできることを指定するのに、CSSで「cursor:pointer」とつける…
htmlやCSSののマークアップの仕方が書いてあるのでよく確認 ・トップ画面は”index.html”に設定するのが一般的 ・VScodeで編集したら、そのままタブをChromeにドラッグ＆ドロップして表示できる ・属性名は大文字でも小文字でもOK 活用ショートカット 移動し…
こう書くと中に何が入っているかわかりやすくなる。 ``` onClick={(e) => {props.onSaveItem();console.log(e)} #Reactの初歩知識などをhoshi-takanoriさんに伝授してもらう [https://teratail.com/questions/314399:title] #最近の create-react-app で作っ…
１：開発準備 <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>React Todo App</title> <link rel="stylesheet" href="css/styles.css" /> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <…</link></meta></meta></head></html>
index.htmlと同じフォルダに「favicon.ico 」の名前で登録すればOK。
参考 reffect.co.jp データ保存場所Store作成（@index.js） import { createStore } from "redux"; const store = createStore(); export default store; ・createStoreの引数にreducerという関数が必須 ・reducerは共有を行いたいデータを保持し、reducer関…
Gitの歴史 作者：リーナス・トーバルズ linuxの製作者 2005年ころにGitの原型を開発 GitHubとは Gitリポジトリのホスティングサービス ファイルの変更をオンライン上で管理してくれる プルリクエストで複数人の開発 世界中のコードが見れる オープンソース G…
参考 yucatio.hatenablog.com ▼Reduxの導入 qiita.com Reactの世界 ・viewはユーザの動作(クリックなど)が発生したら、actionを作成してstoreに渡す(dispatchする)。 ・storeは状態(state)を保持している。dispatchが呼ばれると、storeはactionとstateをredu…
htmlやCSSののマークアップの仕方が書いてあるのでよく確認 ・トップ画面は”index.html”に設定するのが一般的 ・VScodeで編集したら、そのままタブをChromeにドラッグ＆ドロップして表示できる ・属性名は大文字でも小文字でもOK 活用ショートカット ▼移動し…
$grep 'Be+r' drink.txt →基本の正規表現ではマッチしない -Eオプションを使うことで拡張正規表現ので利用できる $ grep -E 'Be + r' drink.txt Ber Beer BeerBeer Beeeeeeeeeeeeeeeeeeeeeeer!! 繰り返し回数の指定をするメタ文字 （eの4回以上の繰り返しに…
参考 サンプル import React from 'react'; class ContactForm extends React.Component { render() { return ( <div className='contact-form'> <form> <p>メールアドレス（必須）</p> {/* inputタグを追加 */} <input /> <p>お問い合わせ内容（必須）</p> {/* textareaタグを追加 */} <textarea /> {/* 送信ボタンを追加 */} <input</textarea></form></div>…
変数がtrueのときだけモーダルが表示されるようにする。 変数modalを用意し、条件分岐を行えば、変数がtrueのときだけJSXが代入される。 変数に代入するJSXが複数行の場合、JSXを()で囲む。 ※モーダルとは「モーダルウィンドウ」の略。「開いている間は親ウ…
参考 link(https://prog-8.com/react/study/2/1#/4) 注意点 ▼props作るときに、ファイルApp.jsのから要素の中にカンマをつけないように！カンマつけてて、気が付けなかったことがあった！ ▼また、値を入れるときに、＝ではなく、：を書いてしまうミスが多い…
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = {プロパティ名: 値}; } render() { return ( <div> {/* stateの値を取得するには「this.state.プロパティ名」を入れる*/} <h1>こんにちは、{this.s</h1></div>…
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = {プロパティ名: 値}; } render() { return ( <div> {/* stateの値を取得するには「this.state.プロパティ名」を入れる*/} <h1>こんにちは、{this.s</h1></div>…
イベントの書き方 ・アロー関数を使って、タグ内に イベント名={() => { 処理 }} と書くことで、指定したタイミングで処理を実行できる。 アロー関数はJavaScriptなので、{}で囲むことを忘れないように 「クリックされた時に処理を実行する」onClickイベント…
Dockerについての説明 10分でわかるDocker超入門 - Qiita ファイルのパスで以下コマンドを実行 docker-compose build Dockerの起動 docker-compose up Dockerを停止させる キー： control + C ▼現在起動中のコンテナの一覧が出力 $docker ps ▼Dockerでログを…
新しいサーバーに接続 ssh root@IPアドレス ファイルを探す find / -name httpd.conf -print groupadd コマンド（Linux） →新規グループを作成する 使用例）# groupadd -g 300 ＜グループ名＞ ・-g ＜グループID＞ （--gid グループID） 作成するグループの…
VSCode上でターミナルを開く →control + shift + `
VSCode上でターミナルを開く →control + shift + `
参考 bootstrap-guide.com
参考 bootstrap-guide.com
参考 bootstrap-guide.com
Gitリポジトリを初期化→コミット $ git init $ git add -A $ git commit -m "Initialize repository" ▼コミット時、「dquote> 」が発生 ・「"」（ダブルクォーテーション）のせい（dquote = double quotation の略） →半角の”を付ければ解消 lawrence-twin.h…
