きんにくちょっとできる

筋肉とRubyと雑記

JSXを理解する

勉強メモ React

週明けからReactを業務でさわることになったので、急遽完全に理解することに！

まず、JSXについて！


Q. JSXってなんの略や？

IT用語は、何の略か知ればそれがなんなのか理解できるってばっちゃが言ってた👵🏻

JSXは、「Javascript XML」の略で、JavaScriptの構文の拡張です。

ほう🤔
つまり、JSでもHTMLみたいに構造化して見た目を記述できるってことか！！！

JSXの例

さっそくJSXってどんなのか見てみる。

const element = (
  <strong className="muscle">
    鈴木 雅様！！！！
  </strong>
);

( ´-` ).｡oO (セマンティックなHTMLが書けた💪)

JSX内でJSの式を使う

中括弧に囲むと、あらゆるJavascriptの式を使えます。
'macho' + '29'や、 buildMuscle(protein)など！

const cheering = 'ハムケツ切れてる！！！！！！';
const element = (
  <strong className="muscle">
    鈴木 雅様！！！！{cheering}
  </strong>
);

JSXはJSに変換される

JSのファイルに書いてるんだから、このままじゃ実行できないよね。
公式ドキュメントにもこう書いてる。

JSX とは、つまるところ React.createElement(component, props, ...children) の糖衣構文にすぎません。

JSXがどのようにJSのコードにコンパイルされるか、オンラインBabelコンパイラで試してみる。

const cheering = 'ハムケツ切れてる！！！！！！';
const element = (
  <strong className="muscle">
    鈴木 雅様！！！！{cheering}
  </strong>
);

↓ Babelがコンパイル

const cheering = "ハムケツ切れてる！！！！！！";
const element = React.createElement(
  "strong",
  {
    className: "muscle"
  },
  "鈴木 雅様！！！！",
  cheering
);

↓ React.createElement()が以下のオブジェクトを作成

const element = {
  type: 'strong',
  key: null,
  ref: null,
  props: {
    className: 'muscle',
    children: ["鈴木 雅様！！！！", "ハムケツ切れてる！！！！！！"]
  }
};

このオブジェクトはReact要素と呼ばれる。 React要素をReactDOM.render()に渡すことで、ReactはDOMをレンダリングする。

const cheering = 'ハムケツ切れてる！！！！！！';
const element = (
  <strong className="muscle">
    鈴木 雅様！！！！{cheering}
  </strong>
);
ReactDOM.render(element, document.getElementById('root'));

JSXでは自分で定義したコンポーネントのReact要素も作成できる

例

const element = <Muscle />

JSXタグの先頭が、 大文字で始まる型 → 自分で定義したコンポーネント 小文字で始まる型 → <div>や<span>のような組み込みのコンポーネント

組み込みのコンポーネントの場合、React要素の typeは、 'div'や'span'などの文字列になるが、 自分で定義したコンポーネント場合、参照が入る。 ↓ React要素

const element = {
  type: class Muscle,
  key: null,
  ref: null,
  props: {}
};



細かいことは後で回収するので、いったんここまで！

エンジニア人生に迷走したので筋肉で整理してみた

まえがき

いつのまにかエンジニアを始めて1年が過ぎ、筋トレ始めて2年が過ぎました。

筋肉は順調に成長しています💪💪💪💪💪💪

いまは今年5月3日㈰の東京オープンボディビル選手権への出場に向け、減量に励んでいて順風満帆🙆🏾‍♂️


では、

エンジニアとしてはどうか？

正直よくわからない。というのが本音。

1年前より少しは成長はしている気はする。
が、 わからないことばかり。迷走まっする。



わからないものはわからない。現状を筋肉で分析💪

わからないので筋肉で考えよう！
エンジニアとしての現状を筋肉で訳していけば何か見えてくるはず！！！！！！！！！

筋肉で分析スタート💪

他のエンジニアと情報共有など交流をあまりしなかった。
💪筋肉訳💪
他のボディビルダーのトレーニングを参考にしたり、意見を聞いたり、相談したりしなかった🙅‍♂️  
💪筋肉ならどうするか💪
様々な経験のもと得た知見はかなり貴重🙏  
色んな意見を取り入れて、試してみて、  
自分に合ったものを取り入れ、自分用に昇華させていく🚀

→ 色んな人と交流して知見を交換して取り入れよう！


はてブや技術書など情報のキャッチアップが十分ではない。 理解が足りずタスク消化を優先することが多い。
💪筋肉訳💪
月間ボディビルディング、IRON MANなどの筋トレ雑誌、その他論文などを読まなかった🙅‍♂️  
💪筋肉ならどうするか💪
基礎的な知識や、様々な実例をインプットすることは大切！  
基礎的な知識は、筋肉を自分で考える土台になる。  
知識がなければ自分で考えられず鵜呑みするしかない😱  
また、経験から得た知見ほど有用なものはない🙏
自分の状況に合うなら取り入れるべき！

→ しっかり理解してインプット量を増やそう！


業務時間以外ではあまり開発しなかった。
💪筋肉訳💪
ジムで筋トレする以外の時間に  
マッスルコントロールの練習をしたり  
ポージングの練習をしたり  
ストレッチしたりしなかった🙅‍♂️  
💪筋肉ならどうするか💪
ジムで頑張るのは当然！みんなやってる！
ジムでの筋トレをどれだけ有意義なものにするかは、
ジム以外の時間にどれだけ筋肉のために行動できてるか！
実際にそれをやり始めてから身体は変わってきている💪

→ 業務時間以外の時間をどう使うかで、業務で得られるものも大きく変わる！エンジニアリングのために時間を使おう！


これまで学んだことを振り返っていない。
💪筋肉訳💪
ただ何も考えずに筋トレしてただけ🙅‍♂️  
💪筋肉ならどうするか💪
どんな筋トレ、食事、睡眠が、  筋肉にどう変化があったのか
振り返りPDCAを回していく方が、  
より筋肉の成長が早いしそこが楽しい💪  
筋肉と対話しよう💪

→ 細かく振り返ろう！


学んだことを誰かに話したり文字にしたりアウトプットしてない。
💪筋肉訳💪
大会に出ない🙅‍♂️  
人に筋肉を見せない🙅‍♂️  
大きくなってから出場すると言い訳する🙅‍♂️  
💪筋肉ならどうするか💪
大会に出て筋肉をアウトプットしてみて
はじめて見えてくる反省もあるし次のさらなる飛躍につながる🚀
大会で勝つ目標があるから、普段のトレーニングや生活も変わってくる！

→ アウトプット前提のほうがより良い結果になるし、アウトプットしないと見えてこないものもある


本当に自分に定着しているのかがわからない。
💪筋肉訳💪
身体がデカくなってるのは、  
筋肉がついたからなのか？  
脂肪がついたからなのか？ わからない🙅‍♂️  
💪筋肉ならどうするか💪
減量して極限まで脂肪を絞りきって、やっと今の自分の本当の身体が見えてくる。  
今を知ることで、これまでの反省や今後の挑戦が見えてくる💪
極限まで絞りきるにはやっぱり大会に出ると決めるのがベスト！

→ 本当のいまの実力を見よう！いま何を理解しているのか、なにができるのか、なにが出来ないのか知ろう！そのためにはアウトプット！


まとめ

いま現状を筋肉で例えると、

増量期と称し好きなだけ食べて、適度に筋トレしてきた。  


現状は筋肉がどれぐらいついてるかわからない、脂肪たっぷりのわがままぼでぃ🙈


絞りきればもしかしたら、ガリガリなのかもしれない。


だから絞りきるのはこわい。


けど絞りきって、いまの現状を知ることで結果よりかっこいい身体になれる！


また絞りきったあとは筋肉が付きやすいという話もある。


ガリガリでもいいからまずは絞りきるのを目標にする！

筋肉の経験から導き出されたやっていくことは、

エンジニアリングでも減量する。


新しいことに手を出す（増量する）のではなく、

いままでやってきたことをもう一度しっかり理解して整理してアウトプットする。


何も力が付いてないのかもしれない（ガリガリかもしれない）けど、

まずは現状を知る！次に繋がる！

いましっかり理解して整理してアウトプットすることは、今後の成長にも必ず繋がる！

ボディビルの大会までに、エンジニアリングも絞りきる！


  • 本当のいまの実力を知る！
  • そのために今まで足りなかったアウトプットを増やす
  • アウトプット前提で、ちゃんと理解してインプットする
  • すべては技術力向上（筋肥大）のため！細かく振り返る
  • 業務時間外の時間をもっとエンジニアリングに割くことで、業務時間内で得られるものもより増やす
  • 色んなエンジニアと交流して知見を交換して取り入れる


筋肉はすごい💪