shinoblog – Just another WordPress site

パーミッションとchmodのコマンドの意味を調べてみた。

夜分におそれいりますよ。信夫です。

さて前回の記事ではnpm installのエラーに対して何をすればよいかを調べてみました。

npm installでEACCESのエラーが出たのでアクセス権限を付与すれば良いのか調べてみた

chmodで権限を付与すればインストールできそうなことはわかったのよ。でもさ正直こっから具体的に何をすれば問題が解決するのかわかってない。だもんでとりあえずはググるところからだね。

とりあえずchmodではコマンドを使うみたいだからそのコマンドを知りたいのと、そのコマンドをどう使うかを知りたいから、それを調べてみよう。

chmodで付与できる権限は3種類

調べてみたところ、chmodで付与できる権限というのはファイルとディレクトリに対して、それぞれ3種類あるらしい。

	ファイル	ディレクトリ
r：読み込み	指定したファイルの内容を表示出来る	ファイル一覧を表示できる
w：書き込み	ファイルの上書きと削除	ディレクトリ内に新規ファイル作成可能（削除も）
x：実行	実行ファイルの実行(プログラム、CGIなど)	そのディレクトリに移動すること（カレントディレクトリにすること）ができる

今回は書き込みの権限が無いっていうエラーだった。ほんでたしか対象はディレクトリになっていた気がする。なのでディレクトリに対して書き込みの権限を付与することになるのかなと。おお、なんとなく理解が繋がった気がする。こういう時気持ちいいよね。

そして、それぞれの権限は数字で表すこともあるみたい。というかそっちを理解していないと訳わからなくなりそう。このあたりは後半で詳しく書いていきますが、一旦その数字というのは以下。

	記号	数字
読める	r	4
書ける	w	2
実行できる	x	1
何も出来ない	−	0

chmodで権限付与できるの対象者は４種類

そして権限を与えられる対象は４種類あるみたい。

chmodで権限付与できる４種類の対象者

u：ユーザー（所有者）
g：グループ
o：その他
a：すべて

うん。この段階ではまだわからないね。ユーザーとかはなんとなくイメージできるけど、も少し調べましょ。

とりあえず現在の権限の状況を調べてみる

ここまで調べた時点でふと「そいえば今の状況はどうなってるんだろう」と思いまして、今の権限の付与状況を確認してみることにしました。

どうやって調べよかなって思って、とりあえず関連性のありそうなキーワードで合せ技で調べてみようと思いました。今回は例えば「chmod　権限　状況」とかで。そしたら最高にわかりやすいQiita先生が出てきましたよ。

調べてみると「ls -l」っていうLinuxコマンドでわかるらしい。これはカレントディレクトリ内のファイルやディレクトリの情報を確認するコマンドらしいよ。カレントディレクトリ。今いるディレクトリのことだった気がする。

おっしゃ。とりあえずさっそくやってみよ。iterm2でコマンドをたたいてみる。

やっちゃった。「ls-l」じゃなくて本当は「ls -l」

こういうの、最初ビビるよね。「あれ、動かない」ってなるけど、冷静に自分が打ったコードを見るのは大切だね。ん？これはコード？コマンド？コマンドか。

では改めて正しいコマンドでやってみる。

ほーん。なるほどね

とりあえず何もわからないということがわかったな！今回も！

でも出てきた。これが今の権限の状況らしい。

なるほどなるほどーと思ってさらに調べてみると、ここで前回見た言葉がここでもまた出てきた。「パーミッション」である。

パーミッションとはファイルやディレクトリへの「アクセス権」のこと

パーミッションのことを調べてみたところ、各フォルダやファイルの権限情報のことをパーミッションというらしい。言葉の使い方としては「ファイルのパーミッションを見てみるか」とかって使われるんだって。

ここからは相当知ったかぶりも入りますけど、MacのOSはUNIXっていうOSをベースに作られているらしいんですよ。でそのUNIXのシステム自体は「1つのシステムを複数のユーザーで使うこと」が前提に作られているんだって。

そうなった時に自分以外の人が好き勝手にファイルをいじったりフォルダ変えたり出来ないようにするための仕組みが「パーミッション」なんだって。

それでその権限の種類がさっき書いた「r：読み込む、w：書き込む、x：実行する」の3つで、それを「u：ユーザー（所有者）、g：グループ、o：その他、a：すべて」に付与できるらしいよ。

今回権限を変えたいのは「node_modules」のフォルダ

前々回の記事でエラーになっていたのが「/usr/local/lib/node_modules」に書き込みの権限がないよってことでした。その時のエラーが以下ね。

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

その際の前々回の記事はこちら

create-react-appインストールのエラーの文章を全文ググってみた

なのでnode_modulesのフォルダに権限を与えれば良いんだよね。多分。

そしたらまずはこのnode_modulesの権限がどうなっているかを確認したほうが良さそう。ここでもう1回、自分のiterm2を見てみた。「ls -l」って打って出てきた上の画像の中にこんなのがあった。

drwxr-xr-x  88 shinobudaisuke  staff   2816  6 18 00:14 node_modules

おそらくこれが、node_modulesの権限の状態だよね。うん。

イマイチどころか頭から爪先までいっこもわからん。かろうじて、左端の文字列はおそらく権限の付与状態を記載しているのかなって想像できるくらい。なのでこれをもうちょっと調べてみます。

パーミッションの読み方

パーミッションの読み方を調べてみましたよ。まとめると「drwxr-xr-x」などの文字列は「ディレクトリかどうか」＋「自分の権限」＋「グループの権限」＋「他人の権限」が合計10文字で表現されているみたい。

わかりやすくまとめるとこうです。

