結局useMemoはいつ使えばいいの？ 僕の決定版 - Qiita
皆さんこんにちは。筆者の以前の記事では、ReactのuseMemoを無駄に使うことによるレンダリング速度のオーバーヘッドがどれくらいかをベンチマークによって示しました。 それによれば、スマートフォンを想定したとしても、useMemoだけで描画に目に見える影響を与える（16msくらいの遅延を発生させる）には万のオーダーのuseMemoが必要なことが分かります。 速度ではなくuseMemoを使うことによるメモリ消費量の増加を気にする声も聞かれましたが、すみませんが筆者はそこまでメモリクリティカルなアプリをReactで書いたことがなく知見に乏しいため、今回はこの記事の対象外となります。 この結果が出たことでuseMemoをいつ使うのかなどという議論には終止符が打たれたかと思いきや、上記の記事の感想などを見ているとまだ喧々囂々です。 そこで、この記事では筆者の考えを皆さんに共有し、いよいよもってこ
Reactのプロジェクトをカスタムドメインを使用してGitHubPagesで公開する方法 - Qiita
今回はReact(TypeScriptベースでも構いません)のプロジェクトをGitHubPageで公開する方法を記事にまとめたいと思います。 ※レンタルサーバーなどは利用しません。 ※この記事を読む前にドメインを取得しているとスムーズに進みます。（ステップ4） ※今回ドメインの取得はムームードメインにて行いました。 （別のサービスでも同様にできるかと思います） なぜこの記事を書こうとしたか 自分なりに色々と調べましたが、中々良い記事が見つからず、解決するまで約5日ほどかかってしまったからです。 また、日本語でReactのプロジェクトをGitHubPagesで公開するやり方をまとめた記事が少なかったことも理由となります。 早速始めましょう🔥 環境 Editor VSCode React 18.2.0 node 16.14.0 npm 8.7.0 yarn 1.22.17 MacOS Mon
Terraformを使ってAWSのVPCをはじめとしたネットワークを構築しよう！ - Qiita
概要 今回はTerraformを使って VPC パブリックサブネットとプライベートサブネット IGW ルートテーブルおよびルーティングの設定 Elastic IP NATゲートウェイ を構築したいと思います 今回作成するインフラ構成は下記の図のようになります 前提 東京リージョンを使用 AWSを使用 main.tfとvariables.tfを設定済み ネットワークに関する基本的な知識をある程度持っている 上記のファイルをまだ作成していない方は下記の記事を参考にしてください AWSにおけるネットワークの概要について知りたい方は以下の記事を参考にしてください また、コンテナ経由でTerraformを使用すると複数ブロジェクトで使用する際にバージョンによる違いを意識せずに済みます コンテナを使用したい方はこちらの記事も参考にしてみてください ディレクトリ構成 構成は以下の通りです # -----
シェルスクリプトでlsをパイプでつなぐのはなぜ悪いのか ～ ShellCheck: SC2010, SC2011, SC2012 とファイル名改行問題 - Qiita
シェルスクリプトでlsをパイプでつなぐのはなぜ悪いのか ～ ShellCheck: SC2010, SC2011, SC2012 とファイル名改行問題ShellScriptUNIXshellシェル芸POSIX はじめに シェルスクリプトで ls コマンドの出力結果（ファイル名一覧）をパイプで他のコマンドに渡して処理するのは推奨されません。ls コマンドを使ったコードを ShellCheck で検査するとおそらく問題があると警告が表示されるでしょう。ls を使うなという指摘自体には賛成なのですが SC2010、SC2011、SC2012 に書いてある理由については正しい説明がされていないと思っています。この記事ではなぜ ls の出力結果を他のコマンドにパイプで渡すのが悪いのか、ls を使わずに実現するにはどうしたら良いのかを解説したいと思います。一つ補足をしておくと、この問題は CLI コマ
moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴： moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン（時間帯）指定に対
TypeScript 10年の歩み - Qiita
TypeScriptは、2022/10/01に10周年を迎えました。 ということで、それを記念してMicrosoftの中の人が振り返りのエントリーを書いていました。 以下は該当の記事、Ten Years of TypeScriptの紹介です。 Ten Years of TypeScript 2022年10月1日は、TypeScript10歳の誕生日です。 10年前の今日、2012年10月1日に、TypeScriptは初めて公にされました。 The Early Days 初めてTypeScriptが表に現れたとき、それももっともなことでしたが、多くの否定的な意見がありました。 一部のJavaScriptユーザにとって、JavaScriptに型を強制する試みは冗談か邪悪な陰謀のように見えたかもしれません。 しかし、その試みには、多くのメリットがありました。 型チェックのおかげで、ファイルを保存
Google Mapよりすごい！と噂の位置情報サービスを使ってみた - Qiita
こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。 仕事で位置情報サービスを軽く調べる機会があって、せっかくなので調べた内容を記事にしたいと思います。 位置情報（地図）サービスといえば、Google Mapを思い浮かべる人も多いのではないでしょうか。私もGoogle Mapのヘビーユーザー＆ファンで、カーナビの代わりとして使ったり、街で見つけた史跡の写真等を2000件以上投稿したりしています。 B2Cのサービスの中ではGoogle Mapが圧倒的な存在感を放っていますが、B2B向けのサービスとなると様相が異なるようです。今回は、ある調査でB2B向けサービスの中ではGoogle Mapより高い評価がついていた「HERE」というサービスについて書きます。 Google Mapよりすごいと言われる所以はなにか Omdiaのレポートによると、B2B市場の位置情報サ
名前空間をさっくり理解する - Qiita
名前、つけてますか？ PHPにはnamespace(名前空間)という言語機能があります。 原初のPHPにはなかったのですが、PHP 5.3くらいからあるので、まあ平安時代には成立していたということです。それ以前の時代は App_Http_Controllers_User のような _ 区切りの擬似名前空間が用いられていたことがありました。現在では App\Http\Controllers\User のような \ 区切りの名前空間が利用できます。 名前空間付きのコード 名前空間が見慣れないという方のためにnamespaceのあるコードとしてLaravelで自動生成したControllerファイルの例を先に出しておきます。 <?php namespace App\Http\Controllers; use App\Models\Book; use App\Http\Requests\Store
コマンドを使わずに理解するGit - Qiita
この記事はNuco Advent Calendar 2022の7日目の記事です はじめに 株式会社Nucoでエンジニアをしている@noshishiです。 今回は、ついついその場限りのコマンド実行で乗り越えがちなGitを、コマンドを使わず理解するための記事を書こうと思います。 Gitとは バージョンを管理し、作業を分散する Gitは、分散型バージョン管理システムと呼ばれるソースコードの管理システムの1種です。 Gitは、ファイルの変更履歴（バージョン）を記録・追跡することで、過去と現在のファイルを比較し、変更点を明らかにすることで、円滑に開発作業を進めるためのツールです。 また、一度に複数の開発者がファイルを編集できるシステムなので、作業を分散して行うことができます。 Gitを使うということ まず、みんなで共有できる保存場所（以下、リモートリポジトリ）にあるファイルなどを、手元のパソコン（以
フロントエンド(React)の技術質問 - Qiita
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は、現場で後輩に質問されたReactの技術質問をまとめていきます。 なお質問に対しては一問一答形式で答えるのではなく、深ぼって解説をしていきます。 この記事の対象者 フロントエンジニアを目指している人 React初心者から中級者 Reactの質問をされた時にうまく言語化できない人 この記事の目標 Reactでよく使われている技術を言語化できるようになる 何となくの理解から脱却する おことわり 本記事は面接等で聞かれる質問テンプレート集ではありません 現場で後輩に聞かれた質問を深ぼって解説をするノリで書いてます Reactフックとは何か？ Reactフックは公式ドキュメントにおい
納品ドキュメントの作成にMarkdown+Vivliostyleを採用した話 - Qiita
こんにちは、製造業でソフト開発エンジニアをやっているとみー(@tommyecguitar)です。 会社で納品物の説明ドキュメントを作ることがあり、その時にMarkdownでの組版をやってみたので、どう運用したか、困ったところ、いい点、悪い点をまとめてみようと思います。 Vivliostyleで組版したブログはたくさんあるので、見た目がどんな感じにできるかなどはそちらを見ていただくか、Vivliostyleのサイトをご覧ください。 Wordじゃだめなのか。 製造業で何かしら長大なドキュメントを作るとなったら、大抵はWordを複数人数で編集するという運用をしているところが多いと思います。 しかし、Wordにはいろいろと悪いところがあります。 チーム内で共同編集すると、編集したところが消えたり、フォントやデザインがなぜか統一されなかったりする。 セクションごとに担当を分けても、マージが手作業にな
Intl.DateTimeFormat による明治以前の和暦の扱い - Qiita
TL;DR 少なくとも Chrome, Firefox, Edge の実装において、明治改暦以前の日付について、 Intl.DateTimeFormat の返す和暦は多分に怪しいです。 元号の始まりは、実際の改元日ではなく、和暦1における改元日の月日を西暦2（グレゴリオ暦3/ユリウス暦4）における月日と解釈した日となっている。 南北朝時代の元号は、南朝の元号と北朝の元号とが混在しており、年の数値も正しくない。 初期の元号については、通説と異なる扱いとなっている。 動作確認環境 本記事では以下のブラウザでの挙動について記載します。 Google Chrome 83.0.4103.116 Mozilla Firefox 78.0.1 Microsoft Edge 83.0.478.58 ※ 因みに Internet Explorer 11 では挙動が異なりました（1867年以前の日付は常にエラ
ER図の自動生成について、dbdiagram.io, DBeaver, A5M2 を比較してみる。 - Qiita
はじめに データベース設計のER図について、自動で生成する以下３つのツールを比較した記事です。 dbdiagram.io DBeaver A5:SQL Mk-2（A5M2） 先日、こちらの記事をQiitaに投稿したところ、多くの方に記事を見ていただき、コメントも多数いただきました。 ER図に関するお勧めのツールをコメントいただく方が多くいらっしゃいました。 今回はその中から、無料でも利用できる3つのツールの「ER図の自動生成」の機能を試します。 比較の結論としては、〇〇が一番良いという感想ではなく、どのツールも多機能で、できることは違うので、今後使うときは用途や業務の環境によって使い分けていけたらと思っています。 目次 それぞれのツールについて、下記の内容を書いていきます。 1. dbdiagram.io 1-1. 始める 1-2. 使う 1-3. 感想 2. DBeaver 2-1. 始
JavaScriptにセミコロンは入れるのか？入れないのか？ - Qiita
結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第１のルール：セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ
「取り返しのつかないことをしない」 - Qiita
「取り返しのつかないことをしない」 昔、同僚と議論していて口走った言葉です。実はプログラマーとしてわりと重要な考えなのではないかと思います。 例: EC2のパブリックIPをスマホアプリに直書きする スマホアプリ向けの静的ファイルやバックエンドAPIをAWSに実装した際、最初はスモールスタートだと言うことでEC2インスタンス1台の構成にしたところまではいいが、インスタンスに自動で割り当てられるIPアドレスをスマホ側で直接参照する実装にしてしまった。 こうなると、AWS側はアーキテクチャを変えるどころか、EC2インスタンスを再起動することすらできません（再起動するとIPアドレスが解放されてしまう）。スマホアプリをアップデートして、IPアドレスを直接参照するのを止められればいいのですが、一度公開したアプリを100％アップデートするのは事実上不可能です。 最初にRoute53でホスト名を解決するか
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
本稿では、アロー関数とfunctionキーワードを使って定義される関数を区別するため、functionキーワードを使うほうの関数を「通常関数」と呼ぶことにします。英文で見かけるregular functionの翻訳になりますが、これは公式の用語ではなく、解説の便宜上のものとご理解頂ければと思います。単に「関数」というときは、通常関数とアロー関数どちらも指すこととします。 関数の歴史 歴史的に見ると、通常関数は古くからある言語機能であるのに対し、アロー関数は新しいものです。アロー関数はES2015(ES6)で導入されました。導入にあたっては、関数を短く書きたい、thisを束縛したくないという2つの理由があります。 通常関数とアロー関数の性質の違い 通常関数とアロー関数では、構文が違うというのは見て分かると思います。構文についての違いはここでは解説しません。 ここでは、文法以外の相違点をひとつ
React脳によるUIライブラリ書きやすさランキング - Qiita
前回のおさらい 前回の記事では、Reactに有利なベンチマークでUIライブラリに競ってもらいました。 こういうベンチマークに対しては、「実務では〜」みたいな反応が一定数出てくるのが自然の摂理です。 書きやすさランキング そこで、シリーズのまとめとして、より実務に近い指標として「書きやすさ」で競ってもらおうと思います。ただし、今回は筆者の独断と偏見によるランキングとなります。せっかく6つのライブラリで同じアプリケーションを書いたので、感想を記事にして残しておきたいという意図です。筆者と同じくReact脳の方にとっては参考になるかもしれません。 なお、前の記事を読んだ方はお分かりの通り、今回書いたアプリケーションはコンポーネントが何個かのものであり、React以外の知識は公式ドキュメントを一通り読んだ程度です。したがって、今回のランキングはコンポーネントの書きやすさに着目しています。大規模開発
Node.jsを過去の物にする最速の肉まん - Qiita
その名はBun ﾃﾞﾃﾞﾝ BunはNode.jsやDenoのようなJavascriptランタイムです。(2022/7/8現在ベータ版) ちなみにロゴが本当に肉まんなのかはわかりません。（赤ちゃんの頭にも見えるけど名前がBun/パンだしなぁ...) この記事ではNode.jsやDenoと比較をしつつ、bunの解説させていただきます。 割となんでもできる Bunはただのランタイムではありません。下のように、開発に必須の多くな機能を最初から有しています。 TypescriptからJavascriptへのトランスパイル jsxからJavascriptへのトランスパイル npmのようなパッケージのインストール&管理 webpackのようなプロジェクトのバンドル化 もちろんランタイムなのでNode.jsのようにサーバーでJavascriptを実行することも可能です。 これらに加えてBunには様々な機
新卒1年目に使ったエンジニア質問テンプレート - Qiita
はじめに 今回は新卒1年目の時に自分が先輩エンジニアに質問する際に使っていた質問テンプレートを紹介します。 自分は相手に質問する時は「いかに相手の時間を取らずに解決まで至れるか」を重視して質問を考えています。 いきなり「OOがわからない」「OOのエラーが解決できない」「〇〇が動かない」といった答えを全て相手に丸投げするような質問をしていては成長はおろか、相手から「この子は自分で考えない子なんだな」と思われてしまいます。 そこで今回は初心者が先輩に質問する際にどのような手順で質問を作成すればよいかをテンプレートとして紹介します。 エンジニアとは書いているものの他の職種にも応用できるようなテンプレートだと思うので、ぜひ参考にしていただければなと思います。 この記事の主な対象者 新人エンジニア 質問の仕方が分からない人 エラー解決に時間を大幅に使ってしまう人 Google人工知能開発チームの15
React、過剰に複雑な代物。 - Qiita
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
