cssの基本単位として”rem”を使うと便利な件について

ホームページを作るときに、の幅の指定に困りませんか?

今回は、それを解決しようと思います。

width,heightの指定として、楽なのは、remです!!

remとは何か…

ルート要素(html要素)で指定した値を元に、フォントサイズ、幅、高さを指定できるものになります。

イメージがわかないと思うのでコードで見てみましょう。

html {
 font-size:15rem;
}

p {
 font-size:1.2rem;
}

strong {
 font-size:1.4rem;
}

お気づきの方もいるかもしれませんが、
htmlのfont-size:15remを元に計算します。
p要素であれば、15px x 1.2rem=18pxのような感じになります。
strong要素だれば、15px x 1.4rem = 21remという感じです。

では、rem指定だと何がいいのか?
答えは、

emや%だと<p>の中に<strong>があったときのように2重掛けが起こってしまうので、そのような煩雑なサイズの継承から逃れられます。

ただし、問題点があります。

それは、

Google Chromeでは「最小フォントサイズ」というものが存在するので、中途半端なサイズまでしか縮小できません。

例えば、
html {
 font-size: 1px;
}
p {
 margin-top:30rem;
}

のようにするとレイアウト崩れを起こします。

なので、
html {
 font-size: 15px;
}
p {
 margin-top:2rem;
}

のように、11〜20pxくらいが良いとされています。

あと、もう一つ注意点として、

remは比較的最近導入されたCSS3の単位で、IE9から対応しています。
ただし、IE10以下では一部バグあり(恐らく擬似要素のみ)とのことなので、あまりに気軽に使うと泥沼にハマる可能性があります。ご注意ください。

リファレンス:https://qiita.com/butchi_y/items/453654828d9d6c9f94b0

以上です。

もりけん塾
もりけん先生ブログ

Git GitHub について

Git GitHubでうまくいかなかったので記載しようと思います。
ちなみに、今回は、もりけん先生に教えていただいたgit cloneで作成してはいません…
次回に記事にします。

gitとgithubの違いについては、以下のリンクで調べました。
https://tech-blog.rakus.co.jp/entry/20200529/git#Git%E3%81%A8%E3%81%AF

※最初に注意することとして
ターミナルでgitを操作する場合、以後出てくるbranchの場所に注意すること!!
幹にあたるmasterなのか、branchを分けた枝で作業するのか…
移動は、git checkout “移動したいブランチの名”で移動可能

では、まず全体の流れです。

1,元々、作ってあったファイルをGitにあげるためにターミナルでGitにあげたいフォルダ(ここではaフォルダとする)へ行って”git init”と入力しました。

2、gitにaフォルダが登録され、
Initialized empty Git repository in /Users/sosukoipanda/a/.git/
という最後に.git/がついたコマンドが出ます。

3、ここから、GitHubに移って、新しいリモートリポジトリを作成します。
(下図のNEW Repositoryを選択してクリックして)

4、下図の画面になったら、上の四角の中に、フォルダ名(ここでは先ほどaとしました。)を入力します。
※これは、フォルダ名と、今回作成しようとしている四角の中のrepository nameはできれば同じ方がいいです。
何がなんだが分からなくなります。

5、2つ目の四角の”Initialize this repository with a README”はチェックを入れてください。
チェックすると何がいいのか…GitHubのリポジトリの初期化と、READMEファイルが作成でき、cloneがすぐにできるようになります。
cloneとは、羊のクローンのように同じデータを持った物をローカルリポジトリに作ります。
今回は別の方法ですが…

6、チェックができたら、下にある緑のcreate repository をクリックしてリポジトリを作成します。

それができたら、この今作ったリモートリポジトリとローカルリポジトリを連携させます。

7、下図を見て、まず、GitHub上で、作ったリポジトリの緑のcodeというボタンを押すと
git@github.com:xxxxx/xxxxxx.gitが表示されるので、それをコピーしてください。