ディレクトリ	自分			グループ			その他
ディレクトリ	読み	書き	実行	読み	書き	実行	読み	書き	実行
d	r	w	x	r	w	x	r	w	x

ちなみに、パーミッションの左端が「d」ではなく「−」だったら、それはファイルを表しているそうです。

さっきのnode_modulesのパーミッションをもう一度見てみると「drwxr-xr-x」と書かれているので、これは以下を表してました。

node_modulesのパーミッションからわかること

・node_modulesがディレクトリであること
・自分にはw、r、x、すべての権限がついてる。
・グループやその他のユーザーにはwの権限がない。

なるほどー確かに自分以外ではw（書き込み）の権限が無いんだね。

でも、そもそも自分以外（グループやその他）って誰のことを指しているんだろうね。今回のcreate−react−appをnpm instalしたいのって僕（自分）で、指示を出しているのも自分なんだけど、なんでダメなんだろうね。誰が指示を出そうと、ディレクトリ自体に権限が必要ってこと？じゃあそのディレクトリは「グループ」なのか「その他」なのか？

これはもうちょっと詳しく調べたいけど、先に進む方が懸命な気もする。

ほんで、さっきちらっと書いた「権限を数字で表現する」ということが、これから理解しておく必要がありそうです。なぜなら、権限を変更する時にはその数字で書かないといけない（っぽい）からです。

パーミッションの権限を数字で表す

さっきと同じ表ですが、パーミッションの権限を数字で表すとこうなっている。

	記号	数字
読める	r	4
書ける	w	2
実行できる	x	1
何も出来ない	−	0

で、パーミッションの内容を数字で表す時には権限の対象ごとに表現するらしい。なので「自分」「グループ」「その他」の3種類の数字になるんだけど、その時の権限の付与状況は、各権限の数字の足し算になるんだって。

ちょっとわかりづらいと思うのでまとめると例えば今のnode_modulesの権限の状況は「drwxr-xr-x」だから、それぞれ持ってる権限を数字にして、それを「自分」「グループ」「その他」ごとに足してみると・・・

ディレクトリ	自分			グループ			その他
ディレクトリ	読み	書き	実行	読み	書き	実行	読み	書き	実行
d	4	2	1	4	2	1	4	2	1

赤い文字は既に付与されている権限で、青い文字は付与されていない権限です。そうなると現在のnode_modulesのパーミッションは「755」ですね。

くわしく書くと「（4+2+1）、（4+1）、（4+1）」ということらしいです。

そして今回は書き込みの権限も付与するわけなので、node_modulesのパーミッションを777（読み、書き、実行のすべての権限を付与）する必要がありそうです。

おー、わかったような、わからないような。

さっきの、コマンドの指示出ししているのは自分なのに、なんでそのとおり動かないんだろうっていう疑問はあるけども。でもとりあえずは理解できた。

次回は実際にchmodでコマンドを打って、node_modulesのパーミッションを変更していきたいと思います。

npm installでEACCESのエラーが出たのでアクセス権限を付与すれば良いのか調べてみた

前回の記事では、npmでcreate-react-appをインストールしようとした時に出てらエラーを全行検索してみました。この記事ね

create-react-appインストールのエラーの文章を全文ググってみた

そしたら、なんとなくファイルとかフォルダへのアクセス権限が無いことが原因だということがわかったので、今回の記事では、その対処法をまたググってみたいと思います。

そもそもそれで良いかの判断もついてないからさ。真っ暗な洞窟の中で、現在地だけがわかった感がすごいけどね。どうしてそこにいるのかも、どこに向かうべきなのかもわからないけど、一旦ググろう。そして答えらしきもの見つけたら、それをメンターに報告して答え合わせしよ。

というわけでまたググっていく。そしたら色々わからないけど解決のヒントになりそうな言葉が出てきたので、一旦羅列していこうと思うよ。

ググって発見！わからないけどヒントになりそうな言葉たち

・パーミッション
→前回の記事でもちょっと出てきてたけど、ついたてみたいなこと？ディレクトリとは違うの？？

・chmod
→チ、チョモド。もしくはチョモッド。

・sudo
→須藤。思い出した。大学の頃、4留したことを逆手に取って各学科の必修のレポートをテンプレ化して後輩(同級生)に販売して神格化されてた友人の名字が須藤だった。

この3つがポイントになりそうな感じかなと。ご無沙汰じゃんか須藤。

とりあえずそれぞれ調べてみると、パーミッションというのは想像通り、閲覧したり、書き込んだり、実行したりすることを制限するための「属性」のことを指すらしい。

詳しくはこの東京経済大学システム課の記事がとてもわかりやすかったです。

ほんで次にchmodだけど、これは「チェンジモード（change mode）」というコマンドらしい。まさにパーミッションなどの設定をするために使うコマンドなんだって。

chmodのコマンド一覧はこちら

そして最後に須藤（sudo）。

これもコマンドのことらしいね。くわしくはこの記事が参考になりました。見てみると、スーパーユーザや他のユーザの権限でコマンドを実行できるらしい。

てか、え、すごいね須藤。そんなことできちゃって良いの？セキュリティとかそういうのは大丈夫なの？神なの？てかこいつ本当に須藤なんじゃ？あっちでもこっちでも神。

思いがけず須藤でテンションが上がってしまったけども、でもこれでなんとなくわかってきた気がする。この記事にも書いてあるけど、chmodで権限を付与するか、sudoで越権行為？するかのどっちかで解消できる問題みたいですね。

どっちも詳しく調べてみるけど、どっちがいいんだろうか。今後のことも考えると、権限を与えてしまった方が良いように思う。誰に、なんの権限を、どう与えればよいのか。それははいまだに知らんけど。

