React Hooks APIを取得する

f:id:jyoohashi:20210311210644p:plain

ReactでHTTP通信をするのをやってみた。ソースコードを以下にはっておきます。

まずは、「npm install axios」を最初にやっておくこと。

 

import React, { useState, useEffect } from "react";

import axios from "axios";

export default function App() {
const [items, setItems] = useState();

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
const fetchData = async () => {
setIsLoading(true);

const result = await axios(
"https://hn.algolia.com/api/v1/search?query=react"
);

setItems(result.data.hits);
setIsLoading(false);
};
fetchData();
}, );

return (
<>
{isLoading ? (
<p>Loading</p>
) : (
<ul>
{items.map*1}
</ul>
)}
</>
);
}

 

*1:item) => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>

■

CSS変数

参考にしたサイト、URL:https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

フレキシルボックスの練習の際に今流行のCSS変数を使って色を予め決めておいてつかい回せるようにしておいた。

以前はSCSSを使っていたが、CSSの方が使用率が高かったのでカラーボックスの作成に使っていた。

f:id:jyoohashi:20210220192446p:plainCodePen,URL:

https://codepen.io/sakurakotubaki/pen/bGBrago

 

■

Ajax通信による外部サイトの表示方法について

- 4ヶ月以上JavaScriptを勉強しているが、ajax通信(非同期処理)と呼ばれるものが、本の通りに書いてもできなかったが、Webサイトのトップページを表示させるのには、成功した。

- 意外と簡単だった。昔はjQueryで短く書けるからと書いていた時代があったようですが、素のJavaScriptでも短くけます。

こんな感じです。

<!-- <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<div id="log"></div>

<script>
async function load() {
const data = await fetch('https://bootcamp.fjord.jp/');
const text = await data.text();
console.log(text);

document.querySelector('#log').innerHTML = text;
}

load();
</script>
</body>
</html> -->

■

フィヨルドブートキャンプさんへ入会して６日目、HTMLとMarkDownをやってみた。簡単と思ったら、見た目を整えないといけないので結構むずい。

運営側は質問をすると聞きたい答えを返してくれるし、以前行っていた元エンジニアが運営していたプログラミングスクールよりカリキュラムが充実しており、受講者が多くコミュニティがあり情報が多く入ってくるので、継続したいと思う。

 

■

Ruby on Rails6.0.3でMySQLを使用する環境を構築するのに成功した。Qiitaの記事を参考にして、昨日やっと成功しました。

パスを通さないと最初だけエラーが出るようです。一度作ってしまうと次回からは、作れるみたいです。

参考にしたサイト

qiita.com

作成したモデルのキャプチャ画像もアップしておきます、。

f:id:jyoohashi:20210207142247j:plain

 

■

本日VueCLIでBMI値を計算できるアプリを作成。初めてにしては、いい感じの物ができた気がします。

CDNで作るよりプロっぽくてカッコいい!!

 

こちらが、画面をキャプチャした画像

f:id:jyoohashi:20210205005111j:plain

ソースコード
```
<template>
<div id="app">
<h1>{{ BMI }}</h1><hr>
<p>BMI（ボディマス指数 Body Mass Index：肥満指数）、標準体重を計算してみよう！<br>
計算式はBMI＝<span id="s1">体重(kg) ÷ {身長(m) Ｘ 身長(m)}</span><br>
BMI=<span id="s2">mass(lb) ÷ {heigiht(in) x height(in)} x 703 </span>(ヤード・ポンド法)</p>
<input v-model.number="weight" type="number">kg<br>
<input v-model.number="height" type="number">cm<br>
<p class="standard">あなたの標準体重{{ calc }}kg</p><br>
<p class="sm">小数点を切り捨てた数値{{ mf }}kg</p>
</div>
</template>
```

```
<script>
export default {
data(){
return{
BMI: 'BMI値計算アプリ',
weight: 0,
height: 0
}
},
computed: {
calc: function() {
let w = this.weight
let h = this.height * 2
return h / w * 703
},
mf: function() {
return Math.floor(this.calc)
}
}
}
</script>
```

```
<style>
h1 {
color: gray;
}

#s1 {
color: rgb(83, 41, 237);
}

#s2 {
color: rgba(242, 44, 44, 0.824);
}

.standard {
color: rgba(242, 44, 44, 0.824);
border-bottom: solid 2px gray;
}

.sm {
color: blue;
}
</style>
```

■

本日よりフィヨルドブートキャンプでの学習を開始。今後WEB系エンジニアを目指して、学習を進めていきます。

１年間プログラミングの学習を続けてきたが、なぜか先へ進めなかった。原因は現役のメンターがいないスクールを選んだから、現在求人で募集している技術を身に付けることができなかったからです。

これからはそのようなことはないので、業界が求めるスキルを身に付けエンジニアへの転職を成功させる。

頑張るぞ。ちょっと不安だけど、dotinstallでHtml,CSS,JavaScript,UNIX,Gitやったので少しは自信ある。うん、頑張ろう。学習は楽しくやらないと続かない。(^_^*)