はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。

物理情報工学ソフトウェア開発演習

はじめに 私のエンジニアとしての初仕事はDockerでした。辛かったのをいまでも思い出します みなさんこんにちは、Watanabe Jin(@Sicut_study)です。 みなさんはエンジニア始めたての時にどんなことで苦労したでしょうか？ GitHub Docker Kubernetes AWS など色々あるかと思いましたが、「環境構築」というのは多くの人がつまづく箇所かと思います。 プログラミングの勉強をするにはそもそもの開発環境がないとできないことも多いです。 またAWSなどのクラウドを利用してデプロイをするときにも再度登場して苦しめられます。 今回はそんな初心者には考え方や使いどころがわかりづらいDockerについて例え話を活用しながら説明していきたいと思います。 Dockerが難しいと思うのは、「概念がよくわからない」「説明を読んでも使いどころのイメージがつかない」というのがある

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても

連載目次 前回はGitHub Pull Requests and Issues拡張機能を使って、Visual Studio Code（以下、VS Code）の中からissueを作成してみました。今回はVS Codeでソース管理をしていく上でインストールしていると便利なもう一つの拡張機能「GitLens」を紹介します。 GitLensとは GitLensを使うと、誰がこのコードを書いたのか、このコミットは誰により行われたのか、コードはどのように変わっていったのかなどを、VS Codeの内部で簡単に参照できるようになります。

