全く技術力のない人間にAnt Designを使う機会がやってくる。の巻

使いやすいTODOリスト作成を目指している話

プログラミングを始めたきっかけ(本題に移りたい場合は飛ばしてください)

自分がちゃんとプログラミングを始めようかなとなったのは今年に入ってからな気がします。それまでは、のらりくらりとなんとなく大学のプログラミングの授業を受け(全然身になってないですが...)、趣味とはいえないまでも静的でレスポンシブも考えられてないようなHTMLとCSSだけで出来たWebサイト的な何かをGitHub Pagesにあげていました。そして動的なWebサイトを作ってみたいと思うようになり最初はサイコロを作った記憶があります。

ある日、知人にReactの書籍「これからはじめるReact実践入門」(https://www.sbcr.jp/product/4815619480/) を購入していただき、「よーし進めるぞー」と意気込み、最初は良かったもののまったく理解が及ばなくなってきて悲しくなり、そこで「React(そもそもプログラミング)なんて自分に分かるわけがない」とぺしゃんこになってしまいました。

時は進み、ジュンク堂で「Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた」に出会いました。これも同じ知人の影響ですね。(https://www.shoeisha.co.jp/book/detail/9784798183664) これが大変良くて、Reactへの苦手意識が吹き飛びました。そもそも自分にプログラミングなんて絶対向いてない、なんて勝手に自分で決めないでもっとがむしゃらにやればよかったんですね。それでも、全然自信が持てないのでZennでは備忘録を残していきたいと思います。よろしくお願いします。

今日の備忘録

Ant Designを使う上で、<Input>コンポーネントと<DatePicker>コンポーネント、<TimePicker>コンポーネントを使うことにしました。今回はこの３つを取り上げようと思います。
<Input>コンポーネントに

<Input style={{width:"12"}} placeholder="算数" />

<DatePicker>コンポーネントに

<DatePicker style={{width:"12"}} placeholder="2019/09/14" />

<TimePicker>コンポーネントに

<TimePicker style={{width:"12"}} placeholder="10:00" />

このように、style属性でwidthを与えています。しかしこの書き方だと、

このように<Input>コンポーネントのみ幅が大きくなってしまう現象が起きてしまいました。そこでデベロッパーツールで確認してみると<Input>コンポーネントが width:100% になっているではありませんか！

自分の調べ方が悪く、よい記事が見つけられなかったのですが<Input>コンポーネントはwidth と height が指定できないのではないのではないか、という予想です。

そして、style={{width:"auto"}} で解決することができたのです。

そこで、width:auto と width:100% の違いをわかっていなかったことが判明しました。

width:auto の意味
・内容に合わせた幅を取る

width:100% の意味
・親要素の幅いっぱいの幅を取る

おそらく、まだ言及しなければならないことがあるのかもしれませんがいったんここで止めておきます。

おしまい

こんな感じで今後も備忘録を書けていけたらな、と思っております。何卒よろしくお願いします。