と思って一旦sudoについて調べてみたら、やっぱりセキュリティとしてはよろしくないようです。こちらの記事に書かれてました。須藤・・・・

となるとやはりちゃんと権限を付与したほうが良さそうですね。そうしよう。

なので次回はchmodでアクセスする権限？書き込む権限？を付与していこうと思います。

create-react-appインストールのエラーの文章を全文ググってみた

やっほう。シノブです。

前回の記事ではnpmでcreate-react-appをインストールしようとしたんだけど、エラーがズラッと並んでたんですよ。こちらの記事ね。

【おっさん開発】npmでcreate-react-appをインストールしようとしたけどエラーになる

エラーを全文翻訳してみらた、フォルダに権限を付与するのかもっていう仮設が出たんです。でもまだよくわからん。どーしよって思ってたんですけど、その時にふと自分が日本国民の義務を果たしていないことに気づいたんです。

そう。

ググってない。

こんな便利な時代に生きていてなんでそんなこともしていないのかと。メンターついてくれてるからって怠けてんじゃねぇぞと。そんな自分にサービス開発者としての基本的人権なんぞあるものかと。

答えを先に知って咀嚼する方が早いのかもだけど、今の時期はこうやって検索することもゼロイチには絶対必要なはず。そして、こういうことを知りたいプログラミング初心者も絶対にいるはず！フロンティアになってこう。どんだけ周回遅れのフロンティアかしらんけども

というわけで、エラー全文ぐぐってみよ。全部で19行。

まずはこちら

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

これのまんまググってみると、いくつか該当しそうな記事が出てきました。

たとえばこちらの記事

これによると「npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules」っていうのは、「 /usr/local/lib/node_modulesへ書き込みをする権限が無いよ」っていうことらしい。

そ、そうなんだ。権限ね。誰がなぜ君にその権限を付与していないのかも、どうすれば権限を付与できるかもわからないけど、理由だけはわかったよ。ありがとうGoogle先生。

おっしゃ、次いこ

code EACCES

調べてみるとEACCESというエラーの意味が書かれていたよ。これもどうやらアクセス権限が無いことを示しているらしい。

そしてcodeっていうのは、エラーコードを示しているらしくて「エラーコードはEACCESだよ」っていうことっぽい。こちらの情報が詳しそうだよ。

このエラーコードが意味するものは、まずパス名かuser authorityに原因があるらしい。

そしてそれにアクセス権限が無いか、ログインしたIDで、該当操作に対する資源配付の使用権限がない、とのこと。意味はわからん。

そしてそれを解消するには、ファイルをパーミッションモードで確認するか、ログインしたIDの権限の確認を行い、必要であれば、使用権限をACLマネージャに登録する必要があるらしい。こちらも同様に意味はわからん。

ただここでもやはりアクセス権限の話が出てきた。そういうことっぽいね。

これが今回のエラーの画面なんですけどね、よく見るとiterm2上でもcodeの部分色違うし、1つの文章じゃないっぽいよね。てことは次のsyscall accessもそういう感じ？？

syscall access

これも調べてみたら、「syscall」と「access」は別のものを意味しているらしい。バラバラに調べてみたらsyscallはシステムコールの意味だとわかったよ。

システムコールっていうのは、OSがカーネルにアクセスしてタスクを実行する方法を指しているらしい。いっこも意味はわからん。

んで今回の場合だと「syscallはaccessだよ」っていう意味っぽい。でこのaccessっていうシステムコールはユーザーのファイルに対するアクセス権をチェックするっていう意味らしい。ここでも出てきたアクセス権。もはや疑いの余地のないくらいアクセス権限がないらしいね。

おっしゃ次だ

path /usr/local/lib/node_modules

これはもう1行目からの流れでわかった。というかさすがにこれはググっても回答のってなかったわ！

「アクセス権限が無いのはこのPATHですよ」っていう意味っぽいね。これはこれとして次いこ

errno -13

これはなんだろね。この流れで行くと「errno」の値として「13」なのかなとは思うんですけども。なんだろね。

調べてみたらこのQiitaの記事があったよ。

おーなるほど！システムコールや標準ライブラリで、エラー原因を教えてくれるのがこのerrnoの値らしいですよ。そして見てみると、数字のパターンは133まであるらしい。波動球より多い。ためしに34までの値の意味を載せておくよ。

#define EPERM            1      /* Operation not permitted */
#define ENOENT           2      /* No such file or directory */
#define ESRCH            3      /* No such process */
#define EINTR            4      /* Interrupted system call */
#define EIO              5      /* I/O error */
#define ENXIO            6      /* No such device or address */
#define E2BIG            7      /* Argument list too long */
#define ENOEXEC          8      /* Exec format error */
#define EBADF            9      /* Bad file number */
#define ECHILD          10      /* No child processes */
#define EAGAIN          11      /* Try again */
#define ENOMEM          12      /* Out of memory */
#define EACCES          13      /* Permission denied */
#define EFAULT          14      /* Bad address */
#define ENOTBLK         15      /* Block device required */
#define EBUSY           16      /* Device or resource busy */
#define EEXIST          17      /* File exists */
#define EXDEV           18      /* Cross-device link */
#define ENODEV          19      /* No such device */
#define ENOTDIR         20      /* Not a directory */
#define EISDIR          21      /* Is a directory */
#define EINVAL          22      /* Invalid argument */
#define ENFILE          23      /* File table overflow */
#define EMFILE          24      /* Too many open files */
#define ENOTTY          25      /* Not a typewriter */
#define ETXTBSY         26      /* Text file busy */
#define EFBIG           27      /* File too large */
#define ENOSPC          28      /* No space left on device */
#define ESPIPE          29      /* Illegal seek */
#define EROFS           30      /* Read-only file system */
#define EMLINK          31      /* Too many links */
#define EPIPE           32      /* Broken pipe */
#define EDOM            33      /* Math argument out of domain of func */
#define ERANGE          34      /* Math result not representable */

