はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

OpenAI利用規約 まず、OpenAIが提供するサービス（ChatGPTおよびOpenAI API）の利用規約を確認します。 ３. Content (a) Your Content. You may provide input to the Services (“Input”), and receive output generated and returned by the Services based on the Input (“Output”). Input and Output are collectively “Content.” As between the parties and to the extent permitted by applicable law, you own all Input. Subject to your compliance with the

実務1年半が転職ドラフトで、指名18件＆約700万内定を獲得した話【web試験・コーディング試験・面接対策あり】ポエム転職転職活動面接転職ドラフト 初めに タイトルにもあるように、Web開発の実務経験１年半程だった私が 2022年の某月回の転職ドラフトに初参加したところ、まさかの 指名18件獲得 年収約700万円の内定獲得 を実現することができました。 当初は、せめて指名が3件程きて願わくば年収500万円の内定を獲得できれば嬉しいな・・くらいの温度感だったのでこれは正直かなり予想外でした。 転職ドラフトを実際に利用してみて、非常に素晴らしいサービスだと感じたので、 今回は転職ドラフトでの転職体験と、面接やコーディング試験の対策をどのようにしたのか等をご共有できればと思います。 どの程度のスキル感でどのような指名が来るのか・・等、 転職ドラフトでご転職を考えられている方のご参考になれば幸いで

とにかく方法だけ知りたい人 → ## 偽装を防ぐために とにかく時間がない人 → ## まとめ はじめに 日々作られる，あなたの Git コミット． それは果たして，本当にあなたが作ったものでしょうか ？ 当たり前だ，と思われるかもしれませんが，それを 証明するのは難しい です． 今回は，実際にコミット作成者を偽装する方法と，その対策として有効な PGP 署名付きコミットの作り方を紹介します． 偽装してみよう まずは Git リポジトリがないと何も始まらないので，初期化しておきます．

「TypeScriptとは」などシングルワードの検索結果に強いTypeScript入門記事の多くに、誤解を招く内容があることを確認しています。 以下にあげる記事を参考にされた方は情報のアップデートをしていただきたいですし、記事を公開しているメディアにおきましては内容を見直していただけるとありがたいです。 TypeScriptならクラスが書ける 「JavaScriptにはクラスがない、TypeScriptにはクラスがある」「ゆえに読みやすい短いコードが書ける」といった記述が見られますがこれは誤解です。 Udemy メディア - TypeScriptとJavaScriptの違い「TypeScriptではクラスの作成ができる」 侍エンジニア - 「TypeScriptでは、JavaScriptでできなかった「クラス」の作成を実現しています。複雑で大規模な開発を行うとき、JavaScriptではコ

この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden

Docker for Mac が遅い！ docker-sync や、 docker on Vagrant や、cached オプション、delegated オプションなどなど、いろんな解決策が紹介されましたが、それでもフレームワークなどを使っていると遅い、、、 というわけで Docker Desktop for Macの遅い問題を解決する、2022版バージョンをお届けします。 マウント先がドキュメントルートだから遅い よくローカルのファイルをコンテナ内から参照するためのマウント先をドキュメントルート、要するに、 /var/html/html に設定する例を多く見ますが、これが問題の根源となっている。 ドキュメントルートをマウントせずにファイルを設置すると普通に早い。 ドキュメントルート以外にマウントして同期する 今回は、 /var/www/shared にマウントして、 lsyncd で同

ググり力、それはエンジニアにとっては 必須の能力 になりつつあると思います。 さて、皆さんは自分のググり力で欲しい情報にちゃんとたどり着けると言えますか？ @Yametaro さんからのお題です。 ある日、コードレビュー中ワイ ワイ「さぁ、今日も同僚のコードをレビューしていくでぇ」 ワイ「まずは新卒のT君のコードを読んでいこか」 ワイ「どれどれ…」 ワイ「ん？なんやこの??っていう書き方は…？」 ワイ「ググってみよか…」 ワイ「JavaScript ??と入力して、検索ボタンをポチッとな」 ワイ「…あれ？それらしい検索結果が出てこんな…」 ワイ「ぐぬぬ、記号関係はググりづらいこともあるんやな…」 ワイ「これじゃあ今日はもう、酒飲んで寝るしかないやないか…」 〜飲酒、そして就寝へ…〜 では JavaScript で ?? の検索方法はどうしたらいいのか？ ここに１つの解答を示しておきます！