not Tailwind CSS プロジェクトを Tailwind CSS に移行する機会があったのでアプローチを紹介します。 ポイント ベースが16px ではない場合、tailwind-pixel-perfect-preset で rem to px を行い、 Taiwlind CSS のサイズ指定(h-4など）を踏襲する tw- prefix をつけて既存スタイルの競合を回避する Tailwind CSS のノーマライズスタイルを無効にして既存スタイルへの影響を回避する ノーマライズスタイルをスコープ化して既存スタイルへの影響を防ぎつつ Tailwind CSS 正確なスタイルを実現する import { isolateForComponents, scopedPreflightStyles, } from "tailwindcss-scoped-preflight"; /** @ty

きっかけ 東京大学のAWS講義「コードで学ぶAWS入門」、いわゆる東大AWSってやつが良いらしいと聞いたのでやってみました。 確かにこれは良いです。クラウドをこれから学びたい方にぜひおすすめ。 集中講義的に休日に半日もあれば学べます。 かかるAWS費用もわずか。 ほとんどのチュートリアルがAWSの無料枠で実行できてしまいます。ディープラーニング用のGPUインスタンスをぶん回すところは有料です。それでも数百円で済みます。 これは一通りハンズオンをやってみたAWSの費用です。 もはや学ばない理由が見当たりませんね。 これを書いた理由 けっこう有名な講義資料なのでいまごろ紹介するまでもないネタかと思っていましたが、いざやってみたらハンズオンのコードが最近のAWS環境では動作しない箇所がいくつかあったので。 動作するように修正した手順をまとめておきました。 本記事がはてブを950件ももらってしまい

PHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26d…

今回のAgendは、”組織開発するマン” こがねんさんに『1on1』についてお聞きしました。 こがねんさんこと小金 蔵人さんは、ZOZOで組織開発の部門長として活躍する傍ら、個人でもさまざまな企業の組織づくりに貢献しています。 もともとはヤフー（現：LINEヤフー株式会社）で1on1文化と出会い、これまで1on1の活用を深く考えてきたこがねんさんは「いい1on1をやる必要はない」と言い、どのように1on1を捉えるとチームコミュニケーションが良くなるのかを教えてくれました。 上司・部下側どちらにとっても発見のある「1on1の本質」が語られていると思います。ぜひ最後まで読んでいただければ幸いです。 株式会社ZOZO 人自本部 組織・人材開発部 ディレクター。 1998年に味の素株式会社に入社。2006年にヤフー株式会社（現・LINEヤフー株式会社）に転職。2016年に人事部門に異動後、一貫して

Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/content/iss

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前置き 今年も残り半年、4月に入社した弊社のキラキラ新卒社員は数ヶ月間の研修を終えて実際の業務に関わり始めてる様子が見られるようになりました。これから業務で開発を進めていくにあたってAWSに触れていく機会も増えていきます。 分からない事があれば社内で相談したり、サポートに問い合わせたり、今だったらChatGPTを活用するなどである程度どうにかなりますが、もっと前のめりになってAWSの事を知りたいとなった時にスムーズに必要な情報にアクセスできるように整備したいなと思い、公式をこれでもかと使い倒してもらえるようなコンセプトのまとめ記事として

はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。 もちろんログ内には{式}という書式を使えば式も含めることもできます。 既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！ これで 「プリントデバッグしたprint行を消し忘れてPRあ

パフォーマンスチューニングの基礎:プロファイリング 2023年4月3日 著者: 竹洞 陽一郎 はじめに Webパフォーマンスチューニングは、WebアプリケーションやWebサイトのパフォーマンスを向上させるために実施される最適化手法の一連です。 効果的なパフォーマンスチューニングを実現するには、正確なプロファイリング情報が欠かせません。 フロントエンドの品質管理では、プロファイリングを利用して時間消費別のパレート図を作成し、最も時間を消費している部分から改善を開始します。 パフォーマンスチューニングに詳しくない方向けに、Lighthouseが利用できます。 ただし、実務におけるパフォーマンスチューニングでは、Lighthouseだけではボトルネックの特定が難しいことがあります。 これからWebパフォーマンスチューニングを始める方や、現在Webパフォーマンスチューニングに取り組んでいる方には、

Microsoftは2023年2月21日（米国時間）、初学者向けにBashを解説する全20回の動画シリーズ「Bash for Beginners」をYouTubeで公開した。 開発者向けQ＆Aサイト「Stack Overflow」が2022年に実施した開発者調査でも、Bashは最も人気のある技術の7位に選ばれている。Bashは汎用（はんよう）性の高い強力なスクリプト言語であり、タスクの自動化、ファイルの管理、クラウド環境での作業などさまざまな領域で利用されている。 なぜBashの学習が他のスキルに役立つのか 関連記事 未経験者に「プログラミング言語」は求めない　調査で分かった企業が期待するスキルとは パーソルキャリアは、「doda ビジネスパーソンと企業の転職意識ギャップ調査」の結果を発表した。それによるとITエンジニア職「未経験歓迎」求人の割合は2年前（2021年1月）に比べて約3.0倍

はじめに はじめまして！ t_powerです。 本記事では、社内FAQをBotUIでチャットボット化した話を扱います。 プログラミング知識があまりない・・・ チャットボットを作ってみたいけど難しそう・・・ と思っている人にはぴったりのツールだと思うので、是非ご覧ください！ 今回作成する上で下記のサイトを参考にさせていただきました。 この記事を見て実際に作ろうと思っている方はこちらも参考にしてください。 1. JavaScriptだけで本格的なチャットボットを開発できるライブラリ「BotUI」を使ってみた！ 2. チャットボットを作ろう：2. JekyllサイトでBotUI 今回作成したもの 「はじめる」と書かれているバナーからチャットボットを使うことができます。 作ろうと思った経緯 before 従来は、問い合わせをメールなどで受け付けて、担当者が直接回答をしていました。 類似の問い合わせ

池田 泰延 @clockmaker ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。 ics.media/entry/staff/ik…

本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した

ChromeデベロッパーツールはGoogleのChromeブラウザに搭載されたWeb開発を支援するためのツールです。 Google Analyticsのような計測タグの設定やSEOのサイトチェック作業を行う方であれば一度は使ったことがあると思いますが、ツールが持つ様々な便利機能を知れば検証作業の精度と効率を改善できます。 本記事では主にChromeデベロッパーツールの「Networkパネル」を使った通信内容の確認作業に使える便利な機能を広くご紹介します。 Chromeデベロッパーツールの呼び出し方 Networkパネルの基本的な使い方 スマホ向けページの通信を確認する 通信内容をフィルタリングして確認する 特定の通信をブロックする 通信の発生元を確認する Networkパネル内の各コントロールの機能概要 おわりに Chromeデベロッパーツールの呼び出し方 Chromeブラウザで開いている

この記事はNuco Advent Calendar 2022の7日目の記事です はじめに 株式会社Nucoでエンジニアをしている@noshishiです。 今回は、ついついその場限りのコマンド実行で乗り越えがちなGitを、コマンドを使わず理解するための記事を書こうと思います。 Gitとは バージョンを管理し、作業を分散する Gitは、分散型バージョン管理システムと呼ばれるソースコードの管理システムの1種です。 Gitは、ファイルの変更履歴（バージョン）を記録・追跡することで、過去と現在のファイルを比較し、変更点を明らかにすることで、円滑に開発作業を進めるためのツールです。 また、一度に複数の開発者がファイルを編集できるシステムなので、作業を分散して行うことができます。 Gitを使うということ まず、みんなで共有できる保存場所（以下、リモートリポジトリ）にあるファイルなどを、手元のパソコン（以