本当は教えたくない、VScode拡張の最強プログラミングアシスタントAI Phind(導入・使い方) - Qiita
みなさんプログラムは書いていますでしょうか。この一年でChatGPTができ、CopilotにCopilot Chatなど色々なAIツールが出ていますが今回お勧めするのはPhindというAIアシスタントです。 Phindとは Phind(Phind.com)とは端的にいえばGPT-4を超えるコーディング能力に特化した言語AIです 参考リンク：大規模言語モデル「Phind」がコーディングにおいてGPT-4を上回る リンク内で言われているように、WebからChatGPTやGoogleのように簡単に使うことができますが、Phindの真髄はここでは味わえません。 Phindの真の実力 Phindの本当の実力はVScode拡張を使うことによって体感することができます。 PhindのベースモデルはPhind-CodeLlamaというものを使っています。これはMeta社が作ったCodellamaというプロ
しょーもない事務作業を快適にするためのツールを作りたいとき 〜セキュア意識の高い会社編〜 - Qiita
Pythonインストールできないんだけど！ なんかいつもこれ同じ作業してるよな、自動化出来ないかな…よしやったる！ ↓ みんなー！こんなツール作ったよー、使ってみてー！ ↓ そして起こる「ちょっと、俺、.pyとかいう拡張子使えないんだけど」の声。 会社のPCって外部のアクセス禁止だったり新規ソフトウェアのインストール制限があったりと、色々制約がありますよね。この制約のせいで、作ったはいいが使えなかった、みたいな理不尽なハマり方したり、一方で試してみたら意外とこれ動いちゃうんだ！？みたいなこともあったりするので、ここではそんなずる賢い業務改善を必死に考える社員のみんなに、どれでやれば利用可能なツールづくりができるのか、その選択肢を載せていくよ。 Python + exe化ツール(Pyinstaller) やっぱ中身含めてファイル操作系でちょこちょこやるならPythonが楽だよね。ただ、Pyt
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
急に仕事で英語を使うことになった社会人に贈るまとめ(便利ツール/コンテンツ) - Qiita
急に仕事で英語を使うことになった社会人に贈るまとめ(便利ツール/コンテンツ/勉強本) 新規案件参画初日。 Goやk8sを使えることなってワクワクしていたあの日、 参画してすぐにチーム内のエンジニアで日本人が自分以外に一人であること、 それ以外のチームメンバー全員が外国籍のメンバーになることを知らされた そこのあなた！ 数年前の私です（笑） さらに2ヶ月後には、開発チームで唯一の日本人になって死にそうになりました。 その時は突然にやってきます。 当時、私の英語の経験というと大学受験の対策のみと言っていいほどで、 そこから10年以上経過していたため、高校英語すらも怪しい状態でした。 英語学習を開始して 半年ほど経過した時のレベルがTOIEC450程度だったので、学習開始当初はおそらく400点を切っていたレベルであると思います。 そこから英語学習を開始し、2年ほど経過した今では、便利ツールを活用
Webテキストを理解したい - Qiita
.button { display: inline-grid; place-items: center; border-radius: 9999px; width: min(30vw, 400px); min-height: 44px; background-color: darkcyan; font-family: "Noto Sans JP", sans-serif; color: white; } place-itemsで中央寄せしてるし、 テキストには色しか指定してないのに なんか上の余白の方が広いですね。。 line-height: 1 を指定してみても結果は同じです。 なんでなんでしょうか font-sizeって何なん Webテキストにはそれぞれ emスクエア（UPM / units per emとも呼ばれる） という相対的なサイズの「ボックス」があるみたいです。 （もともとは
【まとめ】大学が公開している有益な資料 - Qiita
はじめに 今回は各大学が公開している、エンジニア向けの資料をまとめていきます。 東京大学 ChatGPT活用法 ChatGPTの基礎的な内容から実際にどのように活用すべきかが解説されている。 Pythonプログラミング入門 Pythonについて環境構築から始まり、基本文法、応用的な使い方まで分かりやすく解説されている。 AWS入門 ハンズオン形式でAWSの学習ができる。 AI・データサイエンスの活用事例 データサイエンスやAIの活用事例を学べる。 人工知能・深層学習を学ぶためのロードマップ AIやデータサイエンスの具体的な活用事例が学べる。 京都大学 プログラミング演習 Python 統計学 統計学やデータ分析、検定を学べる。 慶應大学 ChatGPTの活用資料 ChatGPTを用いた開発方法が学べる。 東京工業大学 機械学習 筑波大学 データベース データベースの基本から正規化や設計とい
srcsetとsizesが理解できなかった人のために、日本一分かりやすく解説してみた - Qiita
レスポンシブイメージとは 画面幅や端末（パソコン、スマホなど）に応じて表示するイメージを切り替えること なぜ重要なのか スマホみたいな小さな画面で表示する時に5000x2500みたいな巨大画像を送りつけてしまうと、意味もなく通信時間がかかり、ユーザが可哀想 逆にスマホ用の小さな画像をPCで開くと、画像がボケる なので表示端末に応じて画像を切り替える必要がある そのために何を理解する必要があるのか HTML5でimgに追加されたsrcset属性, sizes属性 ブラウザがどうやって画像を選択しているのか Retinaについて 凄まじく短いですが、今回の記事用にGitHubのレポジトリ作っときました 早速実装してみよう サイズが異なるフラミンゴの画像を4つコチラから拝借しました。 普通にimg srcを指定して表示する まずは普通にimgにsrcを設定します。
ReactでLeafletとMapbox GL JSとOpenLayersの開発環境を構築してみた - Qiita
ReactでLeafletとMapbox GL JSとOpenLayersの開発環境を構築してみました ReactでLeafletとMapbox GL JSとOpenLayersを利用する時に、ライブラリを直接読み込んでいるかたもいると思いますが、今回はReact向けのラッパーライブラリを利用して開発環境を構築してみました！ 1. 事前準備 Reactの環境準備 React #002 – TypeScript環境構築 node v14.8.0 npm v6.14.8 React v16.13.1 TypeScript v3.7.5 2. 共通設定 tsconfig.json { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCh
【deck.gl】react-map-glを使って背景地図を表示する - Qiita
import React from 'react'; import { LineLayer } from '@deck.gl/layers'; import { MapboxOverlay } from '@deck.gl/mapbox'; import Map, { useControl } from 'react-map-gl'; // Mapbox GL JS import 'mapbox-gl/dist/mapbox-gl.css'; import './style.css'; const App = () => { const DeckGLOverlay = (props) => { const overlay = useControl(() => new MapboxOverlay(props)); overlay.setProps(props); return null; }
【React】OpenStreetMapのベクトルタイルを表示する - Qiita
はじめに deck.gl×React×TypeScript 環境構築の続きです。 react-map-gl を使ってOpenStreetMapのベクトルタイルを表示してみます。 react-map-glとは react-map-glは、Mapbox GL JS対応ライブラリのためのReactコンポーネント群です。 Mapbox GL JSのオープンソースフォーク版のMapLibre GL JSにも対応しています。 手順 インストール react-map-gl と、maplibre-gl をインストールします。 import Map from 'react-map-gl'; import maplibregl from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; import './style.css'; const A
【JavaScript】ES2023で導入された非破壊的メソッド - Qiita
ES2023で導入された非破壊的メソッドを紹介します toReversedメソッド toSortedメソッド toSplicedメソッド withメソッド toReversedメソッド reverseメソッドは破壊的に配列の要素を逆順にする toReversedメソッドは非破壊的に配列の要素を逆順にする // reverse const a = [1, 2, 3]; const b = a.reverse(); console.log(a); // [3, 2, 1] console.log(b); // [3, 2, 1] // toReversed 👍 const c = [1, 2, 3]; const d = c.toReversed(); console.log(c); // [1, 2, 3] console.log(d); // [3, 2, 1]
【JavaScript】ES2023の新機能が何故かいまさら追加されていた - Qiita
ES2023その2 / ES2023 / ES2022 / ES2021 先日ES2023では新機能が2個しかなかったという話をしましたが、どういうわけか2023/01/30になってからES2023が2個追加されました。 よくわかりませんが、どうやら1月までは前年のESになるみたいです。 なんで。 これらは2023/01/30に行われたTC39ミーティングで決定したようです。 他にIntl.NumberFormat V3もStage4への議題に上がったみたいですが、こちらは却下されたみたいです。 なんでそんなふわふわな言及なのかってまだアジェンダしかないから詳しいことがわからねえんだよ。 Finished Proposals Change Array by copy 配列を破壊せずに操作するメソッドを追加します。 既存の配列操作メソッドは、変更後の値を返すと同時に元の値も変更してしまいます
Deck.GLでオープンデータを可視化する - Qiita
Deck.GLはUberがオープンソース(MITライセンス)で公開しているWebGLベースの地理情報可視化フレームワークです。 Github：https://github.com/uber/deck.gl Reactでの使用が推奨されていますが、JavaScript(PureJS)でも使用することができます。 Deck.GLでは、多数のレイヤーが準備されており、これらを利用すると国土数値情報などのオープンデータを比較的簡単に可視化することができるので、サンプルを紹介します。 ソースコードはVScodeのLiveServerで実行することを想定しており、また、国土数値情報のShapeはQGISでgeoJsonに変換しています。 なお、実行時には「mapboxApiAccessToken: "**********"」をMapBoxのアクセストークンに置き換えてください。 HexagonLaye
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
【Git】ブランチの命名規則を調べてたらIssueドリブン開発という存在を知った - Qiita
Issueとは、Github上で作成できる、ToDoリスト的なもの 使い方 Webサイトのメニューバーをハンバーガーメニューに変更したい Github上で、１の旨を記載したIssueを立てる マークダウンでコメントを書けるので便利 画像も載せられるので、こんなメニューにしたい、というイメージ図も載せておける feature/#12_replace_to_hamburger_menuというブランチを作成 Issueを立てるとそのIssueに番号、例えば#12が割り振られるので、それをブランチ名に含める 開発進める 開発完了 Issueに書いた内容のタスクが完了したので、developブランチにマージコミットする この際、close #12などとコミットメッセージに記述すると、自動的にIssueが閉じられる Issueを使うメリット Github上でタスク管理できる コミットするとIssueも
何番目系の便利なCSSまとめ - Qiita
最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数
🎊Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版） - Qiita
🎊Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版）JavaScriptReact 10月25日、Reactの新機能であるConcurrent Modeのプレビュー版が発表されました。この中には、Concurrent Modeの恩恵を得るために必要となる新しいAPIが含まれています。 これらのAPIの中心となるのが、Suspenseと2種類の新しいフックuseTransitionとuseDeferredValueです。この記事ではこの2種類のフックに焦点を当てて、これらが何をしてくれるのか、どのようにこれらが新しいのかを解説します。 要するに、Reactの公式ドキュメントを読んでまとめましたということです。特に、ガイドを一通り読んで理解しないとこれらのフックが何をしているのか理解しにくいため、最速で理解できるよ
一瞬で理解！JavaScriptの`debounce`テクニックとその実装方法 - Qiita
あなたがウェブサイトやアプリケーションを開発しているとき、高頻度で発火するイベントにどう対応すればよいか考えたことはありますか？この記事では、その問題を解決するためのdebounceテクニックについて紹介します！ 目次 debounceとは？ debounceのメリット JavaScriptでのdebounceの実装 使用例と応用 まとめ 1. debounceとは？ debounceは、高頻度で発火するイベント（例: ウィンドウのリサイズ、キー入力など）を制御するためのテクニックの一つです。このテクニックを使うと、特定の時間間隔内に再度イベントが発火しなかった場合にのみ関数を実行することができます。 2. debounceのメリット パフォーマンスの向上: 不要な関数の実行を抑制することで、アプリケーションのパフォーマンスを向上させることができます。 APIのコスト削減: ユーザーの入力
npmとyarnのコマンド早見表
2019/12/24追記 npmとyarnの脆弱性が報告されています。 npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる 概要 npmとyarnの「よく使う」から「ときどき使う」くらいまでのコマンド早見表です。 環境 Windows 10 Professional Nodist 0.8.8 参考 npm Documentation CLI の紹介 | Yarn バージョン Node.jsおよびnpmはNodistでインストール、yarnはnpmでインストールしました。 Node.js
CI上のyarnの設定 - Qiita
yarnをCI上で実行する場合、yarnとするよりも--frozen-lockfileを利用した方が安全です。 こうすると、yarn.lockを生成せず、更新がある場合に落ちる挙動をします。これによりCIと結果が異なることということが避けられます。 似たようなオプションで--pure-lockfileがありますが、こちらはlockファイルを生成しないだけです。 また、--ignore-optionalを使ってローカルでしか使わないライブラリ(アプリとビルドとテストに不要なライブラリ)を除外してインストールするのも便利です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
