Posts

前回、reactのファイルを検分したので、今回は、適当に触ってみる。 それじゃ、適当に触ってみる App.js編 まず、前回インストール時の時から依存ファイルをクリーニングした。 結果、非常にわかりやすくなった。 ざっと見た感じ、HTML部分の特別な違いは、class が classNameになること…くらい？ import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <p>HTML部分の特別な違いは、class が classNameになること...くらいかしら</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a> </header> </div> ); } export default App; 上記コードで保存すると、 のように表示される。 ここまでは特別に難しくない。 App.css 編 次に、App.js の先頭に書かれている、 import './App.css'; を見ていく。 こちらも特別難しいことはない。 普通にcssを読みこんでいるだけなので、 color: white; → color: red; にすればテストの色が変更される、 この画像通りに。 特別難しいことはないが、 @media (prefers-reduced-motion: no-preference) {} font-size: calc(10px + 2vmin); とか個人的に知らない使い方があったので、勉強になる気がする。 てか、人のコードを見るのは勉強になる。 参考：意外と知らない？メディアクエリを使ってみよう。 参考：【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 index.js 編 最後に、前述した App....

前回にreactの環境構築をしたので、今回はインストールしたファイルを細かく見ていくことにする。 react app のファイル構成 最初にインストールした時点で存在しているフォルダは下記一覧。 |--node_modules | |--(抜粋) |--public | |--favicon.ico | |--index.html | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css | |--App.js | |--App.test.js | |--index.css | |--index.js | |--logo.svg | |--reportWebVitals.js | |--setupTests.js |--.gitignore |--package.json |--README.md |--yarn.lock node_modulesの中身は多すぎるので、抜粋した。 どうやらこの中でも必要じゃないファイルがいくつかあるらしいので、残しておくべきファイルを整理する。 必要フォルダ構成 |--node_modules // 必要 | |--(抜粋) |--public | |--favicon.ico | |--index.html // 必要 | |--logo192.png | |--logo512.png | |--manifest.json | |--robots.txt |--README.md |--src | |--App.css // 必要 | |--App....

treeコマンド treeコマンドとは、フォルダ構成とかを綺麗に表示してくれるもの。 実際に吐き出されるソースの見本は下記記事を参照。 インストールしたreact のファイルを検分する 使い方は簡単で、コマンドを開き、 cd 表示したいフォルダ tree で、きれいに表示される。 ちなみに、ファイル名まで表示したい場合は、 tree /f で、実行する。 bash: tree: command not found Windowsのコマンドなので（？）、vsCode 上で実行すると bash: tree: command not found というエラーができる。 そういう時はコマンドに行けばいいのだが、どうしてもvsCodeでやりたい時は下記コマンドで実行可能となる。 pwd;find . | sort | sed '1d;s/^\.//;s/\/\([^/]*\)$/|--\1/;s/\/[^/|]*/| /g' 参考：Windowsファイルツリー構造の表示とテキスト保存 参考：tree コマンドが無い環境で tree コマンドを実現

react をインストールする 参考：Create React App npx create-react-app my-app-name 上記のコマンドで react が自動でインストールされる。 ※そんなことしないと思うが、「my-app-name」を「react」にすると怒られ、インストールできないので注意。私は何も考えずにそうして、無事に怒られた。 cd my-app-name 次にインストールしたディレクトリに移動する。 npm start で、ローカルホスト（http://localhost:3000/）が開かれる。 これだけで、reactのアプリが起動する。 起動だけを考えるとvue より楽かもしれない、vueはいろいろと選択する必要があるので。 まずはソースを覗き見る この時点で表示されているのは App.js のようで、 import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Edit <code>src/App.js</code> and save to reload.</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a> </header> </div> ); } export default App; 該当ソースがこんな感じで、Javascriptを使用してhtmlを吐き出している？ 正直、ぱっと見だとvue のtemplate構文のほうが見やすい気がする。 まあ、少しづつ、慣れていく。

おっかなびっくりアドセンス申請 アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した 先日お伝えした通り、本ブログもアドセンスに申請を出した。 アドセンスの申請はなかなかハードルが高く、落ちるか、受かるかわからない。 そこで、どのような状況で審査に出し、どういった経緯で、どういう結果になったか記しておく。 申し込んだときの状況は？ 実際に申し込み時の状況を記載しておく。 サイト開設：2021年11/23（土） 申請日：2021年12/04（土） 申請時の記事数：11記事 アドセンスに受かる必須条件 ちなみにアドセンス申請条件として下記が言われている。 独自ドメインの利用が必須 総記事数は最低でも10本以上 １記事あたりの文字数は、1000文字以上 1日に100PV程度が必要 実際は定かじゃないが、多くの記事で言及されているので、あながち間違いじゃないと思われる。 本ブログの条件通過具合 本ブログの状況を上記条件と照らし合わせてみる。 独自ドメインの利用が必須 → ok（エックスサーバーの無料キャンペーンで取得済） 総記事数は最低でも10本以上 → ok（11記事） １記事あたりの文字数は、1000文字以上 → ？（9/11で1000文字越え、平均：1649文字） 1日に100PV程度が必要 → ok（平均：122.5pv） 軒並み基準は超えていると思われる。 １点、文字数で超えていない記事もあるが平均で見ると余裕で超えている。 さらに記事に関しては最大3682文字の記事まである。 JavaScriptを使用してWordPressの投稿に目次を挿入する ただ上記はコードも含まれているので、純粋な文字量で言えば、 転職で失敗しないために気を付けるポイントまとめ 上記記事が2321文字で最多、かつ実体験を通しての記事なので、それなりにユーザーのニーズに合っているだろう。 とはいえ不安は拭えない ということで、基準はクリアしているのだが、不安な点もある。 心配なのがGoogleのクローラーがまだ本ブログに未訪問なこと。 サイト開設から時間があまりたっていないこと。 本ブログがサブドメインで運用されていること。 の３点があげられる。 上記の悩みは他記事でも書かせていただいた。 助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱 アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した さあ、果たして合格するか、否か。 随時更新していく所存である。 12月11日（土曜日）１週間経過 音沙汰がない。 どうしたことだろうか。 登録時のメールには、 チェックが完了すると、アカウント有効化の状況を記載したメールが届きます。通常、審査は数日で終了しますが、2 週間ほどかかる場合もあります。 と書いてある。 つまり、数日で終わらない場合、何らかの問題がある可能性がある？ まだインデックスも来ないし、それが影響しているのだろうか？ 助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱 12月12日無事にインデックスされたので、上記記事にその過程を付け加えた。 つまり、以降の経過はインデックスは関係ないと思われる。 12月18日（土曜日）2週間経過 何の反応もない。 インデックスだって、それなりにされてきた。 が、連絡がこない。 流石におかしいということで、お問い合わせフォームから連絡をしてみた。...