2022-05-01

【Javascript】分割代入使い方

Javascript

オブジェクトを代入

const user = {
  name: "taro",
  age: 24
};

# 変数名はオブジェクトのプロパティ名と一致する必要がある
const { name, age } = user;

const greeting = `名前は${name}です。年齢は${age}です。`;
console.log(greeting);
# '名前はtaroです。年齢は24です。'

配列を代入

const user = [ "taro", 24 ];

# 変数名は任意に変更可能
const { name, age } = user;

const greeting = `名前は${name}です。年齢は${age}です。`;
console.log(greeting);
# '名前はtaroです。年齢は24です。'

2022-05-01

【Javascript】オブジェクトをコンソール出力する方法

Javascript

直接オブジェクトの中身を指定した場合

const obj = {user: [{name: "taro", age: 24}, {name: "hanako", age: 30}, {name: "ichiro", age: 51}], post: [{title: "titleA", body: "bodyA"},{title: "titleB", body: "bodyB"},]}

console.log(obj)

# 階層が深い場合、展開しないと見れない
{user: Array(3), post: Array(2)}

オブジェクトをjson文字列へ変換した場合

const obj = {user: [{name: "taro", age: 24}, {name: "hanako", age: 30}, {name: "ichiro", age: 51}], post: [{title: "titleA", body: "bodyA"},{title: "titleB", body: "bodyB"},]}

console.log(JSON.Stringify(obj))

# オブジェクトが展開されて出力
{"user":[{"name":"taro","age":24},{"name":"hanako","age":30},{"name":"ichiro","age":51}],"post":[{"title":"titleA","body":"bodyA"},{"title":"titleB","body":"bodyB"}]}

参考

javascriptのデバッグでobjectの中身を文字列として展開する方法 | infoScoop開発者ブログ

JSON.stringify() - JavaScript | MDN

2022-05-01

【React】ChakraUI導入方法

React

ChakraUiとは

ReactアプリケーションのUIコンポーネントライブラリです。
モジュール化されておりインポートすることで使用することができます。

環境

Windows10
VSCode

導入コマンド

npm i @chakra-ui/react
npm i @emotion/react
npm i @emotion/styled
npm i framer-motion@4.1.17
npm i @chakra-ui/icons

今回発生したエラー

以下のコマンド実行時に発生しました

npm i framer-motion

Failed to compile
./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
Can't import the named export 'Children' from non EcmaScript module (only default export is available)
This error occurred during the build time and cannot be dismissed.

解決方法

以下のようにダウングレードしたら解決しました。

# framer-motionアンインストール
npm uninstall framer-motion

# 4.1.17バージョンを指定してインストール
npm i framer-motion@4.1.17

参考

https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-React-Hooks-asakohattori/dp/486354359X [Solved] Can't import the named export 'Children' from non EcmaScript module (only default export is available) - Exception Error

2022-04-05

RailsでWeb APIを作成する

Ruby on Rails Ruby

アプリ作成

1.ディレクトリ作成

rails new web_api_sample --api
cd web_api_sample
bin/rails s

2.http://localhost:3000へアクセスし、以下のように表示されることを確認 f:id:Toshiki2968:20220405130204p:plain

3.scaffoldコマンドを実行し、モデル、マイグレーション、ルーティング、コントローラを追加

bin/rails generate scaffold task title:string body:text
bin/rails db:migrate

4.テストデータを追加

#app/db/seeds.rb

3.times do |i|
  Task.create(title: "タイトル：#{i}", body: "内容：#{i}")
end

以下を実行

bin/rails db:seed

curlコマンドでアプリにアクセスする

データ読み込み

curl http://localhost:3000/tasks
[
 {"id":1,"title":"タイトル：0","body":"内容：0","created_at":"2022-04-05T02:06:38.468Z","updated_at":"2022-04-05T02:06:38.468Z"},
 {"id":2,"title":"タイトル：1","body":"内容：1","created_at":"2022-04-05T02:06:38.473Z","updated_at":"2022-04-05T02:06:38.473Z"},
 {"id":3,"title":"タイトル：2","body":"内容：2","created_at":"2022-04-05T02:06:38.477Z","updated_at":"2022-04-05T02:06:38.477Z"}
]

データ作成

curl -H "Content-Type: application/json" -X POST -d '{"title": "テストタイトル", "body": "テスト内容"}' http://localhost:3000/tasks

id:4が追加されていることを確認
[
 {"id":1,"title":"タイトル：0","body":"内容：0","created_at":"2022-04-05T02:06:38.468Z","updated_at":"2022-04-05T02:06:38.468Z"},
 {"id":2,"title":"タイトル：1","body":"内容：1","created_at":"2022-04-05T02:06:38.473Z","updated_at":"2022-04-05T02:06:38.473Z"},
 {"id":3,"title":"タイトル：2","body":"内容：2","created_at":"2022-04-05T02:06:38.477Z","updated_at":"2022-04-05T02:06:38.477Z"},
 {"id":4,"title":"テストタイトル","body":"テスト内容","created_at":"2022-04-05T02:40:56.569Z","updated_at":"2022-04-05T02:40:56.569Z"}
]

