初心者による初心者のためのGatsbyJS覚書2 (ページ作成編）

8447 ワード
gatsby JSX React Netlify JSX テキストリンク

この記事について

この記事はGatsbyJS初心者の新卒２年目が作成しています。
参考資料として書籍を使用していますが、筆者がビギナークラスのため読んでいて「？」となる部分や間違っている箇所もあるかと思います。
参考までに、そして間違えている箇所がありましたらご連絡いただけると嬉しいです。

Chapter1：ページの作成の備忘録メモ

知っている方からすると「当たり前だろ」となるかもですが、、、
個人的に「なるほど…」「覚えておこう！」となった部分だけ記載します。

JSXのルールについて

HTMLコードはラップする

export default () => <div> <h1>挨拶</h1> <p>こんにちは</p> <footer>Copyright 2021</footer> </div>

複数行になるときはHTMLを括弧内に入れる

export default () => (
<div>
 <h1>挨拶</h1>
 <p>こんにちは</p>
 <footer>Copyright 2021</footer>
</div>
)

classはclassNameと書く

export default () => (
<div className="contents"> //classNameと記載
 <h1>挨拶</h1>
 <p>こんにちは</p>
 <footer>Copyright 2021</footer>
</div>
)

style属性の値は｛｛｝｝に書く

export default () => (
<div className="contents"> 
  <h1 style={{ color: "red", fontWeight: "bold"}}>挨拶</h1>
  <p>こんにちは</p>
  <footer>Copyright 2021</footer>
</div>
)

装飾目的のaltについて

HTMLからJSXへの変換ツールなどを利用すると、altの表示が<img alt/>となっている場合があるが、ESLintErrorが発生するので<img alt="" />と書き換える

altの変換も良い感じに仕上げてくれる変換ツールはこちら

トップページ用に画像を追加したときのエラーについて

static配下にimagesフォルダを作成して画像を追加し、gatsby developを実行すると下記のエラーがいっぱい表示された。。。

watchpack error (watcher): error: emfile: too many open files, watch

こんなの書いてないよ・・・と項垂れつつ調べると自分のMacの設定されているファイルの上限の問題らしい。解決方法はこちら。

ファイルの上限を確認

$ launchctl limit

maxfilesの上限が足りてないのが原因らしい。

設定ファイルを作成する

$sudo vi /Library/LaunchDaemons/limit.maxfiles.plist

初期ではファイルはないはずなので新規作成となるはずなので
設定内容を追加を追加する。

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">  
  <dict>
    <key>Label</key>
    <string>limit.maxfiles</string>
    <key>ProgramArguments</key>
    <array>
      <string>launchctl</string>
      <string>limit</string>
      <string>maxfiles</string>
      <string>524288</string>
      <string>524288</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
    <key>ServiceIPC</key>
    <false/>
  </dict>
</plist>

plistファイルを読み込み

$ sudo launchctl load -w /Library/LaunchDaemons/limit.maxfiles.plist

もう一回設定値を確認して増えていればOK

$ launchctl limit

今回はここまで。
BuildしてNetlifyにデプロイまですると見た目はサイトらしくなりました。(途中経過キャプチャ)

詳しいgatsbyのことは次回以降から書いて行く予定です。