エンジニア採用担当がプログラミング頑張る話【43日目/2ヶ月間】

こんにちは、@hiroki_maekawaです。

昨日に引き続き、動画を参考にしながらReactを使ってフロントエンド開発の勉強をしていきたいと思います。

参考にしている動画はこちら。

昨日はGithubに公開されているテンプレからHTML、CSS、画像の反映をしました。

1. コンポーネントとして別ファイルに切り離す

テンプレートのある部分（今回はPortfolioの部分）を他で使いたいと思った時に切り離すことができる便利な方法を紹介していたため、その手順を備忘録としてメモしていきたいと思います。

まず、src下にcomponents/Portfolio.jsx を作成して、App.js内のPortfolioの部分のコードを切り取ってきて→貼り付けます。

その後、Portfolio.jsxとApp.jsファイル内の全てのclassをclassNameに変更します。（React.jsのJSXで定義する場合、classの代わりにclassNameと指定する必要があるそうです。）方法はclassを選択→command＋d→classNameに変更。

2. コンポーネントを別ファイルからimportする

import先のファイル（今回の場合App.js）に、import Portfolio from './components/Portfolio'と打ち、コンポーネントを入れたい場所に<Portfolio></Portfolio>と打てば、反映されます。

3. 自社用のホームページを作ってみる

Bootstrapを参考に、試しに自社用のホームページを作ってみることにしました。

3-1. 文字の大きさ、フォントを変更する

色々いじってみたことで、基本的には「（今回だとApp.jsファイルの）HTMLを確認→もし文字の大きさや書体を変更したい場合はClassを確認→Classの内容をCSSファイルで確認→CSSファイルの中身を変更→反映を確認」の繰り返しでカスタマイズできてしまうことが分かりました。

3-2. レスポンシブ対応する

CSSファイルに、大きい画面になった時（@mediaで管理されてました）と小さい画面になった時で別の表示になるような設定がされていたので、それぞれ変更しました。

3-3. 自分の画像を反映させる

自分の画像を反映させるところでつまりましたが、「Githubに反映させたい画像を公開→パスを取得→src=""にパスを記載」でいけました！

3-4. Font Awesomeのアイコンを反映させる

また、Font Awesomeはアカウント登録を行わなければならなかったらしく、「無料でアカウント登録→指定されたURLをHTMLファイル（今回の場合index.html）に貼り付け」で反映できました。

Get Font Awesome Free | Font Awesome

今日できるようになったこと

・文字の大きさ、フォント変更
・レスポンシブ対応
・自分の画像をブラウザに反映
・Font Awesomeのアイコン使用

さいごに

0から書いていないのでコーディングしてるというよりはパズルをしている感覚ですが、（クオリティーは置いておいて笑）何とかホームページを作ることができそうです！

それではまた！