JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
CSS設計とは何だったのか？と、コンポーネント環境との関わり
HubSpotやCSS設計に明るい半田のウェブサイトです。 ウェブサイトの本質は情報を伝えることですので、それを言い訳にデザインは全体的に工事中です。 みんな大好き、あるいは大嫌いなCSS設計。そんな言葉が生まれてから久しく、JavaScriptフレームワーク（以後JSフレームワーク）を始めとする技術が提供するスコープ付きのコンポーネント環境の登場によって、そのなりを潜めている気がしなくもない。 そんなCSS設計とは何だったのか、をちょっと小難しく振り返ってみます。 なお本記事では、区別のためCSS設計が「再利用可能なパーツ」とみなす単位を（あるいは慣習的に）「モジュール」、JSフレームワークにより提供される単位を「コンポーネント」と呼びます。 CSS設計が行っていたこと 「CSS設計」と聞くと Block__Element–Modifier という形式の長ったらしいクラス名を付けることだ
ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
スレッドとプロセスの違いを完全に理解する
はじめに こんにちは、FarStep です。 プログラミングを学ぶ中で、「プロセス」と「スレッド」という言葉を耳にしたことがある方は多いと思います。 しかし、これらの違いを明確に説明できる自信がない方も多いのではないでしょうか。 本記事では、プロセスとスレッドの違いについて、エッセンスを抽出して 解説します。 説明を簡潔にしましたので、本記事は 5 分程度で読み終えることができます。 本記事の内容を自分の言葉で説明できるようになれば、プロセスとスレッドの違いの理解は十分でしょう。 それでは、始めます 🚀 プログラムとは プロセスとスレッドの違いを理解する前に、まずは「プログラム」について理解しましょう。 プログラムとは、プログラミング言語で書かれた一連の命令 のことです。 プログラミング言語の例としては、以下のようなものがあります。 C 言語 Java Python Ruby JavaS
今すぐ使える！ ChatGPTで欲しい回答を生み出す「プロンプト」の書き方 その基本パターンを解説
ChatGPTを使ってはみたものの、思うような出力（回答）が得られずに「使い勝手が悪い」と感じていないだろうか。もしかしたら指示や質問の仕方に改善の余地があるかもしれない。本稿では、ChatGPTなどの生成AIをよりうまく扱うための「プロンプティング」の基本について、知識を整理していこう。 生成AIをコントロールするスキルが重要になってきている そもそも、ChatGPTのような生成AIをコントロールして、目的に沿った出力を得るためには、ユーザー側が指示や質問の仕方を工夫する必要がある。 例えば、生成AIに対して「仕事先に送るメールを書いてください」という指示と、「あなたは営業・マーケティングのプロです。先月ラインアップに追加された新商品の認知を広める目的で、現在の顧客に対して、メールマガジンを送ります。その導入文を書いてください」という指示では、出力結果が大きく異なってくる。 このようにA
ChatGPTの精度を上げる、あらゆる質問の最後に置く「命令」 優秀な壁打ち相手を作る、「チャットAI力」の高め方
クリエイターに出会ったり、もっとファンになったり、noteで創作をつづけたくなるようなイベントを開催する「noteイベント」。今回は「チャットAI使いこなし最前線」をテーマに、黎明期からチャットAIを活用しているnote CXOの深津貴之氏が登壇しました。こちらの記事では、ChatGPTユーザーの悩みを解決するプロンプトなどが語られました。 ChatGPTユーザーの悩みを解決するプロンプト 徳力基彦氏（以下、徳力）：まず今日はChatGPTの使い方をしっかり覚えていただきたいと思います。ここで「深津式汎用プロンプト」。 深津貴之氏（以下、深津）：僕は1個1個、個別の例を出すのはあんまり好きではないです。さっき言ったように原理原則を1個理解すれば、全部その原理原則から引っ張れる方向が好きですね。 なので今日も、細かいプロンプトを出すよりは、だいたいあなたの悩みのすべてを解決するプロンプトを1
エンジニアのための最小コミュニケーション術 - Qiita
はじめに こんにちは。元ガチプログラマーのプレイングマネージャです。 できれば、プログラムをカタカタ打ってPC画面に向かって「いい感じのコードを書いちゃったなぁー」と独り言だけを言っていたい人間だったのですが、それだと仕事にならないなあと。 ということで最小限のコミュニケーションで仕事をする方法について考えたことをまとめておきたいと思います。 最小コミュニケーション術 『プロジェクトのゴールに対する』自分や相手の課題を解決できるようにコミュニケーションをとることが、コミュニケーションを最小にする方法と考えます。 相手の課題を解決するために自分となんらかの調整が必要なケースでは、相手の課題が解決するまではコミュニケーションが継続されますし、自分の課題についてもまたしかりです。 相手の質問の裏には、相手のプロジェクト上の課題が必ず存在します。相手の質問にそのまま答えても相手の課題が解決しなけれ
ウェブアクセシビリティ対応、どうすれば？ 法改正のポイントと5つのステップを解説｜Goodpatch Blog グッドパッチブログ
アクセシビリティ？ ウチの会社のウェブサイトは大丈夫なの──。 法改正によって、障害のある方への「合理的配慮の義務化」が、2024年4月1日をもって民間企業にも適用されることを受け、ウェブデザイン分野ではアクセシビリティ対応の機運が高まっています。 とはいえ、「法改正で何が変わったのかよく分からない」「ウェブアクセシビリティってどうすれば対応できるの？」といった疑問を持つ方も少なくないはず。そこで、この記事ではいわゆる「法的義務化」の潮流を解説しつつ、アクセシビリティの基本を押さえていきます。 アクセシビリティの考え方は、ウェブに限るものではありません。他のプラットフォームでのソフトウェアデザインや物理的なモノや空間のデザインにおいても、普遍的に重要な視点です。ぜひ、この機会に一緒に学んでいきましょう！ なぜ「ウェブアクセシビリティ」に注目が集まっているのか？ まず前提として触れておきたい
「何をやっても駄目だった」ポンコツの自分を救ってくれたマインドセット - メソッド屋のブログ
先日 エンジニアType さんから取材『牛尾剛さん、『世界一流エンジニアの思考法』って本当に日本でも実行できますか？(仮）』を受けました。私は「日本で出来ないことは何一つありません」と回答しました。私が日本にいるときに実際に実施したアクションや、実際にやってみた事例などをご紹介しました。 それは、私が自信に満ち溢れた人物だからではなく、幼少のころから自己肯定感も低く、何をやっても上手くいかなかった自分を救ってくれたちいさな「マインドセット」があったおかげです。 「何をやっても駄目だった」ポンコツの自分を 救ってくれたマインドセット このマインドセットは『日本では一見難しそうな何かを実現すること』に対しても過去の人生でとても有効でした。同じような悩みを持つ人のために、エンジニアTypeさんの記事のフォローアップとしてこちらにも書いてみることにしました。それは小さなマインドセットのチェンジなの
「あとで読む」タグで振り返る2023年 〜今年の「あとで読む」、今年のうちに〜 - はてなブックマーク開発ブログ
今年も残すところあと少し。皆さんにとって、2023年はどのような一年でしたか？ はてなブックマークでは今年もたくさんのエントリーがブックマークされ、コメント欄も盛り上がりました。 データで見る「あとで読む」 年末ということで、2021年・2022年に引き続き今年も「あとで読む」タグにフォーカスしたデータを集計しました。全ブックマークを対象にした「あとで読む」率、カテゴリー別「あとで読む」率、「あとで読む」が多いエントリーランキングを通して、2023年のはてなブックマークを振り返ってみましょう。 全ブックマークを対象にした「あとで読む」 率 カテゴリー別 「あとで読む」 率 「あとで読む」 タグが多いエントリーは？ トップ10ランキング 「あとで読む」タグの数が多かったエントリーランキング カテゴリー別「あとで読む」率の高かったエントリーランキング 気になった記事を気軽に保存できる「あとで読
【2024年最新】モダンフロント学習教材まとめ - Qiita
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
全エンジニア必見！情報収集のためのリンク集 - Qiita
この記事はNuco Advent Calendar 2023の12日目の記事です。 はじめに 技術は目まぐるしく変化・進歩していて、トレンドに追いつくには、まず信頼できる情報源が必要です。 このリンク集では、エンジニア向けのコンテンツを種類別に紹介します。業界の最新ニュース、学術論文、実践的な動画解説、そして専門家のコミュニティなど多様なリソースをまとめました。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 知識共有コミュニティ Qiita 言わずもがな、国内最大級のコミュニティサービスです。言語・分野ごとのタグがあり、どのエンジニアにとっても使いやすいサイトになっています。 Zenn 「知識を共有するエンジニアに対価
ベテランエンジニアも意外と知らない「パッケージ管理システムの仕組み」 - Qiita
この記事はNuco Advent Calendar 2023の16日目の記事です。 1. はじめに 世の中には、複雑な計算や面倒な分析を1行で済ませてくれるような便利なパッケージが数多くあります。それらをインストールするときには、以下のようなOSやプログラム言語に応じた簡単なコマンドを実行していることでしょう。 あなたがパッケージをインストールする裏で、それらのパッケージを管理するシステムが地獄のような処理を人知れず行なっていることはご存知でしたか？ 本稿ではそんな縁の下の力持ちであるパッケージ管理システムが、一体どのような仕組みで動いているのか、その全貌を明らかにしていきたいと思います！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方
2023年に読んでよかった技術書
おそらく 2023 年に Zenn で出す最後の記事になるかと思います。 タイトルの通り、2023 年に読んだ本の中で、特に素晴らしかったものをご紹介します。 とはいえあまり今年は技術書を読んだ印象がなく… というのも、特定の xx(例えば Next.js、Ktor)といった部類に関しては公式のドキュメントを読むことがほとんどになり、書籍に求めるのは公式ドキュメントに書かれていない何かや誰かの経験・ノウハウになったからだと思います。 この記事を書くにあたって今年読んだ本を振り返ってみても、やはり十数冊程度(それでも月に 1 冊は読んでた)のでインプット：アウトプットの割合的には良いバランスではないかと思っています。 ただ、先に述べた通り公式ドキュメントに書かれていないなにかを売っている本というのはどれも本当の意味で価値があるものであり、皆さんにも本当に意味のある情報にお金を使っていただける
CSS だけで動くスクロールドリブンアニメーション
CSS だけで動くスクロールドリブンアニメーション 2023.12.17 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。 Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。 スクロールドリブンアニメーションを利用することで、例えばスクロールの進行状況を表すバーであっ
【JavaScript】アニメーションの処理負荷を軽減する | Web production note
単体のアニメーションだとそれほど気にならない場合でも、表示範囲の中で複数のアニメーションが同時に走ったりする場合、負荷が増大して処理落ちなどを起こすことがあります。 レンダリング負荷を軽減するため試行錯誤をしたので、備忘録もかねて実施した内容をまとめました。 可読性や保守性など、よりクリーンなコードを目指す場合は不適切な書き方があるかもしれません。 コードは参考程度に見ていただき、各自の環境でデバッグのうえより適切なコードを選択していただければと思います。 パフォーマンスパネルでデバッグ今回はChromeのパフォーマンスパネルで検証をしました。 パフォーマンス計測後の詳細からJSファイルを参照すると、具体的な実行時間まで表示されるため重たい処理の特定に非常に重宝しました。 パフォーマンスパネルの使い方の詳細は以下をご参照ください。
働きすぎるとブログもSNSもできなくなって視野も狭くなるな - シロクマの屑籠
2023年に入ってから働きすぎているが、9月ぐらいから労働が極まってきて、次第に息が詰まりそうになったり睡眠がとりづらくなってきた。実働時間でいえば研修医時代を上回っている気がする。寝ている時間以外、だいたい何かをやっているからだ。 20代や30代の頃、働くのはとにかくイヤなことで、それが仕事である限りともかく負担だった。それに比べれば今は仕事慣れしているし、その一部が自分の関心領域に寄ってくれたとも言える。特に文章をつくる方面は今でも好きだ。手が痛くならない限りで、カルテを書くのだってそれなり好きだったりする。 で、朝から晩まで、楽しみといえば『葬送のフリーレン』を観ることぐらいの毎日を過ごしていると、時間的制約以上に体力的制約から、ブログやツイッターを書くことが難しくなり、新しい小説やアニメやゲームに触れることも難しくなる。『ブルアカ』や『セーリングエラ』が遊びかけのまま私の帰りを待っ
【全30項目】コーディング時のルールや思想（HTML/CSS/Sass/JSなど）
宣伝💡 この記事の内容の超大容量版がこちらの本になります。興味がある方は是非チェックしてみてください。 Web業界に新卒で入ってから7年と数ヶ月が経ちました。私はデザインからフロントエンド全般が守備範囲です（Next.jsを使った軽めのWeb開発くらいまで）。 最近ようやく自分の中での「コーディングの手法やルール」が固まってきたので、言語化してこの記事で解説していこうと思います。 はじめに まず最初にこの記事の方針や前提をいくつか書いておきます。 用語や知識の詳しい解説はしていないので、分からない内容が出てきたら調べながら記事を読んでいただくとより理解しやすいと思います 実務を数年経験していないと理解できない部分があるかもしれないです（完全初学者向けではなく、初・中級者向け） あくまで自分の中での手法やルールであり、全ての実装者・会社・プロジェクトなどに当てはまるわけではありません（もち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアの心構え
ITエンジニアこそ筋トレをやるべき理由 徹底解説
