【OSS Gate大阪ミートアップ for React】ほぼReact未経験者の大学生が、「こんにちは世界」をやってきた話。勉強内容編
Reactほぼ未経験者のフーム(@F___u___u___m)です。
これの続きです。
前回の記事の通り
「実際にReactを触りたいな〜」と思い
OSS Gate大阪ミートアップ for Reactに参加いたしました。
しかし、チュートリアルで挫折したので
その理由を突き止めるべく、やり方を聞きまくっていました。
本日は
OSS Gateで教えていただいた範囲を
記事にします。
チュートリアルの概要
公式で出されているのは全て英語です。
ここでGoogle翻訳で訳せばいいじゃん！となるわけですが
チュートリアル含め、プログラミングの技術に関しては
翻訳では表しきれない微妙なニュアンスが混じっていたりするらしいです。
例えば本文中にあるlinesやrunは
lines⇨プログラミングコード
run⇨プログラミングが作動
というふうに翻訳します。
逆にそのようなニュアンスがわかっている方は
Google翻訳のみで、ある程度はわかると思います。
ちなみに、チュートリアルでは
チック・タック・トー・ゲーム(3目並べゲーム)を作ります。
しかし、OSS Gateは2時間ぐらいしかいなかったので
(作業時間は実質1時間〜1時間半ぐらいかも)
代わりに「Hello!World!」を表示させました。
Hello,World!の表示に必要なこと
better-than-i-was-yesterday.com
個人的にこのサイトの日本語訳がわかりやすいので
こちらから引用します。
前回でも言っていたように、ここまではできました。
しかし、私の場合は
次の記事を読んで新しいプロジェクトを作成してください。
となっていたため、「どこ」にプロジェクトを書けばいいのか
分からなくなってしまいました。
そこで、その場所をお聞きしたら
書くのは、使用しているエディターとのことでした。
すごく簡単なことでした。
そして私は、Atomで書きました。
その後は
srcというファイルの中にあるものを消去します。
↓
index.cssとindex.jsというファイルをsrcの中に入れます。
↓
index.jsに下記のコードを入れます。
import React from 'react';
import ReactDOM from 'react-dom';*1
import './index.css'; *2
↓
ターミナルでnpm start*3と打つと
「Starting the development server...」と出てきて
こんな状態に。
↓
http://localhost:3000/を検索すれば
なにもないwebページが登場します。
ちなみにそれが
こんにちは世界を表示するページとなっています。
↓
この後で、文字や出力の土台を記述するindex.jsに
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';ReactDOM.render(
<div>
<p class="example1">Hello, world!</p>
<p class="example2">Hello, world!</p>
</div>,
document.getElementById('root')
);
色や文字の大きさ等、index.jsで書いた文字を
レイアウトするindex.cssに
p.example1 { color: red; }
p.example2 { color: blue;}
と記述すれば.....
赤文字と青文字で
「Hello,world!(こんにちは世界)」となります。
Reactの開発をして、驚いたこと。
先ほど、index.jsに書いたコードである
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';ReactDOM.render(
<div>
<p class="example1">Hello, world!</p>
<p class="example2">Hello, world!</p>
</div>,
document.getElementById('root')
);
下から3行目に「,(以下カンマ)」が付いています。
このカンマには意味があって
この後から引数が変更になりますよ〜というサインです。
ちなみに引数とは、下記のような意味です。
関数に何か処理を依頼する際、「このデータを使って処理をしてほしい」ということがあります。
この時関数へ受け渡す値を「引数」といいます。
例えば「料理」という関数に「材料」という引数を渡して料理をしてもらうイメージです。
それをカンマ1つで出来るんだなということに
驚きしか感じませんでした。
まとめ
今回の勉強会で「基礎の基礎」はわかりましたが
これから開発をしていく上でスタート地点にも立っていないので
書籍を読んだりして、知識を深めたいと思いました。
Reactの書籍は少しずつ出ているらしいので
また機会があれば読みたいです。