8、先ほどコピーしたgit@github.com:xxxxx/xxxxxx.gitを
コマンドに貼り付けます。
git remote add origin git@github.com:xxxxx/xxxxxx.gitを入力してください。

9、git pull origin master をして、リモート上に作った情報をまず取得します。
このまま、git add → git commit → git push をすると、リモートとローカルとに差が出るので…

! [rejected] master -> master (non-fast-forward)
error: failed to push some refs to ‘git@github.com:yasu-pro/chef.git’
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: ‘git pull …’) before pushing again.
hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

が出ます。

なので、
git remote add origin git@github.comxxxx/xxxxxx.git
をして、git上にリモートリポジトリを作ったら、
git pull origin master をすること。

これで、ローカルリポジトリとリモートリポジトリを連携することができました。

10、ここから、htmlファイル,cssファイル,Javacriptファイルなどを変更して、
git add .(既存のファイルをステージングする)
git add –all (新規ファイルとかも含めて、ステージングする)

11、その後、ローカルリポジトリへあげるために、
git commit -m “コメントをここに入力”

12、さらに、ローカルリポジトリからリモートリポジトリへあげるために
git push origin head をする。

origin headの意味は、
・originは、git@github.com:xxxxx/xxxxxx.git でリモートのサーバー名のことです。
・headは、今いるところの先頭→つまり、ローカルリポジトリで一番新しいところのことです。

全体の流れ…

一番新しいところとは、
git commitをしていくとbranchという枝が伸びていきます。

青色の文字のgit checkout -b “ブランチ名”をすることで、枝をきるという表現をするようですが、枝が別れます。もちろんここで、作業をしてcommitすれば枝が伸びます。
で、それを、master branchにくっつける作業をします。それが緑色の文字のmergeです。

それが、写真では、一番下の○がファイルとして、一番新しい状態です。それを、リモートリポジトリにpushするというのが、流れです。

13、その後、GitHubへ行くとpullRequestという緑色のボタンが出ます。

pullRequestは、変更したコードをリポジトリに取り込んでもらうように依頼する機能です。

次に…

スクリーンショット 2014-12-17 23.21.10.png
https://qiita.com/samurai_runner/items/7442521bce2d6ac9330b

さらにpullrequestの緑色のボタンを押した後、
GitHub上で、上図の写真の緑のボタンMerge pull request を押すことで、リモートリポジトリでmergeされます。

ちなみに、これをすることで、GitHubの草が生えます!!

例えば、下図のように…

ローカルリポジトリでmergeせずに、1回commitして、枝(branch)を伸ばした状態で、pushした場合。
リモートリポジトリには、赤い四角の内容がpushされます。
ここで、先ほど ”GitHubでpullRequestして、その後のmerge pull requestを押すとリモートリポジトリでmergeがおきます。” と書きました。
GitHub上で、merge pull requestを実行すると赤い丸の段階になります。つまり、黄色い丸のところができます。

ただ、merge pull requestしたら勝手にリモートリポジトリはmergeがおきますが、ローカルリポジトリは、mergeされていませんよね…(赤い四角の内容)

つまり、ローカルと、リモートの間で、ずれが生じます。これをなくすために
ローカルリポジトリをリモートリポジトリと同じにする必要があります。
それをするのが、git pullになります。
14、git pullすれば、ローカルの黄色い点線部分ができて、ローカルと、リモートの差がなくなります。
これは、もちろん、pullRequestや、merge pull requestをした後にローカルで作業をしていたら、また、リモートの内容と違うじゃないかと怒られますので、その場合は、git stashしてください。

git stashとは、一旦変更した物を横の机みたいなところに避けるイメージです。
その後、git stashの内容を追加すれば、問題はありません。

これが一連の流れになります。(1〜13を順にやればGitHubに草を生やすことができます。)
ちなみに、gitを操作する場合は、自分のいる位置の確認。つまり、ブランチの位置の確認(git branchで確認)をしてくださいね!!git statusも忘れずに!!