おーこれで見ると、13はdefine EACCES 13 /* Permission denied */って書いてある！やっぱりこれもアクセス権限が無いよっていうことを表しているっぽいね。

ほんで改めてエラーの画像を見てみるとさ

errno -13より下の行は、なんかおんなじこと書いてあるっぽいね？

ただ唯一違う単語が並んでるのが「permission denied」だね。なのでとりあえずこれもググる。

permission denied

これは直訳すると「アクセス拒否」らしい。

ただこれはこのキーワードでググるとしっかりと答えが書いてある記事がありました。こちらの記事。

この記事から引用させてもらうとこう。

linuxコマンドはプログラムを書く人とって切っても切り離せないものですよね。
そもそもLINUXは、サーバーでよく使われるOSですが、そのため１つのマシンへ複数のユーザーが同時にログインして操作することを前提として作られています。この際に、秘密のファイルを他のユーザーに見られてしまったり、誤って他のユーザのファイルを上書きしてしまうことを防ぐため、アクセス権限が必要でした。したがって一つ一つのファイルには、「誰に、どのような操作を許可するのか」という権限を規定する情報が設定されています。この情報のことを、パーミッションと呼びます。
https://qiita.com/takuyanin/items/18590600d077df707923

なるほど。そういえばMacOSはベースとなる部分がLINUXで動いているとメンターに聞いたことがあります。これが今回の答えなのだと思う。

If you beiveから先の部分は昨日の記事でも解説したけど、やはり言ってることは同じだったね。

ほんだら最後に1番下の2行を調べてみよかな

A complete log of this run can be found in:

これはそのまま翻訳してみると「この実行の完全なログは、次の場所にあります。」って書かれてた。どんな意味なのかをさらにググってみたけど、よくわからんかったよ。とりあえず、エラーの内容に直接関係のあることではなさそうだよね。

その下の行はエラーのログが「/Users/shinobudaisuke/.npm/_logs/2020-06-17T15_12_21_920Z-debug.log」だよって言ってるんだね。

結果：ググった結果、エラーの原因はなんとなくわかった

前回の記事の時点でわかっていた気がしないでもないけど！けど！

やはり特定のディレクトリかファイルかに、アクセスする権限がないってことだね。

でもこれ全文調べたことで、システムコールとかEACCESとかerrnoとかの言葉の存在と意味はなんとなくわかったし、やっぱググるの大切ね。

ほんだら次は、ここからどうやったらこの問題を解消できるかを調べていくぞー

【おっさん開発】npmでcreate-react-appをインストールしようとしたけどエラーになる

先日ついにMacBook Proが来た。

開発の師匠に教わりながら初期設定を進めた。

そしていよいよ開発に入るぞと。なったわけなんです。

その時に出たtodoがこちら。

1. ページフレームを作る
  a. header
  b. footer
2. SignUpページを作る
3. SignInページを作る

まぁその、やることは文字としてはわかる。それぞれね、作っていくんだっていうね。ページフレーム、うん作りたい。Sign Upページもね、作りたい。完全に同意。

でもね。ただなんていうんだろうな、そのね、
どこから何をすれば良いのかが全くわかりませんって日本語でなんていうんだっけな。あもう言えてるね？

おす。さっぱりわからんぞと。いっかい落ち着こ。

まずここまでやってきたこと、おさらいね。

この半年でやってきたこと

①ProgateでJS、Python、Reactのカリキュラムを終えてる（5億年前）
②ER図作った
③ユーザーストーリー作った
④XDでデザインのイメージも起こした
⑤MacBook買った
⑥Iterm2いれた
⑦oh-my-zashいれた
⑧WebStorm契約した
⑨githubアカウント作った
⑩git入れてローカルにボイラーテンプレートのクローン作成した
⑪homebrew入れた
⑫nodebrew入れた
⑬pyenv入れた
⑭ごにょごにょしてなんかPATHは繋がったっぽい
⑮emacs入れた
⑯Node.js入れた

順番がずれてるのもあるかもしれないけど、ざっとこんな感じ。それぞれの過程は録画してはいるけど、見ても本当によくわからん。ここまでいかに、言われたとおりにやってきただけかっていうことだと思うんだけど、今はそこは仕方ないのかなとも思ったり。

理解が追いつくのはもっともっと先で、今は体で覚えることが大切なんじゃないかなと。お前そのスタイルで30代も走るの？っていう気もしますけどね。でもやっぱり量が大切よね。特に今はさ。

というわけで改めて本題。ここからは実際に開発に入るとのことなんですが、さっきのtodoがわからなかったら、ReactとReduxのチュートリアルをこなしてねっていう指示がきました。これ。

電卓アプリで学ぶReact/Redux入門(実装編)

todoに手がつけられないと思ったので、一目散にチュートリアルにいきました。

その冒頭で出てきたのがcreate-react-appのインストールなんですが、これがインストールできない。

エラーがこんな感じで出てる

➜  ~ npm install -g create-react-app

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shinobudaisuke/.npm/_logs/2020-06-17T15_12_21_920Z-debug.log

おーよしよし。わかるぞ。なんのことかサッパリわからないということだけはしっかりわかる。

だもんで、師匠〜これなんです？って聞いてしまった。その時の師匠からの指示はこう

「エンジニアとして成長する最も大きな基礎が検索力です」

もうほんとに恥ずかしかった。仰るとおり。怠ってんじゃねーよと。いつのまにそんなことも自分で調べようとしない人間になったのか。そんな自分とは金輪際ご無沙汰しようそうしよう。