データ削除

curl -X DELETE http://localhost:3000/tasks/4

# id:4が削除されていることを確認
[
 {"id":1,"title":"タイトル：0","body":"内容：0","created_at":"2022-04-05T02:06:38.468Z","updated_at":"2022-04-05T02:06:38.468Z"},
 {"id":2,"title":"タイトル：1","body":"内容：1","created_at":"2022-04-05T02:06:38.473Z","updated_at":"2022-04-05T02:06:38.473Z"},
 {"id":3,"title":"タイトル：2","body":"内容：2","created_at":"2022-04-05T02:06:38.477Z","updated_at":"2022-04-05T02:06:38.477Z"}
]

データ更新

curl -H "Content-Type: application/json" -X PATCH -d '{"title": "変更後のタイトル", "body": "変更後の内容"}' 

# id:1が変更されていることを確認
[
 {"id":1,"title":"変更後のタイトル","body":"変更後の内容","created_at":"2022-04-05T02:06:38.468Z","updated_at":"2022-04-05T03:35:37.906Z"},
 {"id":2,"title":"タイトル：1","body":"内容：1","created_at":"2022-04-05T02:06:38.473Z","updated_at":"2022-04-05T02:06:38.473Z"},
 {"id":3,"title":"タイトル：2","body":"内容：2","created_at":"2022-04-05T02:06:38.477Z","updated_at":"2022-04-05T02:06:38.477Z"}
]

参考

https://qiita.com/digitter/items/53f83ce50036b2773d55

2022-04-04

【React】Hello World!を表示

React

環境

macOS Big Sur バージョン11.4
VS Code

アプリ作成

プロジェクト作成

// ターミナル

npx create-react-app sample-app
cd sample-app
npm start

「http://localhost:3000/」へアクセスし、以下のような画面が表示されることを確認 f:id:Toshiki2968:20220403164247p:plain

srcフォルダの中身を削除
srcフォルダにindex.jsファイルを作成

// src/index.js

// render関数を使うため以下のライブラリをインポート
import ReactDOM from "react-dom";

// アロー関数Appを定義
const App = () => {
  return <h1>Hello world!</h1>;
};

// index.htmlのdivタグ(id="root")へApp(コンポーネント)をレンダリングする
ReactDOM.render(<App/>, document.getElementById("root"));

// public/index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Sample App</title>
  </head>
  <body>
    <div id="root"></div> <!--ここにレンダリングされる -->
  </body>
</html>

「http://localhost:3000/」へアクセスし、以下のように「Hello World!」が表示されることを確認

参考

https://www.amazon.co.jp/%E3%83%A2%E3%83%80%E3%83%B3JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B-React%E5%AE%9F%E8%B7%B5%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/481561072X

2022-04-03

【Javascript】アロー関数使い方

Javascript

従来の関数

function func1(val) {
  return val1 + val2;
};

console.log(func1(1,2)); # 3

変数に代入後、実行させることもできる

const func1 = function (val1, val2) {
  return val1 + val2;
};

console.log(func1(1,2)); # 3

アロー関数

const func1 = (val1, val2) => {
  return val1 + val2;
};

console.log(func1(1,2)); # 3

引数が1つの場合、括弧を省略できる

const func1 = val => {
  return val;
};

console.log(func1(3)); # 3

返却処理が1行の場合、returnを省略する事もできる

const func1 = (val1, val2) => val1 + val2;

console.log(func1(1,2)); # 3

返却処理が２行の場合

const func1 = (val1, val2) => (
  {
    name: val1,
    age: val2
  }
);

obj1 = func1("taro", 14); # {name: 'taro', age: 14}

参考

2022-04-03

【Javascript】var let constの使い方

Javascript

はじめに

var let constの使い方をまとめました。

使い方

変数宣言	上書き	再宣言	備考
var	◯	◯
let	◯	X
const	X	X	オブジェクトや配列を宣言した場合は上書き可能

var

var value1 = "値1";
console.log(value1); # 値1

# 上書き可能
value1 = "値2";
console.log(value1); # 値2

# 再宣言可能
var value1 = "値3";
console.log(value1); # 値3

let

let value1 = "値1";
console.log(value1); # 値1

# 上書き可能
value1 = "値2";
console.log(value1); # 値2

# 再宣言不可能
let value1 = "値2"; # エラー「Uncaught SyntaxError: Identifier 'value1' has already been declared」

const

const value1 = "値1";
console.log(value1); # 値1

# 上書き不可能
value1 = "値2"; # エラー「Uncaught TypeError: Assignment to constant variable.」 

# 再宣言不可能
const value1 = "値2"; # エラー「Uncaught SyntaxError: Identifier 'value1' has already been declared」