コンマ演算子の使い道の話 - Qiita
これは何？ return の後ろにカンマ演算子で区切ったステートメントを記述し、最右のステートメントを返すことに有用性があるかどうか知りたいのです。 という記述を読み、そこに限定せずに コンマ演算子が役に立つパターンについて考えた。 とはいえ、 return 式, 式; が念頭にある。 そもそも そもそも、コンマ演算子は C 言語に由来する。 と言いたいところだけど、よく知らない。BCPL には無かったようなので、B言語か C言語なのかな。 いずれにせよ、C言語がきっかけで広まったと思う。 可読性の低下に寄与 コンマは演算子以外の用途でも使われるのでコンマ演算子なのかそうじゃないのかを判断するのがめんどくさく、可読性の低下に寄与しやすい。 a=(b,c); // コンマ演算子 a=f(b,c); // 引数区切り a=g((b,c)); // コンマ演算子 a=typeof(b,c); /
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。 メリット サーバーとの通信が初期遷移時のみに抑えられる ページ遷移が高速 デメリット 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い（アプリケーションの規模が大きくなればなるほど、時間が長くなる） JavaScriptはブラウザで実行されているので、ページ表示までの時間（JavaScriptの実行時間）が使用しているマシンスペックに依存して
Claude 3、気になりますよね 今まで触ったことないけど、興味を持った方へ、入門するところまでのご案内です。 とりあえずチャットがしたい claude.aiにアクセスして、アカウントを作成します。 メールアドレスを入力する方法と、Googleのアカウントと紐付ける方法があります。 私はGoogleアカウントとの紐づけを行いました。 ログインができたら、もう、チャットができます。ChatGPTのような感じです。 日本語も自然に回答してくれます。 左下にClaude 3 Sonnetとあります。これはClaude 3のモデルの名称で、SonnetはClaude 3のシリーズの中で真ん中のモデルです。 Haiku - ハイク Sonnet - ソネット Opus - オーパス 名前からモデルの特徴を想像してもらいました。概ね特徴を捉えているのではないでしょうか。 Claude 3の特徴として
1行で発狂するコード - Qiita
人は1行の記述で死ぬこともある 公開からコンスタントに閲覧をいただいている以下の記事。需要がありそうなので、もう1つ記事を書いてみようと思う。 題材は前回同様のJavaScriptのクソコードではあるが、前回は冗長を極めたクソコードであるのに対し、今回はたった1行である。 1行なのに、なんと示唆深いに富む(決してほめていない)コードだろうか。 不可思議なコード では、実際に見てみよう。 return a = a >= 10 ? 10 : a >= 5 ? 5 : a >= 3 ? 3 : a >= 2 ? 2 : 1, z * a; これを見て、何が return で返されるかわかります？ 代入演算子 最初見たとき、代入文 a = ××× の評価値って何になるのかな？ a が return されるのかなと思いました。 割り当て操作は、割り当てられた値として評価されます。 JavaScrip
GPT-3.5-TurboとGPT-4-Turbo、Claude2、Claude3(Haiku)、Claude3(Sonnet)、Claude3(Opus)、Gemini Pro、Gemini Ultraに同じ質問をして、回答結果を比較してみた - Qiita
GPT-3.5-TurboとGPT-4-Turbo、Claude2、Claude3(Haiku)、Claude3(Sonnet)、Claude3(Opus)、Gemini Pro、Gemini Ultraに同じ質問をして、回答結果を比較してみたPythonAWSAzureOpenAIGoogleCloud はじめに GPT-3.5-TurboとGPT-4-Turbo、Claude2、Claude3(Haiku)、Claude3(Sonnet)、Claude3(Opus)、Gemini Pro、Gemini Ultra(Gemini Advanced)に同じ質問をして、回答結果を比較してみました。 Gemini Ultra以外のモデルはPythonコード上から実行し、Gemini UltraはGemini Advancedのチャット上で実行しています。 各モデルの詳細は以下のとおりです。 G
ちなみにOpusはクラシック音楽の「楽曲番号」、Sonnetは「定型詩」、俳句は言わずもがなということで、Claudeという名前よろしくなんだかオシャレでハイソな感じの命名ですね。 複数のベンチマークでGPT-4を上回る賢さ （出典：Anthropic公式サイトより） レスポンスが速い Opus：Claude 2.1と同等速度を維持 Sonnet：Claude 2.1の2倍速い Haiku：チャートやグラフ入りの論文（約1万トークン）を3秒以内に読める 「答えられません」が減った 安全機構（ガードレール）に近い微妙な回答でも、なるべく応答を拒絶しなくなったようです。 回答精度がアップ Opusモデルの場合、自由形式の質問への回答精度がClaude 2.1の2倍の精度に向上したようです。 大量の入力に対応 コンテキストウィンドウは旧モデル同様20万トークンですが、キャパ的には100万トークン
【30歳/完全未経験/独学】webアプリを作製しました【Golang, Next.js, MySQL, Docker, GitHub Actions CI, AWS Fargate on ECS】 - Qiita
完成物 ER図 画面遷移図 figma, 原寸画像 AWS構成図 ※備考※ GitHub Actions CIは構築済みです。 GitHub Actions CD, apiのprivate subnet化にも取り組んでいます。 EC2インタンスは通常時停止です。 技術選定理由 プログラミング、IT業界ともに未経験で着手し独学で作りました。 Go 比較対象：JAVA、Ruby、Python、PHP コンパイラ言語であり実行速度が高速である 静的型付けであり、コンパイル前にバグを発見しやすい 静的型付けかつ記述自由度が低いことから、以下２点を利点と考えた 開発を中長期まで続けた際にも、加筆・改修しやすい 他人のコードを読んだ際に学びやすい Javaも多少書いてみたが、簡素にかけるGoの方がしっくりきた SHOWROOM、IRIAM、Twitch、AbemaTVといった動画配信サービスにも採用さ
いまさらjQuery？ ここの人たちは見たくもない現実かもしれませんが、世界の9割はjQueryでできていいます。 ということで世界70億人が待望していたjQyery4のベータバージョンが2024/02/06に公開されたので以下で紹介します。 ちなみにjQuery1が2006/08/26、2が2013/04/18、3が2016/06/09のリリースであり、メジャーバージョンアップとしては8年ぶりとなります。 しかし開発が止まっていたとかというとそういうわけもはなく、流石に2010年代前半ごろの更新ラッシュは落ち着いてきたとはいえ、着実にメジャーバージョンが3のまま3.7.1まで更新され続けています。 jQuery 4.0.0 BETA! jQuery 4.0.0の開発を長いこと続けてきましたが、ついにベータ版リリースの準備が整いました。 やらなければならないことはたくさんあり、開発チームは
はじめに 34 歳のとき、勤めていた会社の経営が傾き早期退職を促されたのを契機に独立しました。その後、41 歳で Authleteオースリート 社を設立しました。諸般の事情で現在も Authlete 社の代表取締役という肩書きを持っていますが、経営者的な仕事は他の人に任せ (参照: シリコンバレーのプロフェッショナル CEO を迎えて米国市場に挑戦する日本のスタートアップの話)、50 歳目前の現在もプログラマとしてコードを書き続けています。 Authlete 社設立 (2015 年 9 月) から 8 年半弱経過したものの、まだまだ小さな会社で道半ばであるため、起業家として何か語るのは時期尚早ではあるものの、軽い体調不良が長引く中、『自分のエンジニアとしてキャリアを振り返ろう！』という記事投稿キャンペーンを見かけ、生きているうちに子供世代のエンジニアの方々に何か書き残しておこうと思い、文章
概要 スタースキーマからスノーフレーク、ギャラクシー、そしてデータボールトやアンカーモデリングまで、各スキーマの特徴、利点、そして適用シナリオを掘り下げます。 スタースキーマ スタースキーマを元に整理します。 スタースキーマ または 星型スキーマ はデータウェアハウスに利用される最も単純なスキーマである。スタースキーマには唯1つもしくは少数のファクト表と複数のディメンション表が含まれる。スタースキーマはスノーフレークスキーマの一種であるが、多くの用途で利用されている。 DWHに利用される最も単純なスキーマ 唯一または少数のファクトテーブルと、複数のディメンションテーブルが含まれる スノーフレークスキーマの一種 モデル ファクト表はデータウェアハウスでの解析で利用され、複数の異なるディメンションに区分される。ファクト表は主要なデータを持つ一方、ディメンション表は相対的にサイズが小さくディメン
お疲れ様です。 前週に投稿した下記の記事について、多くの方に「いいね」、「ストック」していただきました。 皆さん、本当にありがとうございます。 今日は「Python だけで作る Web アプリケーション(フロントエンド編)の設計方針」について部分いたします。 本章ではこれまでの章の内容を踏まえて、設計方針を紹介します。 設計方針は 「積極的に TypeHint を活用すること」 「責務を明確に分け、適切な粒度でオブジェクトを分割すること」 「バックエンドの存在を前提にすること」の 3 つです。 TypeHint を活用する TypeHint とは以下のように変数や戻り値の型をヒントとして記述することです。 これはあくまでヒントなので実行時にその型を強制するわけではありません。つまり実行時にadd("1", "2")と書いても、文字列結合されて 12 になり期待する挙動ではありませんが、異常
はじめに この記事では、巷で「この技術によりGPUが不要になるかもしれない、NVIDIAなどの半導体関係の株価が...」と話題になっている、BitNet b1.58についての論文を丁寧に解説します。このMicrosoftが先日発表したBitNet b1.58はそのエネルギー効率の凄まじさから2024年初めの大きな技術改革となるかもしれません！！ 筆者の見解 関する論文解説に入る前に、この技術に関する私の個人的な意見を述べたいと思います。 1bitの技術を用いることで達成されたその驚異的なエネルギー効率の高さは、既存の大規模言語モデル（LLM）とは一線を画しています。この技術が今後のAI技術の発展にどのように影響を与えるかについては以降の発表がとても楽しみです。 一方で、「GPUが不要になるかもしれない」という意見に関しては、ある程度の限定的な視点からの意見と言えます。BitNet b1.5
商業ディベロッパーに勤めるちいかわ好きの法務部員です。 過去記事では一切触れていませんが、実はイラストを描くのが少しだけ得意です。 今回は、自分で描いたイラストを使って、GPT-4の画像加工にチャレンジしました。 1.GPT-4は画像生成以外の画像処理もやってくれる 1-1.やったこと ChatGPT-4で大量の画像ファイルを一括編集 画像ファイル名を通し番号に変更 複数の画像ファイルを結合して1枚の画像に加工 結合した複数の画像ファイルをまとめてZIPファイルでダウンロード この記事の加工方法は、自分で描いたイラストをChatGPTにアップロードします。 学習されるのが嫌な場合はオプトアウト設定をするか、それでも心配な場合はマネしないようご注意ください。 1-2.きっかけ 自分が所属しているコミュニティのキャラクターを作りたくてDALL-Eで画像を生成したんですが、いまいち自分のイメージ
AWSの生成AIで社内文書検索！ Bedrockのナレッジベースで簡単にRAGアプリを作ってみよう - Qiita
この記事について AWSコミュニティ最大級のイベント「JAWS DAYS 2024」内のワークショップにて実施したハンズオンコンテンツとなります。 イベントでは口頭で説明しながら実施しますが、この記事さえ読めば誰でも体験できるように作っていますので、当日イベントにお越しになれない方もぜひご活用ください。（スムーズにいけば30分程度で完了します） 本ハンズオンの実施にあたり、多少の課金（数十円〜数百円以内）が発生することをご了承ください。実施後には忘れず不要なリソースの削除をお願いします。 なお、Bedrockのモデル呼び出し料金はAmazon製のTitanシリーズを除き、マーケットプレイス扱いとなるためAWSクレジット（クーポン）の適用範囲外となります。 ※事前にAWSアカウントの作成をお願いします。クレジットカード情報が必要です。ログイン用のEメールアドレスとパスワードをお忘れなく！ 0
ダイソーの在庫検索APIを叩く - Qiita
const md5 = text => fetch('https://md5sum.deno.dev/' + text).then(r=>r.text()) // 店舗コード const str_cd = '002870' // yyyyMMdd:hhmmss sources\com\locationvalue\ma2\extensions\ScreenExtensionsKt.java:78 const request_datetime = new Date().toLocaleString('sv').replaceAll(/-|:/g, '').replace(' ', ':') // ジャン const sku_cd = ['4549131971149'] await fetch('https://zaikoapp.plat.daisojapan.com/api_get_store
LCEL (LangChain Expression Language）完全に理解した - Amazon Bedrock APIで始めるLLM超入門⑨ - Qiita
LCEL (LangChain Expression Language）完全に理解した - Amazon Bedrock APIで始めるLLM超入門⑨PythonAWSbedrocklangchainLCEL LCELからBedrockを呼び出してみます。 LCELとは LangChainでコンポーネントをchain（連続呼出）する共通のInterfaceおよびその記法です。 Interfaceは以下のページが分かり易かったですが、要はRunnable共通のメソッドを実装しているというのと、入出力の型はコンポーネント毎に異なる（chainを組む時に入出力の型を意識して合わせる必要がある）というのが理解のポイントかなと思いました。 使い方は公式のクックブックがわりと分かりやすいです。 LangChainの最新化 langchainとlangchain-communityを最新にします。安定バ
よくスタートアップやSaaSの世界などでノーススター（北極星）指標が注目されます。自分たちのビジネスを成長させるために組織の全員が一丸となって追うべき1つの指標というものです。 例えば、アクティビティの指標であるDAU（Daily Activity Users）やMAU（Monthly Active Users）であったり、またはエンゲージメントを測るためのDAU/MAU、またはそれこそ売上やMRRであったりするかもしれません。 データや数値を元にビジネスを成長させようということで、こうした「ノーススター」指標を決め、ダッシュボードなどで毎週、毎月モニターし始めます。 ところが、ここから誰もが話したくないことが起き始めます。 たいていの組織や企業の中の人達はこの指標をだんだん見なくなる、または本気にしなくなります。 実際見ている人は経験あると思うのですが、こうした指標の数値は良くなったり悪
最近、『エンジニアのためのドキュメントライティング』という本を読みました。 非常にためになる内容だったので、本書であがったいくつかのポイントを私なりにまとめてみました。 また、エンジニアにとってのドキュメントは種類が多く、それぞれのニーズとそれに合わせたフォーマットも違うため、 良いドキュメントとは何か？ を一概に述べることは難しいです。 個人的には、「ほぼ知識のない人が読んでも再現できる・解決できる」ということが大事なのではないかと思っています。 そこで、本記事ではドキュメントの範囲を少し絞って、想定される読者をエンジニア寄りに考えて書いています。ご了承ください。 目次 本記事では ドキュメントを作成する前 ドキュメントを作成する時 ドキュメントを作成した後 それぞれのタイミングにおけるポイントを挙げていきます。 📑 ドキュメント作成前のポイント フリクションログとは、あるユーザー1の
この前までの私のちょっと時間のかかるバッチ実行の日常 「よっしゃー、今日はバッチ処理やるで！」と気合い入れて、タタタタッターン（bash xxxx.sh + Enter）。 おっと、またやらかしたわ。コマンドの末尾に&つけんの忘れたら、プロセスがフォアグラウンドで動いてまうねん。 これやと、ターミナルがこのタスクに独り占めされてまうわ。 この状況をどうにかするには、Ctrl+Cでプロセスを止めてからやり直すか、それとも別のターミナルウィンドウを開くしかないねん。めっちゃ面倒くさいなあ。 今後の私のちょっと時間のかかるバッチ実行の日常 「さて、本日はバッチ処理の実施日でございますね」と心に留めました。 タッタタタッターン。 あら、不覚にも再び&を添え忘れてしまい、結果としてフォアグラウンドでの実行を余儀なくされました。 しかし、ご心配なく。 まずは、Ctrl+Zを駆使してプロセスを一時停止い
抹殺は言い過ぎかもしれませんが簡易な名刺管理アプリであれば自作で十分という時代がきていたようです これで紙の名刺からはきっとバイバイできるでしょう！ 名刺管理アプリ作ってほしいといわれた それは2/22のお話。 ことの発端は別の部署からかかってきた一本の電話でした。 新規事業の部署でいろいろな取引先様と付き合いがあるものの、紙の名刺が非常に多く管理に困っているとのことのことです。 私は小売業に勤務しているしがない一社員で、現在Eコマースの戦略立案に関する部署に所属しています。 電話先の方は、以前一緒の部署で勤務したことがある方です。現在新規事業のプロジェクト推進をしており、冒頭のような課題感を持っているため既存の名刺管理アプリ導入を考えたのですが、あまりのお値段の高さに卒倒して私に藁をもすがる思いで連絡されたようです。 これまでのアプリは名刺の識別専門のAI（）を使っていた 話を聞いてみた
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
EMNLP2023に採択された論文を眺めていたところ、ある論文が目に止まりました。 「Discovering Universal Geometry in Embeddings with ICA」という論文です。 これは京大下平研の山際さんの論文で、ざっくりとサマると「Word EmbeddingなどのEmbeddingを独立成分分析（ICA）で次元削減することで、人間にとって解釈性の高い成分を取り出すことができる」という論文です。 Vision TransformerやBERTを用いた実験から、モーダルや言語に関わらず解釈性の高い表現が得られたという結果を得ています。 論文内では、文を対象としたEmbeddingであるText Embeddingには触れられていないですが、おそらくうまく動くだろうという見込みがあったため、本手法をText Embeddingに対して実行してみました、という
Rust と OS の知識 0 からはじめるRustで始める自作組込みOS入門 - 前半（スケジューラの実装まで） - Qiita
きっかけ・読んでいく本 うさねこらーじの Discord サーバーで、いろいろな先輩たちに技術のことを教えてもらっています。 https://discord.gg/RMq7e5qbQj このなかで、著者の garasubo さんにサポートしてもらいながら以下の本の内容を実装しているのですが、 Rust の知識も OS の知識もない私にとっては内容がかなり高度なので、補助のためにこのブログを作成しています。 Rustで始める自作組込みOS入門 https://amzn.asia/d/ebuOUM1 ぜひこの本を読みながらこのブログを参照していただけると嬉しいです。 第 2 章 ベアメタルで Hello World 単語のかみくだいた説明 ベアメタルプログラミング OSのない環境で実行するためのプログラムを書くことです。この環境下では CPU ごとに決まった動作（たとえば、決まったアドレスにあ
はじめに 二値分類の評価指標について 「AUCとGini係数ってどんな関係だっけ？」 と毎回忘れては調べているので、いい加減覚える意味で体系的にまとめてみる。 この記事では AUCとは何か？ Gini係数とは何か 両者はどんな関係があるか？ を理解することを目的とする。 最初に結論 AUCとGini係数の間には の関係がある。 AUCは0.5から1の範囲を取るため、Gini係数は0から1までの範囲を取る。 どちらも値が大きいほど分類性能が良いことを表す。 最終的にこの式を理解することを目的としよう。 AUCを理解しよう AUC （Area Under the Curve）は二値分類における有名な評価指標の一つであり、文字通り、「ROC曲線下の面積」を表す。 ROC曲線とは？ ROC (Receiver Operating Charastaristic Curve)は受信者操作特性と呼ばれる
はじめに 可読性の高いコードを書くためには、開発者の意図をコード上で表現することが重要です。この記事ではコードに意図を込めるいくつかの方法について説明します。いずれも基礎的なものであり、かつ粒度に若干ばらつきがありますがご容赦ください。 方法 適切な命名をする 適切な命名はコードの意図を伝える単純かつ最も強力な方法。変数や関数の役割や機能を十分表現するような具体的な命名を心がける。例えばリーダブルコードによると、適切な命名のために以下のような指針が示されている。 指針 例
スクラムとは結局なんなのか - Qiita
初めに 僕は4年ほどスクラムを採用した組織づくりを行ってきました。 最近「スクラムの内容は理解したけど、結局スクラムがなんなのかがわからない」という話をされることがちょこちょこあるので、記事としてまとめることにしました。 スクラムとは スクラムとは、アジャイル開発を実現するためのフレームワーク、プラクティスの一種です。 スクラムガイドには、以下のように定義されています。 スクラムとは、複雑な問題に対応する適応型のソリューションを通じて、⼈々、チーム、組織 が価値を⽣み出すための軽量級フレームワークである。 スクラムガイド より引用 スクラムでは、スクラムマスターやプロダクトオーナーなど、いくつかのロールをもうけ、ロールごとにチームとしての開発を進めていきます。 また、スプリントの単位で以下のようなイベントを実施していきます。 スプリントプランニング デイリースクラム ミッドタームレビュー
今日は、ローカルにてRAG(Retrieval-Augmented Generation)を使って、あるPFDについて質問するチャットを作ろうと思う。 OpenAIを使うので、無料ではないので注意されたい。 今回のソースは LangChain 完全入門 という本を参考にしていて、とても勉強になるので購入をお勧めする。 行いたいこと ローカルでPDFを読み込ませて、内容を質問したり、要約させること。 大きな流れ 環境準備 チャットアプリの土台の作成 プロンプトを定義 アップロードされたPDFファイルを分割 内容をベクトル化し保存 入力された質問とPDFから抽出した適した文をOpenAIに送信 回答を得る。 詳細 環境準備 環境構築 Python : 3.11.6 pip ライブラリ chainlit==1.0.101 チャット画面を簡単に作るライブラリ chromadb==0.4.22 ベク
お疲れ様です。 今日からは「Python だけで作る Web アプリケーション(フロントエンド編)」について部分いたします。 はじめに 設計方針 共通部分の作成 ログインページ 商品一覧ページ 商品詳細ページ カートページ 注文一覧ページ 注文詳細ページ まとめ 今回は10の記事に分けて投稿するようにします。 今日は「はじめに」について部分いたします。 なぜ本書を書いたのか 本書は主に以下のような方を対象にしています。 Web アプリケーションの構築経験がない新米エンジニア Python はかけるが、HTML/JS/CSS が苦手な Pythonista 細かい UI の設定はせず、検証・デモ用の Web アプリを短期間で作りたい開発チーム どうやって作ったか 対象読者の悩みを解決するために、次の 3 つの要素が必要と考えました。 Web アプリケーションの基礎知識 参考にしてもらえる品質
1. 概要 2024年の1月24日にZedがOpen source化しました! ということで、Zedとは何か、実際に使ってみてどうだったかというのを簡単にご紹介できればと思います。 2. Zed とは何か? AtomとTree-sitterのクリエイターによる、Rust製のコードエディターで、OSS (オープンソースソフトウェア) であり、 Githubのリポジトリ こちらで公開されています。 公式サイトから一部抜粋すると下記のような特徴があるようです。 2.1 パフォーマンスを重視した設計 2.2 インテリジェンス系のサポート Github Copilotのサポート GPT-4 を使用して、自然言語のプロンプトを入力することで、コードを生成したりリファクタリング可能 2.3 言語対応 入力時にすべてのバッファの完全な構文ツリーを維持し、正確なコードハイライト、自動インデント、検索可能なア
VSCode の標準のC++インテリセンスでは、簡単なコード補完などや、構文が間違ってるなどのエラー表示はリアルタイムに出来ますが、警告などはリアルタイム表示出来なかったり、その他コーディング時に行ってほしい賢い機能が不足しがちです。 例えば以下のコードは、セミコロン忘れなどのエラーは表示してくれますが、未初期化変数の f などはコンパイル時に警告がちょろっと出るだけで、見落としてしまいます。 #include <iostream> using namespace std; int main(){ int f; cout << f << endl; cout << "semicolon" << endl return 0 } MS 標準の C++ インテリセンスはそこまで賢くないからというのが理由なのですが、ここで変わりに clangd を使うことで、賢いリアルタイムインテリセンスを使える
はじめに 素の JavaScript でフロント開発経験がない React 育ちのエンジニアです。 React でフロントエンド開発をしていて大きく困ることはないのですが hooks, JSX, 様々なライブラリを使用していていると JavaScript を理解していたらという場面がちょこちょこ発生します。 そのため最近は JavaScript の基礎的な勉強をしています。 JavaScript の理解を深めることによってスムーズにキャッチアップできたり、裏側でどのように動作しているかなど想像しやすくなるだろうという目論見のもとで。 そこで、素の JavaScript を使用して TODO リストのためのコンポーネントを作成してみました。 JavaScript の Class を理解していることを前提に述べていこうと思います。 TL;DR JavaScript 組み込みの shadowDO
VSCodeでC言語プログラミング事始め HelloWorldがnmakeできるまで - Qiita
はじめに 諸般の流れからC言語を使う機会が増えてきたので、あらためてVSCodeでC言語プログラミングができる環境構築を再確認しておきます。諸般の事情でWindows＋MSCです。今回はmakefileを使ってHelloWorldがビルドできる状況を確認します。HelloWorld単体をビルドするのにmakefileを使うことはあまり意味のないことかもしれませんが、シンプルな環境でなにか見えてくるものもあるかもしれないということで。 前提条件 VSCodeはなんらかのバージョンが既にインストールされていることが前提です。 MSCもなんらかのバージョンのVisualStudioのVisualC++がインストールされていることが前提です。 今回は具体的には下記のバージョンを想定してお話が進みます。前回の記事でtasks.jsonとlaunch.jsonを生成して通常の[実行とデバッグ]からデバ
保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita
参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode（JavaScript）のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか？ 計算方法から考えると、forやifによる分岐を減らしていくことが必要となります。 そのために、分岐の入るロジックを別関数として切り出し、１つの関数でやる事を絞り、分離することを理想として目指していきます。 とはいえ、いちいち複雑度の計算なんてしていられないですね。 そこで役に立つのが次のVSCode拡張機能です。 Code Metrics （VSCode拡張機能） この拡張機能は、TypeScriptやJavaScriptの関数・メソッドに循環的複雑度を表示して
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
データベースとテーブルの作成 テスト用のデータベースtestdbを作成し、パフォーマンスチューニングを検証するためのcompanyおよびpersonテーブルを定義します。 CREATE DATABASE testdb; USE testdb; CREATE TABLE company ( company_id INT AUTO_INCREMENT PRIMARY KEY, company_name VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE person ( person_id INT AUTO_INCREMENT PRIMARY KEY, company_id INT, person_name VARCHAR(255) NOT NULL, email VARCH
個人で運営している賃貸物件の検索サービス Comfy のバックエンドを Rust でリプレースしました。この記事では、そのリプレースの背景と詳細をご紹介します。 まずは結果から 技術構成： Rust + Cloud Run1 へ移行 （Python + GCE2 から） 性能向上： 約 1.5 倍 開発期間： 1 ヶ月間 コード行数： 約 40 % インフラ費用： かなり減少 （多分3） 短い期間・少ないコードでかなり高速化できちゃった上に、開発体験もとてもよい Rust は本当に素晴らしいです…!! サービス概要 Comfy は 日本全国の賃貸物件を超高速に検索できる Web サービス です。 技術構成等の概要は、以前書いた記事 「【個人開発】爆速な賃貸物件の検索サービスを作った」 をご覧頂ければと思います。 もしよかったらこちらからぜひ試して頂き、さらによくなった性能を体感してみて下さ
私がVimに合わない場合、VSCodeに戻れるように設定ファイル等をバックアップ取っていました。 さっそくVimを使い始めたのは良かったですが、VSCodeほどうまく操作できているとは言えませんでした。なぜなら、Vimの独特なカーソル移動やキーバインドが身についていなかったり、言語サーバーの設定やファイル保存時のフォーマット等をうまく設定できていなかったからです。 諸々上手くできず、VSCodeへ戻ってしまいました。1度目の挫折です。 Neovimに出会う その後、すぐにNeovimを知りました。 NeovimはVimをフォークして開発し続けれているエディタです。基本的な操作はVimと同じですが、Neovimは拡張性(extensibility)と使いやすさ(usability)をフォーカスしています。 VSCode → Neovimへ移行する 2022年1月の私は、Vimへの移行を挫折し
開発の流れとして、デザイン決定後にデザイン（Figma）が開発部隊に渡ってくることは多いと思います。 開発着手前にデザインについて確認しておいた方が良いことの備忘です。 サンプル画像はWebで作っていますが、内容としてはWebに限らず、iOS/Android Nativeなアプリも対象としています。 また、記載順をどうしようか迷ったのですが、特に体系だった説明もできないので思いついた順で書いています。 アイコン/画像について 画像の形式を確認しましょう 画像の形式はベクター画像（SVG）なのか、ラスター画像（PNGなど）か確認します。 アイコン系は基本的にベクターだと思いますので、SVGでExportできない場合はデザイン提供元に確認しましょう。 ラスター画像は要件上こだわりがなければ、開発側でWebP/JPEG/PNGなどの特性や稼働環境を鑑みて決定するで問題ないと思います。 スマホでは
はじめに この記事では、学んでいくためのマイルストーンとして「知ったかぶりができること」を設定するのもアリなのでは？ という提案をします。 初学者でなくても『どうやって学んでいこうかな～』は全エンジニアの関心事だと思うので誰かの行動のきっかけになれたらうれしいです。 目次 （エンジニア）人生は勉強や！ 「知ったかぶり」を再定義する 「知ったかぶり」を可視化する 無知の知はすぐに自覚できる どうすれば人に説明できるようになるのか いったんここまでのまとめ 脳内イメージの解像度をどう上げていくか アウトプット先を意識したインプットをしよう " 知ったかbrilliant Journey of Engineers " さあ、なにを知ったかぶりしていこう？ おわりに （エンジニア）人生は勉強や！ 技術は高速かつ複雑に成長しているので、新たな分野を学ばなきゃいけない機会はどんどん増えていく。また、そ
はじめに 初めまして！ エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい！自分が学んだ足跡を残していきたい！と思い記事をかきました！ 最終的には自在に開発できるようになりたいと思っています。 いろいろな記事を参考にさせてもらっています。 その中でもこれってどういう意味？とかつまづいたところを念入りに書いていこうかと思います。 今回の目的 Dockerってもらったものそのまま使えば簡単に動いちゃうのでとてもやりやすい！なんて思うんですけど、一から作ってとなると「はて？どうすればいいのかわからない・・・」とはっきりしてません。 最小限でDockerを動かしながらそれぞれがどんな役割をしているの？どんなことを書いているの？を理解していきます！ 使用したものや事前準備 ・Macbook Pro ・Docker Desktop ・Docker Hub ・
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
GPT-4よりすごいらしいClaude 3が気になったあなたへ - Qiita
GPT-4を超えた？ Claude 3が登場！ Bedrockにも来ました。 - Qiita
【jQuery】jQuery4.0.0の変更点紹介 - Qiita
いつか起業したいエンジニアへ - Qiita
データウェアハウスのデータモデリングを整理してみた - Qiita
Python だけで作る Webアプリケーション(フロントエンド編)ー設計方針 - Qiita
【論文丁寧解説】BitNet b1.58とは一体何者なのか - Qiita
画像生成だけじゃない！ChatGPT-4で大量画像加工する方法 - Qiita
ノーススター（北極星）指標をモニターしてるのにビジネスが成長しないのはなぜか？ - Qiita
ドキュメントをいい具合に残そうの会 - Qiita
シェルのバックグラウンド実行って後だしできるって知ってました？ - Qiita
GPTが人知れず既存の名刺管理アプリを抹殺していた話 - Qiita
独立成分分析（ICA）を使ってText Embeddingを分析してみた - Qiita
【機械学習】AUCとGini係数の関係を理解する【評価指標】 - Qiita
Pythonでコードに意図を込める方法 - Qiita
ローカルで気軽にRAGを使って会話することが簡単すぎてビビった。 - Qiita
Python だけで作る Webアプリケーション(フロントエンド編)ーはじめに - Qiita
Atom の作者達が作った Rust 製エディタ Zed (OSS) - Qiita
VSCode で clangd を使って、賢いC++インテリセンス環境を整える - Qiita
素の JavaScript でコンポーネントを作成してみて React の気持ちを考えてみる - Qiita
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
SQLの達人への道: MySQLでの高速・効率的クエリ作成術 - Qiita
【個人開発】爆速な賃貸検索サービスをさらに高速化した【Rust】 - Qiita
みんなの中にNeovimはいますか？ - Qiita
エンジニアがデザインについて確認した方が良いこと - Qiita
エンジニアはどう学んでいけばよいのか - つまりは「知ったかぶり」 の積み重ね - Qiita
Dockerを少しずつ理解しようっていうお話 - Qiita