react

どういう状況の話かと言うと、 num && ( <Text>{list[num]}</Text> ) のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。 で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画される。 なんで〜〜〜〜と思ってたら、 stackoverflow.com これに書いてありました。 そう、0はfalseなんですね。numがtrueだと処理が&&の右に移りが描画される…という記述で、falseのとき…

前回は Material-UI のデザインの変更を行いました。今回はその続きとして Theme をカスタマイズする元となるレイアウト作成を行います。ソースコードは前回の記事を踏まえていますのでその点ご了承ください。（といって、踏まえないでも読めてしまうように工夫はしておきます。） それぞれの章は以下の流れで書いています。 全体のソースの掲載 部分部分の説明 「全体のソース」は長くなりがちですが、さっと流して読み進めていただければと思います。 シリーズ一覧 初期状態 前回やったこと、今回やること 変更前のソース サイドメニューの追加 Drawer の追加 List の追加 ListItemTex…

前回は Material-UI のコンポーネントを利用するところまでやりました。今回はその続きになります。ソースコードも前回の記事を踏まえていますのでその点ご了承ください。（といって、踏まえないでも読めてしまうとは思いますが。） hiranoon.hatenablog.com さて、今回あ Theme をいじったり Style をいじったりします。その方法は色々あるのですが、今回はその一例となります。なるべく今現在の主流と思われるやり方、といいますか、公式で使われている方法を採用しています。 シリーズ一覧 Theme という概念 Theme について Palette について makeStyl…

React with TypeScript のプロジェクトにて、 Material-UI を使い始めるまでの方法について書いていきます。 簡単な管理画面（ダッシュボード）を作成して完了としたいのですが、当該記事では Material-UI を利用する環境を用意して終えることにします。利用方法については次の記事に任せる構成にします。 シリーズ一覧 前提事項 事前準備 バージョン情報 Material-UI のインストール 簡単な画面の作成（Material-UI 利用前） ディレクトリ・ファイル構成 ページの作成 ルーティング テンプレートの作成 テンプレートの利用 Material-UI の簡…

はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内…

react 17.0からJSXトランスフォームが実装されているので、本来であればtsconfigにreact-jsxを指定する事が可能です。 ja.reactjs.org これをintelijでロードした場合に、以下のような警告が表示されるケースがあります。 対策としては、以下の「Always download the most recent version of schemas」にチェックを入れることで警告は出なくなります。

Reactでカルーセルスライダーを設置する方法として、「react-slick」という選択肢があります！ 今回は、早速「react-slick」というライブラリの使い方と応用を駆け足で紹介します！！ react-slickの特徴 react-slickの導入 step.1 index.htmlファイルにreact-slick用のcssファイルを読み込む。 step.2 「react-slick」のパッケージをインストール step.3 使用するファイルで、カルーセルスライダーをimportする。 react-slickの応用 設定方法の確認 ブレークポイント（デバイスごと）で設定を変える方法 …

セットアップ作業

1. Next.jsの環境を作成する 公式ページの手順で雛形プロジェクトを生成する。 npx create-next-app 2. テスト関係の依存ライブラリを導入する 導入するのは以下のライブラリ。 jest @babel/preset-env @babel/preset-react enzyme enzyme-adapter-react-16 Enzymeは手に馴染んでいるので使っているだけなので，必須ではないです。 npm i -D jest @babel/preset-env @babel/preset-react enzyme enzyme-adapter-react-16 3. J…

昨日の記事なんですけもう少しContextのありがたみをがありそうな題材としてログインする例を考えた。 krazy.tokinia.me ソースコードとか所感 github.com gyazo.com こんな感じに動く。ここからアプリが大きくなるとこのContextでやってるありがたみが大きくなるんだろうなぁ、みつを。 実装してて思ったんですけど useUserContext と UserProvider って別に定義して分けた方が良さそうとか思ったのでやったけど実際筋いいんですかね、わからない...。まあでも .tsx ってついてたら「ああ、君はきっとコンポーネントとそのPropsの型が入っ…

こんにちは。beaglesoftの真鍋です。 今年はお正月にこれを読んでいました。 zenn.dev 読もうと思った動機や目的 もともとReactとFirebaseでものを作ったことはあったのですが、Next.jsとFirebaseでは作ったことがありませんでした。そもそも、SSRなどをどこで行うのかなどちょっと疑問な点がいくつかありました。 そこで、この辺のことをクリアにするためにこの本をチョイスしました。 実際の感想 当初の目的は達成できました。Next.jsとFirebaseを利用するに当たりVercelを利用すればうまくいくことがわかりました。また、OGPについては全く知らなかったので…

こういう風に投稿すると(左)、esa.ioにこういう感じ(右)で投稿される分報風のアプリを自分用に年末年始に作りました。 作った動機 使った要素技術 Firebase Authentication Firebase Hosting + React Firebase Cloud Functions デプロイ自動化 所感 作った動機 きっと皆さんそうしているように、私も日々ログを残しながら作業をしている。仕事ではscrapboxを使っているが、プライベートではesa.ioを愛用している。プレビューを見つつmarkdownで書けたり、タグとカテゴリがいい感じに使えたりするところが気に入っている。あと…