というわけで調べてみた。

どうもエラーの内容はちゃんと書かれているっぽい。エラーの文章から理由っぽいところを抜粋してみた。

The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

日本語に訳すとこう

操作はオペレーティングシステムによって拒否されました。
現在のユーザーとしてこのファイルに
アクセスする権限がない可能性があります。
これが権限の問題であると思われる場合は、
ファイルとそれに含まれるディレクトリの権限、
または実行してみます
root / Administratorとしてコマンドを再度実行します。
この実行の完全なログは、次の場所にあります。

なんか、ファイルにアクセスする権限がないっぽい？

師匠にエラーの内容を確認してみたところ「unix系のファイルシステムにはファイルやフォルダごとにアクセス権が設定されています」とのこと。

ということは、アクセス権限を付与すればよいのかなと。

そのあたりをもうちょっとググってみます。

【未経験者向け】Reactのstateをちょっと理解するための備忘録

おっしゃ、今回はReactのstateを勉強していきます。ProgateのJavaScriptのコースをやった直後にReactに入っております。そこで出てきたstateっていうものに関して、理解を深めるために備忘録的に記事にしていきます。

stateって「状態」を決めることで色んなことが出来るっぽい

イメージとしては文字通りゲームとかの「ステータス」の意味で考えると理解しやすいのかなって思いました。状態を定義して、その状態をいろんなものに変化させて、文章を表示したりとかデータを返したりするんだろうなと。

ポケモンだってステータスが毒になればダメージ食らうし、瀕死になったら戦えないし、そういうステータスを設定するために使うのがstateなのかな？

これがWEBサービスだったらどういう機能に使われているのかは、まだちょっとわからんけどね。ステータスによって動きが変わるような場面だから、ユーザーのアカウントのログイン状態を管理するのとかで使うのかな？

未ログイン状態ならログイン画面を出すし、ログイン状態ならマイページを表示する、みたいな出し分けがこのstateで出来るようになるのかも、と想像しちゃう。一旦仮置きでそうイメージしておこう。

stateを理解するためにJavaScriptのオブジェクトを振り返る

JavaScriptのオブジェクトの考え方をもう一度思い出しました。

オブジェクトというのはこういう感じの記述

const item = {name:"ピアノの粉末",price:300000};

console.log(item.price)

こう記述するとコンソールでは「300000」と出力される。

このオブジェクトのそれぞれの要素はこんな感じ

これを思い出した上で、stateの使い方をメモ書きしていきます。

Reactのstateの書き方　stateの定義

stateを使うためには、まずはstateそのものを定義するところからなんだって。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name:"ピアノの粉末"};
  }
・・・・・・・

これでまずはstateの定義が完成した、らしい。

stateはオブジェクトとして定義するもので、そのオブジェクトの中の値がstateの初期値になるとのこと。だから今のstateは「ピアノの粉末」になるね。

ちなみにthis君、ぼくは君がどっから来たの何者なのかわからないけど、これからよろしくね。

てか上のコードではthis君以外にも意味不明なのが2つ来てるよね。

constructor(props) {
super(props);

君らいきなり何よっていう。でもこれはもう、こういうものなんだってさ。stateを定義するときの定型文として覚えてしまって良いらしいよ。this君ともどもコンゴトモヨロシク。

こういうのもちゃんと理解したいなと思いつつ、1つ理解すると3つわからないことが増えるという藪蛇になりそうなので、一旦こいつらを理解することとはご無沙汰しようと思うよ。

で、こうやって定義したstateはthis.stateで取得することが出来るんだって。

例えば

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name:"ピアノの粉末"};
  }

console.log(this.state);
}

って書くと

{name:"ピアノの粉末"}

って出力されるんだって。で、さらに

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name:"ピアノの粉末"};
  }

console.log(this.state.name);
}

って書くとオブジェクトのnameの値を取得して

ピアノの粉末

と表示させることができると。

stateの変更

ここからはstateの変更の仕方を書いていきます。stateを変更するには「setState()」というメソッドを使っていくんだって。こう記述するらしい。

this.setState({プロパティ名: 変更する値})

この記述をすることで指定されたプロパティに対応するstateの値が変更される。stateの値が変更されることで、「this.state.name」で表示できる値も変更せることができる。ここでもthis君大活躍。君なしではだめらしい。

ちなみにReactでは、stateの値に直接別の値を代入するのはだめなんだって。例えば以下はどっちもだめなんだって。

this.state = {name:'ピアノの粉末'};

this.state = 'ピアノの粉末';

stateの値を変更する場合はこうよ

this.setState({name:'ヤマハ'});

たとえば

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'ヤマハ',price: 300000};
  }
  
  render() {
    return (
    	<div>
    	  <h1>{this.state.name}のピアノの粉末の値段は{this.state.price}です！！</h1>
    	  {/* onClickの処理に、stateを変更する処理を加えてください */}
        <button onClick={() => {this.setState({name:"ヤマハ",price:300000})}}>ヤマハ</button>
        
        {/* onClickの処理に、stateを変更する処理を加えてください */}
        <button onClick={() => {this.setState({name:"カワイ",price:250000})}}>カワイ</button>
        
      </div>
    );
  }
}

stateの変更をメソッド化する

メソッドをイベントの中で呼び出すことも出来る。その方法はこう

onClick={() => {this.メソッド名()}}

このthisっていうのが、同じファイル内でメソッドを指定する時にthisをつけるんだって！メソッド化した方がやっぱり記述少なくて済むし楽だよね。

ReactのonClickイベントの書き方

ReactではJavaScriptのアロー関数を使うことで「指定したタイミングで処理を実行させる」ことができるらしい。

これを「イベント」と言うらしく、例えばクリックした時に処理を実行するイベントのことを「onClickイベント」って言うらしい。