リファレンス https://qiita.com/samurai_runner/items/7442521bce2d6ac9330b
       https://happy-making.com/study_log58/#toc11

2つ目のリンクは、同じ塾生のはるなさんのブログです。とてもわかりやすいです。

ここからは、僕がgit initを使って、エラーが出た内容で、どうやって解決したのかの備忘録です。

1〜10まで順調にできましたが…
11をした時、つまり、git push origin master をした時に

fatal: ‘origin’ does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

”orign”はgitリポジトリではないようです。
リモートリポジトリから読み取れませんでした。

正しいアクセス権があること、リポジトリが存在していることを確認してください。
(英訳…)

よくよく、調べてみると、8をやってませんでした。
git remote add origin git@xxxxx/xxxxxx.git

つまり、ローカルリポジトリとリモートリポジトリを連携できていませんでした。

これをした後に、
git push origin headをしたのですが…

Warning: Permanently added the RSA host key for IP address “xxxxxxxx” to the list of known hosts.
Enter passphrase for key ‘/Users/xxxxxxxxxx/.ssh/id_rsa’:
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

が出てきました。

/Users/xxxxxxxx/.ssh/id_rsa'のパスフレーズを入力:

のところが重要で、詳しく調べても分からなかったのですが、id_rsaの権限でつまずくことが多くあるみたいです。
解決策としては、一番最初にGitHubを登録した時にSSHのパスワードを設定したと思うのですが、それを入力しないと、いけないみたいです。

SSHのパスを入力したら、いけました。

その後、もう一度、git push origin headをすると今度は…

! [rejected] head -> master (fetch first)
error: failed to push some refs to ‘git@github.com:xxxxxx/xxxxx.git’
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., ‘git pull …’) before pushing again.
hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

! [拒否]ヘッド->マスター(最初にフェッチ)
エラー:一部の参照を 'git@github.com:xxxxxxxxx / xxxxx.git'にプッシュできませんでした
ヒント:リモートが行う作業がリモートに含まれているため、更新は拒否されました
ヒント:ローカルにはありません。これは通常、別のリポジトリのプッシュによって引き起こされます
ヒント:同じ参照に。最初にリモートの変更を統合することができます
ヒント:( 'git pull ...'など)再度プッシュする前。
ヒント:詳細については、「git push --help」の「早送りに関する注意」を参照してください。

とのことでした。(後半訳すのが面倒になったので、google先生にお願いしました。)

これの原因は、自分がリモートの変更をpullしてから、pushするまでの間に、他からのpushがあるなどしてリモートが変更されているためです。(そういえば一度、pushしてました。)
エラーメッセージが教えてくれているように、ブランチの先端がリモートのより後ろになっています。 ローカルの master ブランチを shared の master とマージしてあげる必要があります。 git pull でマージした後、改めてpushしましょう。

ここでの回答は、git pull origin masterと書いてありますし、この回答が多かったのですが…

自分は、git push -f origin masterでいけました。

意味は、リモートブランチがローカルブランチの派生元ではない場合も、ローカルブランチの内容で強制的に上書きする。

これには、リスクがありました。なぜなら、ローカルブランチの内容で強制的に上書きされてしまうので、本当に、上書きするローカルが正しいのかしっかりと確認する必要があります。

コマンドで行くと、実際に何が起こっているのか目で確認できないので、イメージしにくく、苦戦しますね…できるまで諦めないことですね…

以上です。

フロントエンドエンジニアになるために

フロントエンドエンジニアになると決めたのはいいけれど…
どのように進んでいくのか息詰まったので、整理します。

逆算して…

1.目標として、2021年3月までに就職をする。
2.それを達成するために、9月までに、以後記載する(HTML、CSS、JSの一部)をこなす。作品も作ること
3.順調に9月を迎えれば、引き続き、作品を作り、まとめる→もちろんGitHubにもあげる
順調に行っていなければここできちんと調整してこなすこと。
4.10月から就活をメインに切り替える。

