【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
【Python】東京23区の中古マンション販売価格予測をやってみた - Qiita
参考文献 今回、以下サイトを参考にさせていただき、また大変勉強させていただきました。感謝申し上げます。 SUUMO の中古物件情報を Tableau で分析してみる ～データ収集編～ SUUMO の中古物件情報を Tableau で分析してみる ～データ予測編～ 機械学習を使って東京23区のお買い得賃貸物件を探してみた 〜スクレイピング編〜 オープンポータル （オープンデータ活用サイト、競売、人口、駅） 1.準備:パッケージインポートなど 1.1 Google Driveへのマウント、パッケージのインポート ここでは、Google CplaboratoryからGoogle Driveへファイル書き出し、読み込みをするための準備や、今回使うパッケージのインポートを行いました。また、後ほどデータ加工用の関数群も予め定義しておきます。 #ドライブ設定 PATH_GMOUNT='/content/
弊社の執行役員に、#times_役員 なSlack分報を開設させるまでにやったこと全部書く - Qiita
「暴言吐かないように気をつけます」 暴言暴言書いているので念のためBOSS（社では執行役員ともいう）のお名前はマスキングしています。弊社の開発部のトップリーダーに彼自身の「分報」を開設させる、という今年前半の社内コントリビューションを自慢するために書いています。 関連: Developers Summit 2022に登壇したので、その感想🍬 - Qiita 「弊社の執行役員に、#times_役員 なSlack分報を開設させるまでにやったこと全部書く」。BOSSは尊敬している。だからこそもっとBOSSと気楽に話したい、仲良くなりたい、BOSSの考えていることを知りたい、でも話しかけるのは緊張しちゃう、いつでも話していいよ？ムリ～～... そんな悩みをもつ方やチームの参考になれば嬉しいです。 結論: 地道なお互いの信用獲得。それは狩猟ではなく農耕 結論から。地道にお互いと全方位的な信用獲得を
【Unity】Googleドライブとスプレッドシートでお知らせ機能実装（専用サーバー不要） - Qiita
本記事で出来るコト お知らせ機能を「Googleドライブ」と「Googleスプレッドシート」で作ります。 はじめに ゲームクリエイターのべすとまんです。 突然ですが、自分の開発するゲームに「お知らせ」を実装したくなることありませんか？ 本記事では、Googleドライブとスプレッドシートを使用し、Unity製のゲームへお知らせ機能を実装する方法を紹介します。 もちろん専用のサーバーを用意する必要もありません！ 注意点 キャッシュせずに実行するたびに画像をダウンロードする方法のため、容量の大きい画像を指定すると通信料が大きくなる可能性があります。 600ユーザー以上からのアクセスがあるとアクセス制限がかかる、などのGoogle側の制限（参照： 共有ドライブの制限）があるため、大規模ゲームへの実装は非推奨となります。 Googleへのアクセスができない環境での動作確認は行っておりません。 たまに
無料で使える航空写真とOpenDroneMapを利用して、あなたの街の3Dデータ（点群）を作成する！ - Qiita
（今回作っていく広域点群データの完成図です） 3Dデータを有効に可視化したい PLATEAUのデータを利用することで、地図 + 地形データの上に詳細な建物データを配置するなど3Dデータを活用したリッチな表現が比較的簡単に出来るようになりました。 が、3Dモデルはテクスチャ（ビルの外観など）を貼り付けるとWeb地図上ではかなーり動作が重たくなってしまう上、モデルが整備されていない・もしくは整備されているが、詳細な形状がモデリングされておらず四角い箱になっていたり、テクスチャが存在しなかったりする都市だと、こんな感じでちょっと寂しい絵面になってしまいます。 そこに、詳細な色付き点群データを利用して乗っけると一気にリッチな感じになりますね！ 詳細な広域3Dメッシュモデルがテクスチャ付きで整備されていれば、それを利用すれば良い話ではあるのですが、全国分整備するにはお金も時間もかかります。 なので、
WHERE 条件のフィールドを UPDATE するのって，明示的にロックしてなくても安全？全パターン調べてみました！ - Qiita
WHERE 条件のフィールドを UPDATE するのって，明示的にロックしてなくても安全？全パターン調べてみました！MySQLSQLPostgreSQLDatabaseQiitaEngineerFesta2022 TL; DR MySQL/Postgres とも， MVCC アーキテクチャの恩恵で， SELECT と UPDATE は基本的には競合しない。 単一レコードのシンプルな UPDATE でも排他ロックされ，排他ロック中のレコードへの UPDATE での変更操作は トランザクション分離レベルによらず ブロックされる。UPDATE 文に含まれる WHERE 句での検索もブロックされ，これはブロックされない SELECT による検索とは別扱いになる。 但し UPDATE 文の WHERE 句上で，更新対象をサブクエリの SELECT から自己参照している場合は例外。トランザクション分離
障害報告書を書こう！ - Qiita
担当しているITサービスなどに何かしらのインシデントや障害が発生した時に、対処後のアクションとして報告書を提出して事象の内容を報告（レポート）する場合がある。 提出先は会社の偉い人だったりクライアントだったり。場合によってはユーザー向けに発表したり。事の顛末を報告して「今後同様のことを起こさないように努力します、ごめんなさい」をするのだ。どのように再発防止の努力するのかを書くものでもある。 主にクライアント向けのビジネス内容ではあるが、自分が使っているテンプレパターンを共有するので参考にしてもらえればと思う。1 全般的なポイント 心得のようなもの。次の点は留意してて欲しい。 淡々と冷静な説明をこころがける 当然のことながら事実は脚色しない。無駄な修飾も要らない。客観的な事実を簡潔に述べる。 例： ❌「一生懸命頑張って対応したが…」 ❌「寝ないで対応したが…」 ❌「本当の原因は…」 できるだ
Pythonファイルを超簡単にexeファイル化するGUIソフト - Qiita
auto-py-to-exeというpyinstallerをGUI化したソフトが便利です。書くのが煩わしいspecのadd-data等をマウス操作で簡単に追加できちゃいます。 操作のデモがこちら auto-py-to-exeのレポジトリはこちら pyinstallerのspecの書き方はこちら インストール方法
リーダブルコードの要点整理と活用法をまとめた - Qiita
はじめに 2022年で新卒エンジニア2年目になりコードレビューの機会が増えてきたので、1年振りに「リーダブルコード」を読み直しました。 リーダブルコードを読んでいく中で要点を整理し、実務の現場でコードを書いたりレビューをする際にどのように活用していけば良いのかを自分なりにまとめてみました。 この記事を読むことで、リーダブルコードの要点と初級者から中級者目線で実際の現場でどのように活用すればよいのかが学べます。 この記事の主な対象者 リーダブルコードの要点をサクッと知りたい人 初級~中級者(実務歴1~3年目)の人 コードレビューの機会が増えてきた人 これまで我流でコードを書いてきた人 リーダブルコードについて リーダブルコードはあくまで「こう書きなさい」と押し付け口調ではなく「こう書いた方がもっとよくなるよ」といった丁寧な語り口で書かれています。 それを踏まえた上で要点や活用方法をまとめてい
Laravel の認証・認可パッケージが多すぎてわけわからんので図にまとめた - Qiita
元ネタ @localdisk さんの記事です。 こちらで概ね適切に説明されているものの，文章のみで図が無くて直感的に把握しづらいので，初心者にもすぐ飲み込ませられるように図に描き起こしてみました。 図 解説 illuminate/auth: 最小限の認証認可コアロジック コアコンポーネント群の laravel/framework に含まれているものです。 Socialite 以外のすべてのパッケージが，実質このコアに依存していることになります。 以下の記事でこのパッケージの詳細について説明しているので，ここでは端折って説明します。 伝統的 Cookie ベースのセッション認証 こちらでも解説している， 「Cookie に識別子を載せ，それに対応する情報はサーバ側のファイルに記録する」 という手法に近いものです。 実装は illuminate/session にあり， PHP ネイティブのセ
サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
ここがつらい！ Slack API - Qiita
半分ネタ記事です。あんまり真面目に書きません。 項目数が多いので，気力でなんとか書きます。分類は諦めます。 他にもある！っていうのがあったらコメント欄で教えて下さい。気が向いたら追記します。 公式の TypeScript 型定義がもはや型定義を諦めている 辛い度: ★★★★★ 辛い中でもこれはかなり上位に来るやつ。 こちらに OpenAPI 形式で仕様が定義されていて， https://github.com/slackapi/node-slack-sdk/tree/main/packages/web-api/types ここに仕様に基づいて TypeScript の型定義ファイルが吐かれるようになっています。 Git 管理されていないので，実際のリリースを見てみましょう。 https://unpkg.com/@slack/web-api@6.7.2/dist/response/Reacti
脆弱性診断につかえるツール集 - Qiita
概要 自宅サーバのセキュリティチェックをして見た。 脆弱性診断ツール nikto niktoは、Web アプリケーションセキュリティスキャナー。 $ sudo apt install nikto -y $ nikto -h localhost - Nikto v2.1.5 --------------------------------------------------------------------------- + Target IP: 127.0.0.1 + Target Hostname: localhost + Target Port: 80 + Start Time: 2019-08-23 22:26:00 (GMT9) ---------------------------------------------------------------------------
初心者プログラマーのための変数/関数/メソッドの英語命名規則 - Qiita
はじめに 「なんか、レビューのたびに変数名を指摘されてる気がする...」 「日本人なんだから、英語で命名とか無理...」 こんなお悩みありませんか？ この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します！ これであなたも駆け出しエンジニアを卒業できるかも!? ※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。 プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。 対象者 この記事は下記のような人を対象にしています。 駆け出しエンジニア プログラミング初学者 PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中 前提知識 下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。 三単現のsって何？ 5文型(SV/S
わかりやすいシステム構成図の書き方 - Qiita
わかりにくいシステム構成図とは こんなシステム構成図を書いてないでしょうか？ このシステム構成図のわかりにくい点が３つあります。それは 製品名は書いてあるが「役割」が書いていない データと処理が区別できない データの流れと制御の流れが区別できない の３つです。 わかりやすいシステム構成図 これら３つのわかりにくい点を改善したわかりやすいシステム構成図が↓です ポイントを解説していきます ポイント1. 製品名称ではなく「役割」を書く システム構成図には製品名称ではなくシステムコンポーネントの「役割」を書きます。 役割とは、例えば〇〇データや〇〇処理といったことであり、それを読むだけでシステムの動きを理解できる文字列です。役割をかかずに製品名称のみを書いてしまうと、その製品を知らない人が見たときに理解できません。例えば「Cloud Pub/Sub」という製品はGCPというパブリッククラウドの分
個人サービスを公開するまでに必ずやるべきこと - Qiita
はじめに 個人サービスを公開するまでに必ずやるべきことがあるのですが、思い出すのに時間が掛かってしまったり、「事前にやっておくべきだった...」と毎回思います。ここら辺の情報は調べてもまとまっている記事がなかったので私なりにチェックリストとしてまとめてみました。難しいことは一切なく（経験者には当たり前なことかも？）、比較的簡単に出来るものを書かせて頂きますので気軽に読んでいただけると嬉しいです。 前提 僕は個人サービスを公開する上で集客に重きを置いています。後述するやるべきことは集客をベースとした内容であり、サービスを利用する上で必ず必要ではないということをご理解ください。また、WEBの要素が強めなので、モバイルアプリ等の開発者は参考にならないことが多いと思いますのでご了承ください。参考までに僕が個人開発しているサービスです。Gmailのようなツール寄りのサービスではなく、キュレーションサ
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
君のGitHubリポジトリをもう一段階上のレベルに引き上げよう - Qiita
Original article:https://dev.to/eludadev/take-your-github-repository-to-the-next-level-17ge 以下はEluda( Twitter / Twitter日本語 / GitHub / dev.to )による記事、Take Your Github Repository To The Next Level 🚀️の日本語訳です。 Take Your Github Repository To The Next Level 🚀️ 私はもうずいぶんと長いことGitHubを使っていますが、その過程において私は、完璧なGitHubリポジトリを作るためのガイドを集めてきました。 この記事は、そのガイドたちの集大成です。 それではさっそく始めていきましょう！ Step 0. Make Your Project More D
個人開発したWebアプリに基本的なSEOを実践したので全部書く - Qiita
集客としてのSEOの重要性 個人開発者の多くが悩む、集客。 せっかく作ったのに誰も使ってくれない、というやつです。 集客の手段は様々ありますが、よくあるのが主に以下の５つです。 広告 SNS運用 口コミ SNSにおけるバズ 検索流入(Google, AppStoreなど) この中でもお金がかからず、時間的コストもかけず、運に頼らないもので、 長期的に安定して集客ができるのは「検索流入」です。 SEOはその検索流入を最大化させようという取り組みになります。 対象読者 ツール系のWebアプリの検索流入を増やしたい個人開発者を対象としています。 SEOで検索をするとブログやメディアを対象とした解説記事が多く見つけることができますが、ツール系のWebアプリを対象としている記事は少ないという印象です。 また、内容としては「キーワード選定」と「タイトル、h1タグの設定」という超基本的(でも一番大事だと
VSCodeおすすめ設定大公開！！おすすめ拡張機能も - Qiita
はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