書き方としてはこう

イベント名={() => { 処理 }}

そしてこれはJSXの中でJSを使うことになるので、アロー関数の部分を{}で囲ってあげないといけない。これがちょっとややこく見えるよね。

例えばボタンがクリックされた時にテキストを表示させるのならこう

class App extends React.Component {
  render() {
    return (
    	<div>
    	  <h1>シティボーイズの好きなコントといえば・・・</h1>
        <button onClick={() => {console.log("原発コント")}}>原発コント</button>        
        <button onClick={() => {console.log("ははーんさん")}}>ははーんさん</button>
        <button onClick={() => {console.log("クレーマーに謝罪")}}>クレーマーに謝罪</button>        
        <button onClick={() => {console.log("廊下を走る人達")}}>廊下を走る人達</button>        
      </div>
    );
  }
}

中括弧を閉じるの忘れたりどっかいきそう。

ProgateのReactをはじめました。

いよいよReactなわけです。メンターのマッキーさんいわく、Reactとreduxが肝になるみたいなこと言ってたから、肝に入り始めるわけですな。

早速見てみると、ほうほう、まずはテキストをブラウザに表示させる記述をしてくんだって。Reactを使って文字をブラウザ上に表示させるにはrenderメソッド内のreturn内にテキストを記述すると表示されます、とのことでしたよ。

それがこう。

class App extends React.Component {
  render() {
    return (
        <p>やっほう！</p>
    );
  }
}

ちなみにこれはProgateのReactのレッスンの最初の方。『いろはの「ろ」』くらいの段階なんですけども、

JavaScriptのところでextendsはやったからね、雰囲気はわかってるはずよ！でも自信はないしこの説明書くために1回見直したよ！

多分「App」っていうclassを「React.Component」のclassを元に（継承して）作成したよっていうことなんだろうけど、それ以外はわかってないかんね！
どこのだれなのさReact.Componentってのはよ。

でも今はそれでよしとしてさ、先に進もうと。手を動かして暗記して、他のところの理解が進むと、後からこれも理解が追いつく感じなんだろうと思います。

というわけで先に進もうね。

ちなみにこれ、書き方自体はHTMLっぽいんですけど、このReact内で記述するこの文章のことをJSXと言うらしいです。

JSXはHTMLと同じような使い方ができる

見出しとして<h1>タグや<h2>タグを使うこともできるし、文章には<p>タグ、その他<div>タグなど、HTMLと同様のタグが使えるようになっているらしい。h2に比べたらh1の方が文字サイズがちゃんと大きくなったりもした。

でもJSXを記述する際にはreturn内には複数の要素があるとエラーを起してしまうんだって。例えば以下だとエラーになったよ。

class App extends React.Component {
  render() {
    return (
        <p>やっほう！</p>
        <p>やっほう！！</p>
        <p>やっほう！！！</p>
    );
  }
}

たしかに<p>タグが3つあるよね。これだとエラーになるから、これを解消するために<div>タグを使うんだってさ。<div>タグでくくってあげるとそのまとまりが1つの要素となるんだね。だからこうすんだって。

class App extends React.Component {
  render() {
    return (
      <div>
        <p>やっほう！</p>
        <p>やっほう！！</p>
        <p>やっほう！！！</p>
      </div>
    );
  }
}

一見「要素の数変わってないじゃん」って思うじゃんね。でも違うんだって。

らしい。もっと言うとこの状態は「単一コンテナとしてラップしている」状態らしい。あとはこれ以外だと配列として扱う方法があるらしい。

あと、今のところ理解できたJSXの特筆すべきポイントはこんな感じ

JSXで記述するときのあれやこれや

①コメントアウトは{/＊＊＊＊＊＊/}で囲む（＊＊＊はコメントの中身ね）
②imgタグは最後にスラッシュ付けて閉じる。<img src=’画像のURL’ />
③JSXの中では{}で囲うことでJavaScriptの値とかも記述できる
④HTML5のタグはすべて使える

たぶんもっとあるんだろうけど、気づいたら追記してこう

Hello world!

WordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。

【10月のメルマガネタ】読者が思わず開封するトリビア・話題をご紹介します！

こんにちは。ヤハタです！

すっかり天気も秋模様になり、毎日外を歩くのが楽しい季節になりましたね。

今回は10月のメルマガに使えるネタ・トリビア・雑学をお伝えしていきます。

取り上げるネタは「ハロウィン」「運動会」「衣替え」「体育の日」です。

ハロウィンの海外での意味合いは「悪魔祓い」です！

ここ最近は、東京・渋谷でもハロウィンは盛り上がっていますよね。

皆が楽しむイベントですが、本来は「悪魔祓い」の日。

収穫物や人々の命を狙う悪霊が蘇ると信じられていたんですね。

そんな悪魔たちの邪気を払うために、仮装をして悪霊を追い払う習慣が出来たのが始まりです。

ハロウィンはアメリカではクリスマスに次いだ大商戦

アメリカでは、ハロウィンは「クリスマス」や「ブラックフライデー」に次ぐ大商戦と言われています。

アメリカではハロウィン関連の消費額が約69億円にも及ぶのだそう。

売れるものとしては、パーティー用グッズ、仮装用のコスチュームの他にも、ペット用のコスチュームなども多く売れるとのこと。

このような面を見ると、日本よりもハロウィンに熱心なことが伝わりますね。

ハロウィンの日は、アメリカの子どもたちは7000キロカロリーを消費する！

ハロウィンでは、子どもたちが可愛いコスチュームに身を包みながら、街を練り歩く光景が思い浮かびます。

ある調査では、ハロウィンの日に一般的なアメリカ人家族が消費するカロリーは7000キロカロリーに及ぶとのこと。

