Rules of React を経典に React を書いて心の安寧を保つべし - Qiita
こんにちは、とまだです。 React は Hook の効果もあり、書けばとりあえず動いてくれるので楽しいですよね！！！！！！！ ただ、本当に正しいコードを書いているか不安になったことはありませんか？ React は自由度が高い分、書き方によってはバグが発生しやすかったり、パフォーマンスが低下することもあります。 （その結果としてバグが発生し、しかも全く原因がわからない事態に何度も出会いました...） そんなときに役に立つのが「Rules of React」です。 これは、React 公式が提言している、React を使う時の「お約束」です。 私は今まで断片的にしか知らなかったので、特に重要そうなものを抜粋してまとめてみました。 1. コンポーネントとHookは「ピュア」であるべし！ 「ピュア」とは？ Props と State は、React でデータを扱うための重要な概念です。 「ピュア
[人要らず]ChatGPTを使った一人議論やってますか？ - Qiita
はじめに 今回は私が良くやっている「一人議論」という方法について紹介いたします。 これはアイデア出しや壁打ちに便利な手法です。 「使えるかも」と思った方は、ぜひやってみてください。 一人議論とは？ ChatGPTを使った議論のシミュレーションの一つです。 具体的には次のようなプロンプトを利用して行います。 # タスク テーマについて議論してください。 # ルール - 登場人物を3人出してください。 - 議論をまとめないでください。 - 10回会話を続けたところで会話を止めてください。 # テーマ ChatGPTがもたらしたもの すると、次のような議論が始まります。 ここからが一人議論のポイントです。 次に、自分の意見を差し込みます。 ChatGPTにて次のような文章を打ち込みます。 すると、それを元に、次のような会話が続きます。 あとはひたすらこれを続けるだけです。 強めの反論をしても誰も
![[人要らず]ChatGPTを使った一人議論やってますか？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c10f825677a85302b77def22017999c5b2396fb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU0JUJBJUJBJUU4JUE2JTgxJUUzJTgyJTg5JUUzJTgxJTlBJTVEQ2hhdEdQVCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSU5RiVFNCVCOCU4MCVFNCVCQSVCQSVFOCVBRCVCMCVFOCVBQiU5NiVFMyU4MiU4NCVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRSVFMyU4MSU5OSVFMyU4MSU4QiVFRiVCQyU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NjM2NDYzODI1YmZlN2MwN2ExOTgxYzZkMmM4YTA2MWU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBHTVIwMDA5JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01ODAxZTZkOTVhYmJjOTcyOGU3MzBiZDM2Zjg1ODk1Ng%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D2d57805ff1d74ec1fc9af0acccda7aba)
【作業効率化】優秀すぎて課金してでも個人的に使ってるmacOSソフトウェアまとめ【5選】 - Qiita
はじめに 全部で5つのソフトウェアを紹介します。基本はmacOS対応のみです。Windowsのみなさん、ごめんなさい！ 正直あまりにも便利なので、僕が代わりに身銭を切ってでも、皆さんに使ってもらいたいものだらけです。 本記事は、特に駆け出しエンジニアの方に読んでいただきたいです。僕がこの業界に入ったときは、とにかく知らないものばかりで、便利なサービスとかも全然使ってなかった（というか、知らなかった）ので、そんな昔の自分のような方のお役に立てたら幸いです。 作業効率化、めっちゃ楽しいし気持ちいいですよ！ 優秀すぎて課金してでも個人的に使ってるソフトウェアまとめ alfred 最強のランチャーアプリです。もはやAlfredなしではパソコンがいじれません。すべての操作はAlfredに通じます。 僕は最初、Alfredの無料ユーザーだったのですが、下記記事を見て有料版に移行しました。 Alfred
高校生がリアルタイム投票サイトを公開したらいきなり1万PVを記録した話 - Qiita
今回は高校生の私たちが公開した投票サイトが三日で１万PVを記録したので、その経緯をサイトの紹介も含め、全て公開します。 qiitaで後日談を書きましたので、よかったらお読みください リンクはこちらです サイトの内容 名前はAICEVOTE(アイスボート) リンクはこちら ----> aicevote.com(大量アクセスで現在サーバーが不安定な状況です。ご了承ください。) このサイトを一言で言うとこんな感じです。 "投票用紙を氷に見立てた次世代のリアルタイム投票サイト" AICEVOTEとは 普通の投票とAICEVOTE（アイスボート）の違い 普通の投票 普通の投票では、投票箱A/Bに最終的に投票された票の数の比で結果が決まります AICEVOTE AICEVOTEでは投票用紙の代わりに氷を投票します。 それぞれの投票箱の底は網目になっています 時間が経てばあなたが投票した氷は少しずつ溶け
Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita
この記事を読むと VSCode拡張機能を入れて、下記のようなことが実現します ・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる ・インデントが一眼で分かる ・htmlタグの開始タグと終了タグを同時に修正できる ・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。 さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ
N予備校プログラミング入門コースで学べること - Qiita
私 is 誰 今年の7月にドワンゴの教育事業部に異動し、N予備校でプログラミング講師をやることになりました。 現在は週2回ニコ生やN予備校上にてプログラミング入門コースの授業放送をしています。 ドワンゴ自体は7年目となり、ニコニコ動画の開発を4年、エンジニア教育やエンジニア採用を2年ほどやってきました。 この記事で書きたいこと 現部署に異動後、教材のインプットを兼ねて『N予備校プログラミング入門コース』を履修したのですが、明らかに難易度が僕の想像した "入門コース" から外れたガチ編成になっていて衝撃を受けたことが記事を書こうと思ったきっかけです。 中身としてはとても良い教材になっているので、僕のような勿体無い誤解が少しでも減れば幸いです。 入門コースはいわゆる入門コースではない 『プログラミング入門コース』のゴールは ドワンゴがエンジニアとして採用したいレベル や IT企業のエンジニアイ
とあるラーメン店のWordpressサイトをNuxt.js+Firebaseで作り直した話 - Qiita
お店と Web サイトの紹介 中華そば四つ葉 https://yotsuba628.com/ ラーメンが好きならご存じの方もいらっしゃるのではないでしょうか。 最寄駅から徒歩 90 分という衝撃のアクセスの不便さ。 にもかかわらず多数の祭事出店、テレビ出演、都内から足繁く通う芸能人もいる埼玉県川島町が誇る名店です。 経緯 何を隠そう私は川島町出身なのですが、学生時代に店舗に通っているうちに店長に顔を覚えてもらうことができ、Web ページの作成をさせてほしいと申し出たところ承諾を頂けて 2018 年の 3 月頃に Web ページをリリースしました。 しかし当時の技術力不足もあり、Wordpress の入門書を写経しながらのものとなり・・・ サイズの大きい画像を多数保有しているため表示が遅く、見た目が芋臭いというなんともお粗末な状態で 1 年以上運用を続けていました。 時がたち社会人になってか
GitHub 上でサクッと空のディレクトリを作成する方法 - Qiita
やり方 本来、新しいディレクトリを git 管理し、GitHub へ反映するには下記のような手順が必要です。 ローカルで新しいディレクトリを作成 中にファイルを置く ファイルを git add する ファイルを git commit する git push する しかし、前述のキャプチャの方法ならブラウザさえあれば GitHub上で全て完結できます。ローカル作業が面倒なときはお試しください。用途例としては、プロジェクトブランチに共用のディレクトリだけを先に用意する、みたいなときによく使います。 説明 Create new file をクリックして、ファイル名を path/to/.gitkeep という名前で作成します。すると、スラッシュで区切られたところはファイル名ではなくディレクトリ名として扱われ、path/to ディレクトリ内に .gitkeep というファイルが作成されます。このとき
Nuxt.js×Firebase Hosting×PWAでQiita記事共有時に、TwitterIDを取得して作者にメンションで感謝を伝えられるTweetサービスを作った🎉🎉 - Qiita
Nuxt.js×Firebase Hosting×PWAでQiita記事共有時に、TwitterIDを取得して作者にメンションで感謝を伝えられるTweetサービスを作った🎉🎉APIVue.jsFirebaseNuxt#PWA Nuxt.js×Firebase HostingでPWAを作った🎉🎉🎉 https://t.co/lse1BalZSL — ワツヨ@PWAのthanks-mentions (@watsuyo_2) November 9, 2019 開発コンセプトや想いはnoteにも書きました🙏🙏 作り手と受け手の新しい関係性を作るWebサービスを作った https://note.mu/watuyo_2/n/nb47f9fa3fe81 PWAの「thanks-mentions」を作りました🎉🎉 Qiitaの記事を共有する際に、TwitterIDを取得して作者にメンショ
コマンドラインからVS Codeでファイルやフォルダを開く - Qiita
メモついでに。 VS Codeを立ち上げてマウスでポチポチしたりFinderからファイルをD&Dしたりするのでもいいのだけど、なんとなくロス感があるのでターミナルからVS Codeでファイル・フォルダを開きたかった。 なお当エントリ執筆時点のVS Codeバージョンは以下です。 バージョン1.28.2 (1.28.2) 前提 codeコマンドが使えること。 でヘルプ出ればOKなはず。 Mac使っててcodeコマンドなんてないと怒られるひとは、VS Code上でcommand+shift+Pしてコマンドパレットにshell commandって打つと『Shell Command: Install 'code' command in PATH command.』っていうのがあるはずなのでこれをやると使えるようになる(はず)。 VS Codeをただ起動する
ソシャゲエンジニアの自分が開発に必須だなと思った知識（MySQL編） - Qiita
この記事の目的 自分は、とある会社様の元でソシャゲの API 開発をさせていただいています。 ソシャゲは、リリース時やイベント時などに集中アクセスされやすく、負荷軽減の知識がない状態で開発を行ってしまうと、運用時に緊急メンテ祭りになりやすいジャンルかなと思っています。 これまで培ってきた MySQL の知識ですが、脳内メモリ量の関係上、暗記できないのでメモしておこうというのが主目的です。 ここ数年ほどソシャゲ開発しかしていないため、偏っている感がある内容ですのでご注意ください。 概要 ストレージエンジンは InnoDB。メインで扱っている MySQL バージョンは 5.6。 記事の内容ですが、これらのキーワードを見て、おおよそ分かる方は読む必要はないかと思います。 インデックス系 クラスタインデックス カバリングインデックス EXPLAIN で注意するべき値 トランザクション系 MVCC
nghttp3を使ってcurlでHTTP/3通信する - Qiita
Cloudflareが作成したrust製のQUICライブラリ、quicheを使ったcurlでのHTTP/3通信は以前の記事を使って実現できましたが、ngtcp2とnghttp3を使ったcurlのビルドが上手くいかず、放置してました。 今日やってみたら動くようになってたのでうれぴーって感じです。 こんなかんじ。 $ docker run --rm -it inductor/curl-quic-ngtcp2 # curl --http3 https://facebook.com/ curl --http3 https://www.facebook.com/ -v -s -o /dev/null * Trying 31.13.82.36:443... * Connect socket 3 over QUIC to 31.13.82.36:443 * QUIC handshake is compl
Android開発者のためのFlutter説明文がためになったので全訳&要約 - Qiita
View Viewに相当するものは？ Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、その不
【簡単DB】Steinで超絶簡単にgoogle spreadsheetをDB化してみよう！ - Qiita
2023-10-14 追記 書いてから数年たっても、ちょこちょこ引用されるので内容更新しました。 基本的な内容は変わってないです。 言い回しとかデザインとか写真とかを変更しました。 はじめに。Steinって何？ 皆さんこんにちは。 ふくしま はやと（@MasuraoProg）と申します。 さて、この度twitterにて SteinというGooleSpreadSheetをそのままDB化できるシステムが 軽バズりしていました。 めっちゃ便利そうでしょ！ Stein利用のための準備 2-1 先にGoogleSpreadSheetへDBを作成 練習用に以下のように、GoogleSpreadSheetに記載しました。 [１行目にカラム名(項目名)]を記載してください。 このGoogleSpreadSheetのURLはあとで使うので、控えて置きましょう。 ※なおアクセス制限の設定は不要です。すごいね！
Vue.jsとCSSアニメーションでラーメンタイマーを作る + Firebaseで簡単公開 - Qiita
3分 or 5分のボタンをホバーするとキャラクターが左右に振り向きます。 時間を選びクリックするとカウントダウンタイマーが使える簡単な内容です。 レスポンシブデザイン（スマホ）にも対応しています。※左右の振り向きはしない キャラクターデザイン まず一番目立つキャラクター 自分は元々漫画家のアシスタントをしていた時期などがあり、 描いた物をアプリに組み合わせてみたかったので描き描き。 レイヤーといって何枚もの板が重なっているように描かれています。 なので例えば手を消すと下に隠れている髪が出てきます。 これによって一枚描いたら背景などが簡単に変更でき、左右反転させて手を描けば2枚完成。 ※猫の方が万人受けする。名前募集中！ こちらに原寸サイズ画像＆レイヤーファイルを公開しています。 illustration-Original_Characters（GitHub） 🔍 コードの解説 それぞれ分
JavaScriptで絵文字とサロゲートペアと結合文字とgrapheme clusterを正しく扱うのに少し苦労した話 - Qiita
皆さんはUnicodeや絵文字についてどのくらい理解していますか？ 私は全く理解できていません。 JavaScriptで絵文字を扱おうとしたら苦労した話を書きます。誰かの参考になれば幸いです。 経緯 MuscularというジョークコマンドをNode.jsで開発していました。 これは、ボディビルダーとともにテキストを叫んだ感じで表示するという単純なアプリケーションでした。 「cowsay」と「echo-sd」と「筋肉」をあわせたようなコマンドです。 $ muscular shout ナイスバルク .-~-. / \ | / ,_-/ ,.*`--., .r ; `` \ .`,` ,: ,.`A`,\ /,`/\`'' '' ? \` \ / / \ ; , ; / ) } ＿人人＿ | / \:':': | | 7 ＞ ナ ＜ | | ) ':' | ,` / ＞ イ ＜ ( \ `-,_
信頼されるフルリモートエンジニアになるためのアジャイル開発 - Qiita
追記(2024/06/26) 2024年バージョンを書きました。書いてある内容はほとんど同じであるので、大事なことは変わらないのだなと思います。 背景 フルリモートエンジニアはとてもいいものです。どこでも仕事ができるので旅行をしながら、海外にいながら、温泉に入りながら、どこででも好きなタイミングで仕事をすることができます。 この素晴らしい自由を支えるのは顧客との信頼です。 フルリモートの仕事は、仕事の過程を見ることができないため完全な成果物主義であり、この仕事をこの人に任せればこんな成果物が返ってくるだろうという期待と信頼関係によって成り立っています。 顧客に価値を届け、信頼してもらい、良好な関係を結ぶことがフルリモートエンジニアとして生きていくために必要なのです。 信頼を得るために必要なことは？ どうすればフルリモートでも価値を届けて、信頼してもらい、良好な関係を結べるのでしょうか？ い
vimを使うとき十字キーで移動して、vimmerに殺されるその前に - Qiita
はじめに あなたがこの記事を読んでいるということは、私はすでにこの世にはいないのでしょう。 最期に、あなたに私の犯した罪を告白します。 そうです、vimでの移動に十字キーを使っていたのです。 この事実を知ったvim教の信者たちが血眼になって私を探しています。 きっと、私は見つかるでしょう。 そしてMacBookの十字キーを全て剥がされ、Logicoolの青軸キーボードで撲殺されるのです。 それほどまでに私の罪は重いということは重々承知しています。 もし、これを読んでいるあなたが私と同じ業を背負っているのであれば今すぐ逃げてください。vimmerはどこにでも潜んでいます。 今日笑顔で話していた同僚が明日にはキーボードで殴りかかってくるかもしれないのです。 だからせめて、私のささやかな抵抗をここに書き記します。 あなたが私と同じ道を辿らないことを願って・・・・ escは海よりも遠いということ
偉大なプログラマ(+人間)になるための101のTIPS - Qiita
早く人間になりたい。 以下はEmma Wedekindによる記事、101 Tips For Being A Great Programmer (& Human)の日本語訳です。 101 Tips For Being A Great Programmer (& Human) 1. Get good at Googling Googleの使い方を知ろう。 プログラマであるということは、問題に対する答えを探す能力があるということです。 Googleのうまい使い方を知ることで、開発にかかる時間を大幅に節約することができます。 2. Under promise and over deliver 約束は控えめに、出来高は多めに。 タスクに2週間かかるようなら3週間かかると伝え、2週間で提出しましょう。 期待を上回った結果を出すことで、信頼を築くことができます。 3. Be nice to your d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
direnvを使ってgitのユーザ名とメールを切り替え - Qiita