更新日時 2021/01/25/07:00 Qiita Trends Daily 1位 ※前日1位 TypeScript,Firebase,React,react-hooks Qiita Trends Daily 2位 ※前日3位 WordPress,サーバー管理,サイト制作,WordPressプラグイン Qiita Trends Daily 3位 [New] GitHub,AWS,初心者向け,アクセスキー Qiita Trends Daily 4位 ※前日2位 Qt,Line,TWELite,RaspberryPiZeroW Qiita Trends Daily 5位 ※前日5位 転職,未経…

日々，開発を行っていると頻繁に目の疲れを感じます． この記事では，エンジニアの役に立つかもしれない，目が疲れたときにやることリストをまとめました．医療観点で信頼できる情報を求めている方は，別の記事を参考にしてください．これは，毎日PCの画面を10時間以上見続けている@huslc2esが書いた記事です． エンジニアのみなさんの快適な業務遂行にお役立ちできれば幸いです．本文に入ります．

きしだのHatena「オブジェクト指向には、カメラがやっとついたころのガラケーのイメージがある」https://nowokay.hatenablog.com/entry/2021/01/21/004148 なぜかホットエントリ入りしていた．釣りタイトルのせいか，そもそもOOPが炎上しやすいネタだからか．中味は明らかな間違いも多いし，それ以外の部分についても賛同できない部分が多数．少なくとも初心者は絶対にコレを参考にしない方が良い．まるで憂鬱本を読んでるような気分になる．*1先に追記部分から． 1/22追記 この「オブジェクト指向について」でも書いてますが、基本的にぼくの「オブジェクト指向」はラ…

ツイート Kensuke Takeda @takeken1_ エリック・エヴァンスのドメイン駆動設計 輪読会「第9章 暗黙的な概念を明示的にする」後半 に参加を申し込みました！ https://ddd-community-jp.connpass.com/event/202456/?utm_campaign=event_participate_to_follower&utm_source=notifications&utm_medium=twitter #dddcj 22:07 Kensuke Takeda @takeken1_ “OKR-based Scrum Team” https://t.…

うぇいうぇいうぇいうぇい。(1/24/2021) はい、どうも、 無期雇用技術者派遣会社(低賃金)に所属し、配属待ちをしている者(男,25歳,大阪,実家暮らし,独身)です。 ほんと、今週は意味わからん。 twitterで高学歴を自称する女に絡まれた。引用リツイートで、俺の元ツイートが異なる解釈で拡散された。解釈が違うのはまあいいんだが、引用ツイートは元ツイートと解釈が異なっていたので返信した。んで、めんどくさいやりとりになってしまった。結局、ブロックされてボロカスに貶された。奴さんは半実名垢で身分も公開しているから仮に間違っていたとしても俺のような匿名垢に対しては引けないんだろう。マジレスとか…

Hotwire https://hotwire.dev/ Turboを中心としたウェブアプリケーションのアーキテクチャの要素技術やコンセプトをPRするための名称 Hotwireというライブラリがあるわけではない 役割としてはMicro FrontendsとかReactのlearn once, write anywhereなどに似ている アプリケーション実装言語非依存だけど現状Railsアプリケーションしか実用できる基盤がない Hotwireの思想 アプリケーション開発者の生産性を上げることを目的にしていること サーバーサイド言語でフロントエンドを実装したいアレではなかった プログレッシブ(段階…

最近、友人より、、 Web系全然手を付けてなくない？どうしたの？ と言われてしまいました。。。 ちょっとサボってた感じです😅ということで、久々にWebアプリの作成です！！ 家庭内で家事の分担で言い争いをすることが多いな。と思い、可視化するアプリを作成することにしました！！ まずは、こちらの家事分担表を元に妻・夫を選択でき、結果を閲覧できるようにします。 https://publications.asahi.com/aera/pdf/160530/tomobataraki.pdf本当は分担リストも考える必要があったり、ユーザによるカスタマイズとかも考える必要があるかもですが、 今回は一旦おいてお…

cpoint-lab.co.jp React Hook Formとyupでフォームにバリデーションかけてます。 で、問題は、inputのtypeがnumberで、yupではnumber or nullでバリデーションかけたいとき。 yup.number() yup.number().nullable() だと、数字はいけますが、nullが入りません。 must be a `number` type, but the final value was: `NaN` (cast from the value `""`). どうすればええにゃーってなっていたところ、 github.com 上記のiss…

CSSやっぱり自分の書いたものの変化がすぐわかるので面白いし、毎度「ええ〜〜そんな書き方するの、、知らんがな！！」なんてキレながらやってます。ただ、綺麗に出来た時は嬉しいです。

×81 サーバーレスの勉強方法を聞いてみた。- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS ×56 ヤフーの検索基盤と機械学習検索ランキング #yjtc / YJTC21 B-7 ×53 10,000 Hours With Claude Shannon: How A Genius Thinks, Works, and Lives | by Jimmy Soni | Mission.org | Medium ×44 [タイトルが取得できませんでした] ×40 Loon’s final flight. Loon’s time as an Oth…

pic.twitter.com/fn6IfZ9SeU— みしま a.k.a. オーディン (@odmishien) 2021年1月22日 こういうの作れるWebアプリをNext.jsで作ってみたんだが、画像生成してそれ配信するシステムのベストプラクティスがよく分からない。とりあえずS3にアップロードするようにしているがすぐにPUTの無料枠を超えてしまいそうなのでツラい。TypeScriptもReactも完全にフィーリングで書いているので良くないと思う。夜は駅に入っている焼き鳥屋さんのうまい唐揚げ弁当を食った。学部時代にシェアハウスをしていた時によく食べていたのですごく懐かしい味がした。ご飯と記…