バナナの本数に換算すると、66本とのことで、子どもたちの大変さが分かりますね。

運動会は130年以上前からある歴史の長いイベント

秋の風物詩である運動会。

日本で始まったのは、1874年の東京・築地にある海軍兵学校において、イギリス人英語教師の指導により行われた「競闘遊戯会(きょうとうゆうぎかい)」が、運動会の始まりと言われています。

これが全国各地に広まり、毎年秋に開催する恒例行事として定着したのです。

「パン食い競争」も130年以上前からあるんです！

今でも行われている「パン食い競争」などは、運動会の始まりとほぼ同時に生まれた、長い歴史を持っています。

また、「綱引き」も歴史の長い競技です。

定番の運動会競技は政治から生まれた！

例えば、「騎馬戦」や「棒倒し」などの競技は、当時盛んに行われていた自由民権運動から誕生したと言われています。

それ以外にも、戦争などの影響から海戦や陸戦を真似た競技も生まれていたそうです。

当時の政治や戦争などの出来事があり、運動会の基礎が作られていったんですね。

衣替えの起源は実は中国の風習から始まった

10月に入ると、学生服が衣替えになる学校も多いですよね。

実はこの「衣替え」は、中国の風習からスタートしてるんです。

具体的に説明すると、元々は平安時代から始まった風習であり、中国の風習に倣って4月1日と10月1日に夏服と冬服を着替えることを「更衣」と呼んでいたそうです。

四季がはっきりと分かれている日本では「更衣」は受け入れられ、明治時代では、今の国家公務員にあたる人たちも行為の時期を制定されました。

現在は、夏服が6月1日〜9月30日、冬服が10月1日〜5月31日と定められて広まっているんですね。

当たり前に行われていた「衣替え」には、平安時代からの歴史があるとは驚きですね。

運動の秋！体育の日は東京オリンピックがきっかけで出来た

秋といえば「運動の秋」という言葉を思い浮かべる方も多いですよね。

10月には「体育の日」という祝日も制定されていますが、その意味はご存知ですか？

元々は1964年の東京オリンピクの開会式の日が10月10日であったことから、「体育の日」になりました。

その後、ハッピーマンデ法が作られたことにより、10月の第2月曜日に「体育の日」が移動しました。

2020年東京オリンピックの開会式は7月23日！

この話を聞いて、疑問に思った人も居るかもしれません。

2020年には、東京オリンピップが開催されますよね。

ということは2020年の東京オリンピック開会式が行われる7月24日は、新しい「体育の日」になるのでしょうか？

実は2020年7月23日(金)は、10月の体育の日を移動して祝日となります。

その為、この年の10月は祝日がありません。

そして元々は7月20日の「海の日」も、この年については7月22日(木)に移動となります。

つまり2020年7月22日(木)〜7月25日(日)まで4連休となります。

「東京オリンピックを盛り上げよう！」という政府の粋な計らいと言えますね。

「ウルトラマン」という名前は、東京オリンピックから生まれた！

1964年に行われた東京オリンピック時の体操競技の難度は、「A〜C」で表されていました。

そしてそれを超える難易度は「ウルトラC」と呼ばれていたのです。

この「ウルトラC」が流行語になり、ウルトラマン命名の起源になったと言われています。

東京オリンピックがきっかけで、「ウルトラマン」が生まれたのは新鮮ですね。

【7月のメルマガネタ】読者が思わず開封するトリビア・話題をご紹介します！

こんにちは。ヤハタです！

7月に入って気温も急上昇。暑い季節が今年もやってきましたね。

今回の記事では、7月のメルマガに使えるネタ・トリビア・雑学などをお伝えします。

暖かい夏の季節にちなんだネタが沢山ありますよ。

ランドセルが一番売れるのは「夏」なんです！

何となく1月〜3月辺りが一番売れそうな気もしますが、実は違うんですね。

夏場にランドセルが売れる理由は以下があるそうです。

海外観光客のお土産として定着

ランドセルって、実は日本にしかない独自のカバンなんです。

このカバンを海外の有名人が、自身のSNSにアップしたことから人気が広がっています。

また、日本の「アニメ」を見たことがきっかけで、ランドセルを買いに日本を訪れる観光客も多いそうです。

海外では6月に卒業する制度を導入している場所が多く、卒業シーズンである7月に日本を訪れる観光客が一番多いとのこと。その為、7月に多くの観光客がランドセルを買っていくのだそう。

実際にランドセルを作っている人も「外国人のお土産」になるとは、想定外ですよね。

祖父母が孫に買う時期が夏場に集中

これは、祖父母が孫に7月〜8月にプレゼントするために、この時期に集中すると言われています。

7月から8月は、ちょうど子どもたちが「夏休み」に入る季節。

祖父母のお家に家族で遊びに行った時に、プレゼントされるようなイメージですね。

両親が買うのではなく、祖父母が孫に買うケースが多いというのも驚きですよね。

少子化なのに売り上げアップの理由は「たった1人の孫」

少子化なのにランドセルの売り上げが上がっている理由は、「ひとりの孫に沢山お金を掛けられるようになった」という意見が多いです。

祖父母の世代は、金銭的にも余裕がある場合が多く、数少ない孫のためにもお金を掛けられます。

「どうせ買うなら高い商品を買おう！」と高価なランドセルを買ったり、勉強机や制服など、学校に必要なものを買ってくれる場合も多いのだとか。

子どもの数は減っていますが、子どもに掛けるお金が増えたことが売り上げアップの要因なんです。

エアコンの細かなON/OFF設定は節約効果なし！

必死で「電気代節約や！」と思い、実践していた人の心を折るようなネタですが、これにはエアコンの仕組みに理由があるようです。

