はてなブックマーク

daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ

とある日の晩 Reactチュートリアルを終えたばかりの友人に、簡単なTodoアプリの実装デモを通じてpropsとstateについて説明していたときのことです。 useState APIの使い方を理解してもらうため、こんな感じのコードを書いて見せました。初期値に'洗濯物'を持つTodoリストで、ボタンを押すと'hoge'という項目が追加されるというものです。 export const TodoList = () => { const [todos, setTodos] = React.useState(["洗濯物"]); const addTodo = (newTodo: string) => { console.log('Before:', todos); setTodos((prevState) => [newTodo, ...prevState]); console.log('Afte

概要 多機能で軽量、見た目もかっこ良くて最高なVSCodeですが、結構デフォルト設定のまま使っている方多いですよね？ そんな人の刺激になればと、ぼくが普段から利用しているVSCodeカスタマイズやキーボードショートカットの中からオススメを紹介します。対象読者は以下のような方々で、特に初心者向けの記事です。 プログラミング初心者の方 VSCodeをデフォルト設定のまま使っている方 他人のカスタマイズを覗くのが大好きな方 見た目のカスタム カラーテーマ デフォルトのテーマも十分かっこいいですが、もっとタイプの色合いを見つけませんか？ カラーテーマは簡単に変更できます。⌘ + K & ⌘ + T（⌘Kに続けて⌘Tを押す）と入力し、表示される選択肢を選んでみてください。最初からいくつかのテーマが用意されており、拡張機能で選択肢を増やすことができます。画像は後述するRainglowという拡張テーマを

やりたいこと 有料版限定の機能である「ユーザーグループを作成し、まとめてメンションできるようにする」を無料版でも使いたい。例えば、幹部と呼ばれる山田、田中、佐藤、木村、小林の5人がいたとしたら、@幹部をつけるだけで5人にメンションが行ってほしい。 「有料版にしろよ」と言われたらそりゃそうなのだが、Slackの有料版を使おうと思うと最低でも￥850/人月の支払いを要求されるので、大学生サークルで使うには高すぎるという背景がある。 方法 Slackbotのカスタムレスポンスを利用する。例えば「@幹部」というキーワードに対して、幹部5人分のメンションをbotに返してもらうように設定する。イメージはこう。 わたし「@幹部　来週のミーティングを30分延長させてほしいです。」 Slackbot「@山田 @田中 @佐藤 @木村 @小林」（太字はｽｺｯｺｺってちゃんと鳴るメンション） とても単純なのですぐ

結論 デザインとプログラミングを両方学ぶと、変化があるのは主にデザイン側で、生産性が上がるのは主にプログラミング側 なぜなら、デザイン→プログラミングという流れだから とある日のサークルでの出来事 サークルで新しくInstagramのアカウントを創設するということで、1年生の子がアイコンに使う画像の案を3つ持ってきてくれました。 彼女が提出してくれたのは、大きな正方形の画像3枚でした。どれも上手にデザインされてはいるものの、Instagram上でのアイコンの見え方は「非常に小さい円形の画像」です。大きな正方形の画像3枚の状態で良し悪しを決めることもできなくはないですが、自分には後で「なんか違うな...」となる未来が見えました。 そこで自分は「実際にアプリ上でアイコンとしてはめてみて、その状態を見比べるようにしないか」と提案し、その1年生は快く行ってくれました。すると実際に画像の見え方が想定