具体的にどんなことをするのか…

HTML、CSSをほとんど忘れてしまったため、今一度、復讐することも含めなければいけません。

まず、もりけん先生の他の塾生の方に対する回答を参考にさせてもらいました。


 HTML
・サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで
・解析、DOM構築、レンダリング、レイアウトフローなど
・SEO
・アクセシビリティ

 フォトショ・イラレ
・画像をスライスできる
・簡単な加工ができる
・バナーが作れる
・パスを自由に操れる
・バッジ処理ができる

 CSS
・flex, or gridで横並びができるようになる
・position absolteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる
・擬似属性とボーダーだけでアイコンを作ることができる
・media queryでスマホ対応できる
・display blockとinline-block, inlineの違い、できることを理解
を一旦目指す

 git(github)は
・変更をpushすることができ、github上でpullRequestをmergeできること
・リモートブランチからpullで変更を取り込むことができること

 JavaScript

もりけん先生のツイート
もりけん先生のツイート

まず、JavaScriptですることとして
・改訂新版JavaScript本格入門を読む(最低2周)
 →1回目は、さっと読んで、2回目に分からないところを重点的に!!

・JSでWEBで使われるような部品を一週間で一個作る。(毎日pullRequestして草を生やす。)
 →・スライドショー(完成→リファクタリングする)
  ・ドロワーメニュー
  ・タブ
  ・フォーム
  ・検索ボックス
  ・ページネーション

ここまでで、HTML、CSS、JSの基礎をやることになる。
つまり、これを、9月中には、終わらせること+作品を作ること!!

10月には、就活をメインに切り替え、就職すること。

その後は、フロントエンドエンジニアになるべく、また考えます。

なので、一旦ここを目処に行動しようと思っています。

JavaScript~クイズゲーム 修正2~

今日は、以前のタイピングゲームの修正です。

上記が以前のコードです。

ここの117行目のところが原因で、最後の問題を解いた後に、正常であれば、結果が出るのですが、それがでません。

まず、何が原因なのか考えるため、
console.log(“3”, typeof question[random] === “undefined”);
をしています。
”3”には特に意味がありません。(見やすくしているだけです笑)

これを実行したところ三問目を解いた後に、undifinedになりました。

理由としては、
読み込まれる順番として、quizStart()→counter()→count > maxだった場合textDeleat()→result()となるのですが、
問題をランダムに表示して、問題がかぶらないようにするために、
97行目で