今回は画像を「フォルダに保存して表示」、「そのまま表示」、「DBに保存して表示」 の3パターンをまとめました。 画像をフォルダに保存して表示 formからファイルupして保存する <form method="POST" action="upimg.php" enctype="multipart/form-data"> <input type="file" name="upimg" accept="image/*"> <input type="submit"> </form> $img_name = $_FILES['upimg']['name']; //画像を保存 move_uploaded_file($_FILES['upimg']['tmp_name'], './upload/' . $img_name); echo '<img src="img.php?img_name=' . $i

個人用メモです。 機械学習は素材集めがとても大変です。 でもこの素材集め、実は無理してやらなくても、元から良質な無料データベースがあったようなのです。 URLはこちら YouTube8-M https://research.google.com/youtube8m/explore.html 提供されているサービスは以下の通り 800万個の動画 19億個のフレーム 4800個の分類 使い方はExploreから画像セットを探し、ダウンロードするだけ。 他の方法も見つけた open images dataset 「すごい神だな」と思ったのは これもう完成されてますよね もちろんこの認識前の画像もセットでダウンロードできます。 Youtube-８Mとは、画像数を取るか、精度で取るか、という違いでしょうか。 他にも良い素材集を教えていただきました （はてなブックマーク情報 @sek_165 さん ）

前提 github リポジトリはprivate main ブランチ = master ブランチ vercel next.jsは使っていてもいなくてもいい やりたいこと 例えば、github上でmainへのPRをマージしたときに、vercel上では そのコードで 環境変数とドメインだけが異なる本番環境,デモ環境,開発環境の3つの環境がデプロイされるようにしたい 本番環境(prod) 本番用の環境変数を使い、実際に本番APIと疎通する ドメインは a.com とする デモ環境(demo) デモ環境用の環境変数を使い、デモ環境用APIと疎通する ドメインは a.demo.com とする to Bの顧客が試す環境というイメージ 開発環境(dev) 開発用の環境変数を使い、開発環境用APIと疎通する環境 ドメインは a.dev.com とする 開発者が試す環境 AWS Amplifyは1ブランチに対

はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取

2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード

この記事では、Webフロントエンド開発において役に立つと思われるサービスやツールをまとめます。 全般 Can I use 指定した特定の機能が、どのブラウザのどのバージョンで利用可能かを確認するためサービスです。新しいJavaScriptのAPIやCSS3の機能を使ってモダンなWeb開発を行う場合、必須とも言えるくらい利用することになります。 指定した国におけるブラウザのシェア情報をもとにして、特定の機能が何割のユーザーで使用可能かを調べることもできます。 npm / webpack BUNDLE PHOBIA 指定したnpmパッケージのサイズを調べるサービスです。近年のWebではページの表示速度が非常に重要視されており、Webサービスにバンドルするパッケージのサイズも極力小さくすることが求められています。パッケージのサイズを調べる方法は多々ありますが、このツールの場合はパッケージ自体のイ

おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小

個人開発・ポートフォリオ作成をする方に贈る いくらプロダクトが素晴らしいとしても、一見してダサいデザインだと、ユーザーは使う気がなくなってしまう。 でも、今からデザインの勉強をするのは面倒だし、そこまでこだわりがあるわけでもない。 Q. 簡単に及第点のデザインにできるサービスとかないんですか？ A. あります。 ということで、デザインのことはよくわからなくても、簡単にそれっぽくできるサービスをまとめました。 個人的には、「それっぽさ」の大部分はページレイアウトと画像、「こなれ感」は配色とフォントによって構成されていると思っています。 また、私はケチなのでここで紹介しているものは、すべて無料で使えるサービスです（課金プランはある）。 書かないこと 細かい使い方 大体有名なので、使い方はggれば出てきます。 ライセンスなどの情報 特に素材系は規約などを確認の上で使ってください。 あくまでも、こ