エアコンの電力は「設定温度と実際の温度の差」によって変わる！

エアコンは、実際のエアコンの設定温度と外気温の差を埋める段階で、沢山の電力を消費します。

実際のエアコンON/OFFよりも、出来る限り部屋温度と設定温度の差をなくすことが大切なんですね。

エアコンの電力を節約する3つの方法

では実際に、どういう節約方法があるのか知りたい方も多いはずなので、いくつかエアコンの電力を節約する3つの方法を解説します。

エアコンの電力を節約する3つの方法

①設定温度を高めに保つ
②カーテンを閉める
③エアコンをつける前に換気する

設定温度を高めに保つ

エアコンの設定温度が、実は消費電力に大きく左右します。

実際の気温と設定温度の差が1〜2度あるだけで、約10%の電力節約が期待出来るとのこと。

例を挙げると、実際の室温が30度なら、設定温度が28度と18度であれば、28度設定の方が電力を節約出来るということです。

カーテンを閉める

部屋の温度は、日当たりなどによって温度が上昇します。

その為、カーテンを閉めることで日光などの温度上昇の要因を防ぎ、室温が保たれやすくなるのです。

室温が安定すると、その分、エアコンへの負担も軽減されます。

エアコンを付ける前に換気をするだけでかなり違う！

部屋を1日中空けて帰ってくると、部屋の温度が高くモワッとしますよね。

この状態なら、今すぐにでもエアコンのスイッチを入れたくなりますが、そこを節約の為にグッと我慢。

落ち着いて一度換気をして、室温を下げることでエアコンの消費電力に大きな違いが生まれますよ。

織姫と彦星は「恋人」ではないんです！

7月のイベントに七夕がありますが、何とも衝撃的なネタですよね。

何となくのイメージで2人は「恋人」だと思っている人も多いと思いますが、具体的に解説します。

本当の関係性は「夫婦」なんです！

織姫と彦星は、すでに既婚者。

しかし、結婚してからしばらくの間遊んでばかりいた2人。

ちなみに遊びとは、元々働き者だった2人が一緒になり、ずっとイチャイチャしていたとのこと。

これに怒ったのは、織姫と彦星を引き合わせた天帝でした。

2人を離れ離れにして、年に1回だけの再会を許したとされています。

また、七夕に降る雨は、年に1回会った2人が別れの時に流す涙と言われています。

紫外線を目に受けると肌が日焼けするという新事実！

日本でサングラスを掛けていると、昔は少し不思議な目で見られることもありました。

しかし、実際には目を守る為の大切な効果があるんです。

大阪市立大の研究チームが発表しました

実際に大学の研究チームが「目で紫外線を受けるだけで日焼けする」という結果をまとめました。

マウスを使って実験を行なった所、目だけに紫外線を当てたマウスと、皮膚にだけ紫外線を当てたマウスは同じ量のメラニン色素が発生することが確認されたのです。

紫外線対策は、皮膚の保護と目の保護を両方行うことが大切なんですね。

オーストラリアでは小学生のサングラス着用を義務化しました！

「地球温暖化」の進行によって、オゾン層の破壊が懸念されているオーストラリアでは、小学生のサングラス着用が義務化されています。

これは日光から目を守る以外にも、白人は目の虹彩に含まれているメラニン色素の量が少ないことから、日本人の2倍以上も光を眩しく感じるそうです。

外国人がサングラスを常時装着しているのは、このようなことが原因なんです。

以上、メルマガに使える7月のネタやトリビアでした！

chmodで付与できる権限は3種類

chmodで権限付与できるの対象者は４種類

とりあえず現在の権限の状況を調べてみる

パーミッションとはファイルやディレクトリへの「アクセス権」のこと

今回権限を変えたいのは「node_modules」のフォルダ

パーミッションの読み方

パーミッションの権限を数字で表す

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

code EACCES

syscall access

path /usr/local/lib/node_modules

errno -13

permission denied

A complete log of this run can be found in:

結果：ググった結果、エラーの原因はなんとなくわかった

stateって「状態」を決めることで色んなことが出来るっぽい

stateを理解するためにJavaScriptのオブジェクトを振り返る

Reactのstateの書き方 stateの定義

stateの変更

stateの変更をメソッド化する

JSXはHTMLと同じような使い方ができる

ハロウィンの海外での意味合いは「悪魔祓い」です！

ハロウィンはアメリカではクリスマスに次いだ大商戦

ハロウィンの日は、アメリカの子どもたちは7000キロカロリーを消費する！

運動会は130年以上前からある歴史の長いイベント

「パン食い競争」も130年以上前からあるんです！

定番の運動会競技は政治から生まれた！

衣替えの起源は実は中国の風習から始まった

運動の秋！体育の日は東京オリンピックがきっかけで出来た

2020年東京オリンピックの開会式は7月23日！

「ウルトラマン」という名前は、東京オリンピックから生まれた！

ランドセルが一番売れるのは「夏」なんです！

海外観光客のお土産として定着

祖父母が孫に買う時期が夏場に集中

少子化なのに売り上げアップの理由は「たった1人の孫」

エアコンの細かなON/OFF設定は節約効果なし！

エアコンの電力は「設定温度と実際の温度の差」によって変わる！

エアコンの電力を節約する3つの方法

設定温度を高めに保つ

カーテンを閉める

エアコンを付ける前に換気をするだけでかなり違う！

織姫と彦星は「恋人」ではないんです！

本当の関係性は「夫婦」なんです！

紫外線を目に受けると肌が日焼けするという新事実！

大阪市立大の研究チームが発表しました

オーストラリアでは小学生のサングラス着用を義務化しました！

Reactのstateの書き方　stateの定義