function randomNotInclude() {
for (let k = min; k <= max; k++) {
while (true) {
let tmp = intRandom(min, max);
if (!randoms.includes(tmp)) {
randoms.push(tmp);
break;
}
}
}

で設定したとうりで、randoms.push(tmp);
より、randoms配列にかぶらない数字を入れています。
なので、問題も1〜4(配列ではindexの番号は0〜3)しかないので、結果画面に移っても、コードは実行されているので5問目(配列indexの番号が4のとき)のときは、値がないのでundefinedになるということでした。

JavaScript~クイズゲーム 修正1回目~

JSのクイズゲームでエラーがでたので、先生に質問しました。

問題のコードがこれです。↓↓

エラーを起こすときは、
問題をスタートして、ラジオボタンが表示されて、問題に答えるためにラジオボタンにクリックしたときに、change is not definedになりました。

理由としては、HTMLのフォームのラジオボタンの要素に、onchange=”change(this.value)” としていることが原因でした。

これの何が原因かというと、 ブラウザでJSが読み込まれる際に、DOMを生成してからJSが読み込まれます。HTMLにonchangeが記載されているため、ここでJSが発動し、index.jsが読み込まれる前に、onchangeが発動するためのエラーでした。

なので、これの解決方法として
・HTMLにonchangeを書くのではなく、index.jsにaddEventListernerを使い、設定する
ここでもうひとつ疑問に思ったのが、
index.jsが読み込まれる前に発動しているのなら、<head>内にindex.jsを入れればいいのでは?と考えました。

しかし、これは、getElementByIdが読み込まれる前、つまり、DOMを生成する前に、読み込まれるため、エラーがおきます。
この解決策が、前回記事にした、DOMContedLoadedです。

LoadがDOMを含め、画像など全ての外部ファイルなどを読み込むまで起動しないのに対して
DOMContedLoadedは、DOMを読み込んで、記載されている関数を読み込みます。

これを使うことで、getElementByIdが読み込みエラーを起こさずに、JSを読み込むことができます。

以上です。

もりけん塾
もりけん先生ブログ

JavaScript~LoadとDOMContentLoadedの違い~

今日は、javascriptのLoadとDOMContentLoadedについて記事にします。

先生に質問した時に、先生の解答から調べたもでしたが、意外とブラウザでjavascriptやHTML、CSS、画像等がいつ読み込まれるのかが理解できていないと?になりました。

まず、javascriptがブラウザでどういう順番で読み込まれるのかについてです。
このリファレンスに書いてあります。

サーバにリクエストし、htmlの情報がブラウザに届いてから表示されるまで、JavaScriptはどのように処理されるか。

  1. ブラウザがhtmlを読むと最初にWindowオブジェクトが生成されます。
    windowオブジェクトは各ページまたはタブごとに生成されます。
  2. windowオブジェクトのプロパティとしてDocumentオブジェクトが生成され、htmlの中身を解釈してDOMツリーを構築しようとします。
    Documentオブジェクトには、文書の読み込み状況を示す文字列を返すreadyStateプロパティがあり、このときreadyStateプロパティの値は最初の「loading」になっています。
  3. htmlは記述順にしたがって構文解析(パース)されて、Documentオブジェクトに要素オブジェクト(<head><div>などの要素)やテキストノード(ブラウザ画面上に配置して表示できる文字列、改行、空白など)が追加されていきます。
  4. この時script要素があるとそのコードをパースし、エラーがなければそこでコードを同期実行します。
    つまりJavaScriptが実行されるまでhtmlのパースは一時停止します。
  5. htmlの中身がすべてパースされてDOMツリーの構築が完了するとdocument.readyStateプロパティ値は「interactive」になります。
  6. ブラウザはDocumentオブジェクトに対してDOMツリーの構築完了を告げる「DOMContentLoaded」イベントを発生させます。
  7. img要素などの外部リソース(サブリソース)を読み込みます。
  8. すべての読み込みが完了した時点でdocument.readyStateプロパティ値は「complate」になります。
  9. 最後にブラウザはWindowオブジェクトに対してloadイベントを発生させます。
  10. ここからユーザー定義イベントなど様々なイベントを受けつけて、イベントが発生するとイベントハンドラ非同期で実行されます。

これを軽く読んだ上で、

Loadについては、DOMから、画像まで読み込んでから実行されます。→全てが読み込まれてからWindowオブジェクトに対してLoadイベントが発火する。
DOMContentLoadedについては、DOMが読み込まれてから実行されます。

JavaScriptでDOMを操作する方法【初心者向け】

もりけん塾
もりけん先生ブログ

JavaScript~クイズゲーム2~

JavaScriptのクイズゲームを作ってます。
今回は、以前の話の
3、コードの解説
4、わからなかったところ、調べたところ

まず、コードです

3、コードの解説
最初は
Fisher-Yates アルゴリズムについてです
これは、配列の順番をランダムに変更させる関数です。
理論上もっとも高速で、確率が偏らないものみたいです

次にアクションから順に説明していきます。
・クイズスタートボタンをクリックしたら、ゲームが始まります(198行目)

・randomNotInclude()が読み込まれ、その中身は

function randomNotInclude() {
for (let k = min; k <= max; k++) {
while (true) {
let tmp = intRandom(min, max);
if (!randoms.includes(tmp)) {
randoms.push(tmp);
break;
}
}
console.log(randoms);
}
}
となっています。
この関数は、ランダム数字を表示する際に、重複しないような関数です。
ランダムに表示したとき、数字が重複しないように変数minで最小範囲、変数maxで最大範囲を決めています。
その後、for文でminがmaxより大きくなるまでの間、
さらに、

while (true) {
let tmp = intRandom(min, max);
if (!randoms.includes(tmp)) {
randoms.push(tmp);
break;
}
}
while文で、
trueの間、intRandom(min,max)関数を実行し、変数tmpに代入しています。
もし、配列変数randomsにtmpと同じ文字が入れば、randoms.push(tmp)で配列から同じ数字を削除して、while文を抜けます。

関数intRamdom(min,max)についてですが
min以上max以下の整数値の乱数を返します。

この段階で、配列randomsには、重複しないmin以上max以下の乱数が格納されています。

・quizStart()の中身は

function quizStart() {
console.log(“正解” + molecule);
console.log(“問題の数” + denominator);
counter();
random = randoms[count];
questionScreen.textContent=question[random];
console.log(random);
console.log(question[random]);
screenWrite(random);
}
となっています
クイズスタートが読み込まれると
counter()が読み込まれます

・counter()の中身としては
counter()が読み込まれるたびに、count変数を+1しています。
一旦if文の解説は後回しにします。(後半で)

この1ずつ増やしていったcount変数を重複していないrandom数字が格納されている配列の一つずつを呼び出すのに使用します。
random = randoms[count]

これでquestionScreen.textContent = question[random]で
問題をランダムに表示することができるようになりました。

・screenWrite(random)ですが変数randomの値を引数として使い
関数の中は、switch文を使用してます。
簡単に解説すると
先ほどのrandom数字を問題の配列questionと結び付けることで、randomが0のときはquestion[0]より
問題文は “現在の内閣総理大臣は?”,となります。
randomが0のときは、switch文のnumにも0が入っているので、
case 0、つまり questionArray = president.shuffle();
が読み込まれます。
配列presidentは問題文の “現在の内閣総理大臣は?”,の答えなので、それをshuffle関数をつかって、回答をバラバラにして、ラジオボタンに表示しています。
これをすることで、毎回同じ、問題の順番で表示されないということです。

・次に、次の問題にをクリックした時のことですが…
基本的には、コードに書いてある通りです。笑

ラジオボタンをクリックした時の値が、else if文の中身と一致していれば、変数molecule,denominatorを+1していきます。
一致していなければ、denominatorの+1をして、変数countが+1されていき、変数maxを超えたら、ゲームを終了し(”textdeleat()”)、結果を表示します(”result()”)

4、調べたところ
inclueds():特定の要素が配列に含まれているかどうかを true または false で返します。与えられた要素が見つかるかどうかを計算するために、 SameValueZero (ゼロの同値) アルゴリズムを使用します。
リファレンス:MDN

以上です

もりけん塾
もりけん先生ブログ

JavaScript~クイズゲーム~

JavaScriptを本気で勉強し始めてから、論理的に筋道立てて考えられるようになってきたような感じがするのは気のせいかな?

作品のほうも、クイズゲームができたので、少しずつ、スライドショーや、ドロワーメニュー、検索ボックス、※ページネンションを作っていきたいと思います。

ページネーションとは、長くなってしまった文章を複数のページに分割して、情報を読み取りやすくするナビゲーションのことを指します。

今日は、クイズゲームを作成してみました。

まずは、作品から…

1、クイズゲームをどう考えて作ったのか
2、全体的な流れ
3、コードの解説
4、わからなかったところ、調べたところ

で、進めていこうと思います。

1、クイズゲームをどう考えて作ったのか
・クリックするとゲームが開始される
・問題を表示する
・ラジオボタンを用い、回答を提示する
・次へのボタンをクリックすると、次の問題へ
・次へのボタンを押した時に、問題があっていれば、点数をいれる
・問題を終えたら、問題の結果を表示するようにする

作るにあたってこう考えました。

2、全体的な流れ
1、と重複するかもしれませんが
・ゲームスタートボタンをクリックしたらゲームスタート
・問題が表示されると同時にラジオボタンと3択の回答問題が表示される。
・ラジオボタンは何もチェックされていない状態からスタート
・ラジオボタンにチェックがなかった場合は、アラートで、’選択して下さい’を表示させる
・ラジオボタンにチェックがあれば、得点1を与える
・問題が終了したら、得点を計算して表示させる

これが大まかな流れです

今日は、一旦ここまでにします。
次回、コードの解説とわからなかったところを記事にしていきます。

以上です。

もりけん塾
もりけん先生ブログ

React~render( )について~

renderには2種類のrenderメソッドがあります。

ReactDOM.render()はReactエレメントをドキュメント(生成されるHTML等の文書)にレンダリングする役割です。
Reactコンポーネントのクラスで呼び出されているrenderでは、JSXなどで定義されたReactエレメントを返す処理を行っています。

レンダリング(コードから、画像や動画、文字を生成すること)が目的のメソッドなので、その他の処理を持たせないようにすることが大事!!

・render()で返すコンポーネントは、単一の親でなければならない。

renderメソッドで返すのは単一の親のコンポーネントであり、複数の親のコンポーネントを返すことはできません。
必ず1つの親になるように包みましょう。

// エラーになる
render(){
  return(
    <div>aaa</div>
    <div>bbb</div>
  );
}

// 正常
render(){
  return(
    <div>
      <div>aaa</div>
      <div>bbb</div>
    </div>
  );
}

・renderで空を返す
子コンポーネントで親から渡されたデータによって空のコンポーネントを返したい場合があります。
そんな時は、空のHTML要素を使わなくてもnullかfalseで返せます。(ただし、undefinedは使えません)

など色々なやり方?があるようです。

参考文献:https://qiita.com/endam/items/1bde821c4b29f9b663da

https://mabui.org/react-render-description/

以上です。

もりけん塾
もりけん先生ブログ

React~useStateとは~

useStateの意味がよくわからなかったので、記事にします。

useStateとは、クラスコンポーネントを書かずに関数コンポーネントでstateとほぼ同じ機能ができる機能のようです。

stateの意味の前に、
Reactコンポーネントがデータを受け取ったり、ハンドリング(データを捕まえたり)、表示するための主要な方法として、StateとPropsがあります。

1、State:そのコンポーネントが持っている状態
2、Props:親コンポーネントから渡されたプロパティ

1、State(状態)
Stateは可変のデータであること。仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画するための基本的な方法

2、Props(プロパティ)
Propsは、一般的に、親コンポーネントから子コンポーネントに渡される値。

StateとPropsの使い分け
コンポーネントは必要に応じて内部のStateを自由に使用できますが、いい意味ではUI体験のために、直接外部のStateに接続する場合にはPropsで受け取るべきであるとのこと

参考文献:https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50

では、本題のuseStateについて
useStateとは、基本のフックである。
基本のフック(Hook)とは、React 16.8で追加された新機能である。StateなどのReact機能を、クラスを書かずに使えるようになった。

useStateの初期値は、なんでも良い!!
0でも1でも、boolean系、文字列なんでもOK!!

※ただし、オブジェクトはだめ!!
例:

const [test, setTest] = useState({
   test1: 1,
   test2: 2
 });

const countUp = () => {
    console.log("countUp-test", test);
    setTest({ test1: 3 });
  };

  return (
    <div className="App">
      <button className="buttonView" onClick={countUp}>{`ボタン`}</button>
    </div>
  );

testオブジェクトのtest1の値を更新しようとするとそのプロパティだけ更新されますが、他が消えてしまう!!

もし、React Hookでオブジェクトを管理するならuseReducerで管理する←今はよくわかりません。

また、Reactを勉強してわかり次第記事にします。

以上です。

もりけん塾
もりけん先生ブログ