最近、あまりプログラミングが得意でない人のサポートをする形で、長い時間にわたってペアプログラミングを行っている。そのなかで、気がついた悪い習慣と成長するための良い習慣というものをまとめてみる。 この記事のバックグラウンドとなる体系的知識が本になりました。 エンジニアリング組織論への招待 ～不確実性に向き合う思考と組織のリファクタリング あわせて読みたい 経営者マインドが足りない！vs. 現場に任せてくれない！の対立をなくすカードゲームをつくった話 新人プログラマに知ってもらいたいメソッドを読みやすく維持するいくつかの原則 新人プログラマに知っておいてもらいたい人類がオブジェクト指向を手に入れるまでの軌跡 ペアプログラミングして気がついた新人プログラマの成長を阻害する悪習 あきらめるにはまだ早い！ソースコードの品質向上に効果的なアプローチ 心理的安全性ガイドライン（あるいは権威勾配に関する一

2020/9/30追記 本記事は元々、「SQL記述者全員が理解すべきSELECT文の実行順序のお話」というタイトルで投稿しておりました。 しかし、知見のある方からのコメントと自分でも調べてみた結果、今回紹介している順序はあくまで論理的な処理順序であり、実行順序とは別物ということがわかりました。 誤った知識を布教してしまい申し訳ございません。 2020/9/30のタイミングで、本記事のタイトルを「SQL記述者全員が理解すべきSELECT文の論理的な処理順序のお話」に変更させていただきました。 はじめに 「SQLといえば、エンジニアが扱うスキル」と思われがちですが、最近はマーケターや営業など、非エンジニアの方もSQLを使って、自らデータを抽出し分析する方が増えてきています。 またエンジニアの方でも、ORM任せでなんとなく理解している状態の方もいるのではないでしょうか？ 今回は、そんな方々にこそ

1. はじめに 本稿は、私が1年以上の期間をかけて、成長し続けるチームに変わることができた施策を紹介します。 本稿は長文なので、忙しい人は太字だけを拾い読みして、興味をもった施策だけを詳しく読んでいただければと思います。 なお、本稿の内容で「Developers Summit 2020 KANSAI」というカンファレンスで発表した結果、ベストスピーカー賞1位をいただきました。発表を視聴してくださった方々に感謝しております。 発表資料と発表動画はコチラ 2. 施策の効果 私の開発チームは当初(1年と数ヶ月前)は、以下の状態でした。 あまり積極的に今のやり方を変えようと思っていないチーム メンバーは、中堅(私)が1名と入社2年目と3年目の3人(後に新人が配属して途中から4名に) 全員、技術記事を書いたことがない 全員、社外の勉強会などのイベントに参加したことがない 全員、開発知識は、業務で教え

ウェブ・セキュリティ基礎試験を受験してきました。 とてもいい資格なので少しでも合格者が増えるように勉強方法含め情報共有します。 ウェブ・セキュリティ基礎試験とは 徳丸本の愛称で有名な体系的に学ぶ 安全なWebアプリケーションの作り方の理解度を問う試験です。 問題作成をご担当されている徳丸先生にちなんで徳丸試験と呼ばれています。 Webアプリケーションを開発するにあたって、知っておくべきセキュリティや脆弱性の知識を身に付けることができます。 「徳丸本読まずしてWebアプリケーションを作るなかれ」と言うぐらい必須の知識です。（私が勝手に言ってるだけです。） 詳細は以下をご覧ください。 https://www.phpexam.jp/tokumarubasic/ 試験の基本情報 試験の形式は以下の通りです。（執筆時点）