Next.jsプロジェクトに追加したい設定11個 - Qiita
pnpmについて 私は普段、パッケージマネージャーにnpmではなくpnpmを使っています。npmよりパッケージインストールが高速であったり、ちょっと良い機能が付いていたりします。1 この記事の内容のほとんどはnpmとpnpmのどちらでも問題ないように書いているつもりですが、念のため前提として紹介させていただきます。 create-next-appの実行(オプション追加) create-next-appにはいくつかオプションがあります。私はいつも以下のようにしています。 # pnpmの場合 pnpm dlx create-next-app ./some-directory --ts --no-tailwind \ --eslint --app --src-dir --import-alias '@/*' # npmの場合 npx create-next-app ./some-director
Rust初心者殺しの文法10選 - Qiita
概要 この記事ではRust初心者が驚いたり混乱させられたりするようなRustの文法を10項目集めてみました。 これらの項目は知らないと理解できなかったりコンパイルエラーに悩まされたりする一見厄介なものたちなのですが、そのような直感的でない挙動を敢えてさせているところには重要な意味が込められていることが多いです。 そのため、これらの項目を通してRustが目指しているものや実現したい機能の一部を垣間見ることができると思います。 1. デフォルトの代入がムーブ Rustの最大の特徴が所有権の概念であることは有名ですが、それでもなお初心者殺しになるのがムーブです。 以下のコードがコンパイルエラーになるメジャーな言語は現状Rustくらいしか無いでしょう。 let mut a = vec![1, 2, 3]; let mut b = a; // ここでaの持つベクタの所有権がbにムーブされ、aは無効に
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
ユーティリティーファーストとTailwind CSSのススメ - Qiita
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a
WebTransportとWebCodecsを組み合わせてビデオチャットを実装してみる - Qiita
この記事は？ こんにちは。NTTコミュニケーションズのyuki uchidaです。普段はSkyWayというWebRTCプラットフォームの開発やWebRTCリサーチャー(見習い)をしています。 この記事は NTTコミュニケーションズ Advent Calendar 2020 10日目の記事です。昨日はy-i さんの記事、 「グループ内プログラミングコンテストをオンライン上で開いた件」でした。 前回、 NTT コミュニケーションズのアドベントカレンダー3日目の記事として、「WebSocketの次の技術！？WebTransportについての解説とチュートリアル」という記事を投稿しました。 WebTransportが出てきた背景や、双方向通信の歴史について解説しているため、興味があれば是非ご覧ください。 今回の記事は、そのWebTransportとWebCodecsを組み合わせてビデオチャットを実
�【Flutter】もう怖くない！アプリ内課金・定期購入機能を実装する方法を丁寧に説明してみた。 - Qiita
7月にFlutter開発を始めてから２作目、アイデアを発想するためのメモアプリ「アイデアメモ iX」をリリースしました。 走り書きをする感覚でサッとメモができ、さらにそのメモを組み合わせてシャッフルして表示したり、ランダムで過去のメモをピックアップしたり、アイデアのヒントになるようなワードを表示したり、アプリのアイデア出しにぴったりなアプリです。 ■AppStore https://apps.apple.com/jp/app/id1517535550 ■Google Play https://play.google.com/store/apps/details?id=com.IdeaShuffleMemoApp&hl=ja ■アプリの詳細記事 https://yukio.site/idea_shuffle_memo/ さて、このアプリを作成するにあたり、３つの機能を実装しようと取り組みまし
「ビジネスロジック」とは何か、どう実装するのか - Qiita
アプリケーション開発で、「ビジネスロジックは分離しろ」だとか「Controller にビジネスロジックを書くな」といったことをよく言われると思います。 しかし、ビジネスロジックという言葉の意味を聞いたり調べたりしてみても、「システムのコアの部分」とか「システムの目的になる処理をするところ」みたいなことを言われたりして、よく分かりませんでした。 そんな中、クリーンアーキテクチャや DDD の戦術的設計について学ぶことで、「ビジネスロジックとは何か」、「ビジネスロジックはどう実装するか」について、自分なりの考えが整理されてきたので、この記事ではそれをまとめます。 ※ 曖昧な言葉を自分としてどう使っているかという話になります。違う意味で使う方もいると思うので、ご注意ください ビジネスロジックとは何か 「システムのコアの部分」とか「システムの目的になる処理をするところ」といった説明も正しいとは思い
厳選TypeScript 〜おすすめしたいライブラリ、ツール、ノウハウ、情報源のリンク集〜 - Qiita
個人的にTypeScriptプロジェクトで使って良かったと感じたライブラリやツール、役立ったノウハウ・情報源へのリンクをまとめていきます。随時更新します。 記事更新時に通知を受け取りたい方はこの投稿を「ストック」してください。 追加された内容は更新履歴をご覧ください。 書籍 『実践TypeScript ~BFFとNext.js&Nuxt.jsの型定義~』 - JavaScriptからTypeScriptに来た人が読むと、JSとTSの差分を学ぶことができる本。 『JavaScript Primer: ECMAScript 2019時代のJavaScript入門書』 - すでにプログラミング経験がある人が読むとJavaScriptの文法や機能を中心に学ぶことができる本。TypeScriptを書くにもJavaScriptの知識が必要不可欠なので、雰囲気でJSを書いてきた人やちゃんとおさらいしたい
COVID-19の接触フェーズを追跡する技術たち - Qiita
コロナウイルス感染者が潜伏期間中に接触した可能性のある人を追跡することは感染症蔓延を防ぐために有効な手段であり、スマホなどのデバイスを用いてテクノロジー的に追跡技術を活用することで、より効率的にかつ正確に実現するための取り組みが多く発足している。 このような接触情報を直接扱うことの代表的な問題としてプライバシーがあげられ、ユーザーの位置情報などのセンシティブなデータが第三者に知られないようにする必要がある。 以下で紹介するプロジェクトはどれもベースの仕組みとしては同様で、ユーザーが所有しているスマホデバイスを使ったBluetoothのブロードキャストを利用する。Bluetoothを介して短期間のみ利用可能な擬似乱数値をブロードキャストし、近くのスマホデバイスはそれを保存する。 これはあくまでも擬似乱数なのでユーザーのアイデンティティや位置情報などのセンシティブな情報には一切関係しない。 そ
Firebase を利用したプッシュ通知の実装 - Qiita
はじめに 仕事で解決したいことがあり、Web Push と Service Worker（以下 SW）の利用を検討しようかなと思っています 調べると Firebase Cloud Messaging（以下 FCM）を使うと簡単に実装できそうだったので、サンプルアプリを作成してみようと思います 今回実装したコードは以下です https://github.com/kurosame/glossary FCM の設定（管理画面） 以下から初期設定を行う 管理画面上での設定は以上で、その後実装する上で必要な情報は「プロジェクトの設定」で確認できます Firebase の初期設定 以下の情報は「プロジェクトの設定」で見れます 隠してますけど、これらの情報は公開してもセキュアです ただし、Firestore などのリソースにアクセスできてしまうと思うので、使っている場合は適切なルールを設定しておく必要は
ラズパイ+魚眼レンズ+KinesisVideoStreamで低コストの防犯カメラ - Qiita
前置き/要件 子供が出入りするコワーキングスペースを運営するにあたり、安全のため店内に防犯カメラを設置したい。 店番がいなくなる時間帯が発生するため、撮影データはローカルではなく、クラウド保存にしたい。 ケーブルを這わせるのが面倒なので、有線LANではなく無線LANで。 なるべく低コストで。 参考記事 基本はこちら。ありがとうございます。 https://qiita.com/mksamba/items/86bdd70e7d289073cdc4 ぶっちゃけ、私の記事には、gstreamerの設定とコストくらいしか、追加情報ありません。 使用機材&サービス raspberryPi3 Model B+ 品薄で2019/10/21現在手に入らず。2台設置するので、1台はraspberryPi3 Model Bで構築 最終的にどちらがどちらだっけ？ という状況になるくらい、CPU負荷やメモリ負荷は変
レガシーサービスにおけるパフォーマンス改善 - 使われていないCSSを削除してくれるCLIを作った話 - Qiita
リクルートテクノロジーズ でフロントエンドエンジニアをしている@SW20_Toshiです。 本記事はRecruit Engineers Advent Calendar 2019 - Adventar 20日目の記事です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ 今回は、レガシーサービスにおけるパフォーマンス改善として、Puppeteerを使って不要なCSSを削除する取り組みを行いました。 ツールはOSSとして公開しているので使ってみてください！ サイボウズ株式会社のこちらの記事には大変お世話になりました！ ありがとうございました！ きっかけ 10年近くABテストや機能追加を繰り返してきたWebサービス.... 1画面に大量のCSSファイルが読み込まれていて、カバレッジ関しては目も当て
Goを始めて1年間で最高にお世話になったGo関連ブックマークを晒します。 - Qiita
自分は普段はChromeのブックマークを使ってよく見返す記事を保存しています。Goを一年間書いてきてブックマークを整理したのですが、せっかくなのでお世話になったブックマーク記事を晒します。 Blog & Serial The Go Blog Goの公式ブログ。深いところまでしっかり書かれているので、調べたいトピックはまずはここで調べたい。 https://blog.golang.org/ Practical Go GoのcontributorであるDave Cheneyさんのブログです。Goで開発&運用する上でのアドバイスが書かれており、入門記事だけでは得られないノウハウがふんだんにまとめられています。 https://dave.cheney.net/practical-go Goならわかるシステムプログラミング @shibukawaさんの連載です。Goで低レイヤーを学んでいきます。根底の
React Hooksとカスタムフックが実現する世界 - ロジックの分離と再利用性の向上 - Qiita
はじめに React HooksはReact 16.8 で追加された新機能であり、state などの React の機能をクラスを書かずに使えるようになります。 React Hooks以前は、ロジックの再利用がコンポーネントに依存してしまいロジック単独でのモジュール化が難しいという問題がありました。 しかしReact Hooksのカスタムフックという独自のフックを作成する機能を使うことで、Viewに依存することなくロジックだけを再利用することができるようになります。 この記事では、v1からv6まで改善していく様子を見て頂くことでReact Hooksの利用方法を紹介します。 今回の実例ではコンポーネントのコード量は以下のように削減されます。 実例紹介 コンポーネント間のページネーションを実装するuseLocalHistoryカスタムフックを作成します。 ブラウザのhistory APIのよ
3分でできる！最高のDockerfileを書いたあとにやるべき1つのこと - Qiita
概要 Dockerfileを書くためのベストプラクティスを読んで、ベストプラクティスなDockerfileを作った/作りたい人が対象です。 そのDockerfileで大丈夫かを3分でチェックできるツールをつくりました。Hadolintのような、単なるDockerfileのLinterではなく、ビルドしたイメージの中身まで細かく分析します。 通常のLinterでは原理的に不可能な、ベースイメージに存在している危険性も含めて調べることができます。 ←GitHubのStarもらえると嬉しいです。 Dockleの内部で使われているツールはTrivy, Vulsなどと同じなので、そのあたりを踏まえて、動作原理を別記事にまとめました。 人を震えさせるツール｢Dockle｣の仕組みを解説 なお、DockerHubで人気のコンテナに対して試した結果をサイトにして公開しています。操作方法もふくめて、別記事に
Redux の記述量多すぎなので、 Redux の公式ツールでとことん楽をする。 ( Redux Toolkit) - Qiita
2019/11/20 追記 当記事でメインに取り扱っていたライブラリ名が変更されました。Redux Starter Kit -> Redux Toolkit それに合わせて、本記事もアップデートしています。 追記終わり はじめに Redux Hooks がリリースされたおかげで、Redux の store とコンポーネントのつなぎ込みが簡単になりました。 今回は Redux チームが公式にリリースしている Redux Toolkit を利用すると、Action、Reducer 部分もかなり簡潔に記述できるというお話です。 Redux Hooks については以下の記事を参照してください。 Redux Hooks によるラクラク dispatch & states Redux Toolkit とは？ Redux チームが公式にリリースしているReduxを簡潔に記述するためのライブラリです。 ほ
30歳を過ぎて機械学習エンジニアに転身して半年になったのでこれまでやってきた勉強についてまとめる - Qiita
はじめに どうも、30過ぎて情シスから機械学習エンジニアに転身するという割と変態的なキャリアを形成しているものです。 これまでの自分の反省も元にどう勉強してきたか振り返ってみたいと思います。 もともと理系出身ですし、IT業界の経験自体はあるので完全未経験というわけでもないので、理系の情報系の学生さんとか、大学卒業してあまり年数が経たない社会人の方であれば参考になる部分があるのではと思います。 基本スペック 年齢…32 学歴…理系大学院修士修了。物理系(大学初年度の線形代数、微分積分、確率統計ならギリギリなんとかなる。Python機械学習プログラミングやはじめてのパターン認識を見て数式でつまづくことはほとんどない。) これまでのキャリア…ERPのパッケージ開発1.75年(Javaなど)→ネットワークエンジニア1.75年(ツール作成程度にPython)→社内SE3年(社内システムの企画/保守。
数時間で完全理解！わりとゴツいKubernetesハンズオン！！ - Qiita
社内でKubernetesハンズオンをやってみたのでおすそ分け。 参加者6人からバンバン出てくる質問に答えながらやって、所要時間4時間ほどでした。 SpeakerDeckにも資料を上げています。 https://speakerdeck.com/ktam1219/yaruze-kuberneteshanzuon (2019/07/11追記) 続編書きました！ -> 今度はあんまりゴツくない！？「わりとゴツいKubernetesハンズオン」そのあとに ハンズオンの目標 Kubernetesとお友達になる イメージを掴む 触ってみる(ローカル・EKS・ちょっとGKE) 構築・運用ができるような気分になる 巷にあふれるKubernetesの記事・スライドが理解できるようになる EKSがメインになっているのは、会社の業務でAWSを使うことが多いからです。 純粋にKubernetesを勉強したいだけな
React開発において便利なTypeScriptの型まとめ - Qiita
React開発において個人的に便利だなーと思っているTypeScriptの型をだだーっとまとめてみました。私自身もまだまだTypeScript修行中の身ですので、新たに気づいたものがあったら随時追記していきます。みなさんも「こういう使い方できるぜ！」みたいなのがあったら、ぜひ教えていただければと思います。 対象とする読者 最近ReactにTypeScriptを導入し始めた人 ReactにTypeScriptを導入してそこそこ経つけど、いまいち使いこなせてる気がしない人 TypeScriptにあまり詳しくない人でもわかるように説明しているつもりではありますが、以下の記事がTypeScriptの入門用に素晴らしいので、そちらを先に読むとスムーズに読み進められると思います。 TypeScriptの型入門 Partial React開発においてよく定義する型としてコンポーネントのpropsの型があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者が流れで学ぶDocker/Kubernetes超入門 - Qiita
