シンプル図解: 正規表現の (?= ) とか (?! ) とか (?<= ) とか (?<! ) とか - Qiita
入社1年目、趣味は整理整頓、 @pal4de です。 正規表現が大好きです。 先日投稿した記事が好評いただき本当にうれしかったです。もっとたくさんの人に読んでもらいたい！！！ さて、上の記事で紹介したのは単語境界 \b でしたが、これは先読み/後読みを駆使して下記の通りに表せると紹介しました。 便利な\bですらショートハンドに過ぎず、真に強力なものは 先読み(?=...)と後読み(?<=...) だということを主張したい！！！ わかりすい図解も添えましたので、是非お楽しみください🏝️ 正規表現の記号は4種類 先読みの紹介に入る前に、改めて正規表現を俯瞰してみましょう。 誤解を恐れずに言えば、正規表現に出てくる記号の種類は4つしかないといえます1 2。 このようにとらえてみると、正規表現と向き合うのがだいぶ楽になります。体系化された理解への第一歩ですね 🗿 図にもある通り、 行頭 ^ も
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事になる予定なので、部分的に読まれる場合の参考になさってください。 実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。 よく見る度：コーディングしていて出てくる頻度(n=1)。 お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの
フロントエンド(React)の技術質問 - Qiita
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は、現場で後輩に質問されたReactの技術質問をまとめていきます。 なお質問に対しては一問一答形式で答えるのではなく、深ぼって解説をしていきます。 この記事の対象者 フロントエンジニアを目指している人 React初心者から中級者 Reactの質問をされた時にうまく言語化できない人 この記事の目標 Reactでよく使われている技術を言語化できるようになる 何となくの理解から脱却する おことわり 本記事は面接等で聞かれる質問テンプレート集ではありません 現場で後輩に聞かれた質問を深ぼって解説をするノリで書いてます Reactフックとは何か？ Reactフックは公式ドキュメントにおい
初学者が覚えたいチーム開発でのGit操作 - Qiita
はじめに 個人開発の場合はそんなに意識することがないGitですが、チーム開発においては重要な役割を果たします。 はじめのうちは構造が見えず混乱するかと思いますが、流れをイメージ出来ればそんなに難しいものではありません。 これを見れば開発に必要なGitコマンドとリポジトリの構造、Githubでの管理手順を理解し開発の現場で実践できるようになります。 そもそもGitとは？ 変更履歴を記録・追跡するための分散型バージョン管理システムである。 ざっくりいうとファイルのバージョン管理が簡単にできるツールといえます。 目次 Gitを理解するための基本用語 開発の流れ その他開発で覚えておきたい便利コマンドと注意点 vscodeでのGUI操作について 最後に Gitを理解するための基本用語 リポジトリ（repository） ファイルやディレクトリを入れて保存しておく貯蔵庫 リモートリポジトリ...特定
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
今日から始める負担にならないWAI-ARIA - Qiita
WAI-ARIAとはなにか 「Web Accessibility Initiative - Accessible Rich Internet Applications」 の略で、 「ウェイ・アリア」 と読みます。 WAI-ARIAをつかえば、HTMLだけでは不足している セマンティクス（意味） を属性で補完することができ、 支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる ようになります。 WAI-ARIAの注意点 あくまでも 「必要な場合のみ使用する」 技術です。 HTML5タグのセマンティクスで解決できるのであれば、 HTMLで対応するのが基本 です。 WAI-ARIAのつかいかた 決められた 「属性」 をHTMLタグに追記して使用します。 以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。 （その他、詳細については参考サイトをご
わかりやすいシステム構成図の書き方 - Qiita
わかりにくいシステム構成図とは こんなシステム構成図を書いてないでしょうか？ このシステム構成図のわかりにくい点が３つあります。それは 製品名は書いてあるが「役割」が書いていない データと処理が区別できない データの流れと制御の流れが区別できない の３つです。 わかりやすいシステム構成図 これら３つのわかりにくい点を改善したわかりやすいシステム構成図が↓です ポイントを解説していきます ポイント1. 製品名称ではなく「役割」を書く システム構成図には製品名称ではなくシステムコンポーネントの「役割」を書きます。 役割とは、例えば〇〇データや〇〇処理といったことであり、それを読むだけでシステムの動きを理解できる文字列です。役割をかかずに製品名称のみを書いてしまうと、その製品を知らない人が見たときに理解できません。例えば「Cloud Pub/Sub」という製品はGCPというパブリッククラウドの分
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
Reactが好きです。 Reactが好きです。コンポーネントを関数として扱うのが好きです。 SolidJSはReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。 コードの比較 React const Counter = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count: ${count}`) }, [count]) return ( <div> <div>{count}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button> </div> ) } const Counter = () => { const [count, setCount] =
「なんのために作るか分からへん」と愚痴っていたらPMさんが救ってくれた話 - Qiita
※今回はほぼ実話です。 システム開発会社勤務 プログラマーワイ ワイ「さあ、今日も開発をしていこか」 ワイ「とあるWebサービスの管理画面を作らなアカンのや」 ワイ「今日は、どんな機能を作らなアカンのやったかな」 ワイ「せや、クライアントさんからもらった機能一覧.xlsを見てみよか」 ワイ「あとは、デザインデータも見ながら、詳細設計書でも作っていこか」 ワイ「・・・ふーむ、作るべき機能の一覧は書いてあるんやけど」 ワイ「なんか、やる気が出ぇへんなぁ」 ワイ「仕方ないから、社内のSlackで愚痴っとこか」 ワイ「今のプロジェクト、誰のために何を作ってるのかがイマイチ分からんから」 ワイ「モチベーションが上がらへんなぁ」 ワイ「この管理画面を使って、どんな課題を解決したいのか」 ワイ「どういう風にユーザーさんの業務をうまく回したいのか」 ワイ「そんなんがピンと来てないから、作るべきモノもはっき
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
ワイ「なに！？普通のJavaScriptなのに型が書けるやと！？」 - Qiita
リモートワーク中ワイ ワイ「あー、もう10時10分やないか」 ワイ「10分もぶっ続けで仕事してもうたわ」 ワイ「そろそろ10分休憩しよか」 ワイ「むしろ、今日はもう上がってまうのもアリやな」 ワイ「今日はもう十分働いた、いうてな」 ワイ「ガーファファファ！！！」 Twitterでも見てみる ワイ「ほなTwitterでも見てみよか」 ワイ「お、今日もエンジニアさんたちが技術ツイートをしてて、勉強になるなぁ」 ワイ「ふむふむ・・・なに！？」 ワイ「普通のJavaScriptで、型が書けるようになるやと！？」 ワイ「TypeScriptなしでか！？」 娘（6歳）「いや、まだそういう提案がされてるだけだよ」 ワイ「おお、そうなんか娘ちゃん」 これが実現されたら ワイ「でも、もしこれが実現されたら・・・」 「コンパイラ要らずで型の恩恵を受けられて、ハッピー！」 ワイ「↑こういうことやな？」 ワイ「も
文章が下手なワイが、技術記事を書くときにやっていること - Qiita
文字での説明、むずい 「対面で説明するのは得意だけど、文章を分かりやすく書くのは、なんか難しい・・・」 そんなことってありませんか？ 私はあります。 小学生のときの作文は、オカンに書かせていました。 担任の先生は、 先生「やめ太郎の作文、面白いから」 先生「オレ、楽しみにしてるんだよな〜！」 と言っていました。 コツが分からない 読みやすい説明文を書くコツが、イマイチ分かりません。 そのため、なんか読みにくい文章を書いてしまいます。 例えば、 動的型付き言語でのプログラミングに慣れきった人が静的型付き言語に学びの足を伸ばそうとしたときに考え方の違いから強い違和感を覚えてしまい学習がなかなか捗らない現象が起きることがあります。 ↑こんな感じです。 めっちゃ読む気を奪ってくる文章ですよね。 なので、「分かりやすい文章の書き方」をネットで検索してみたこともあります。 どうやら、 長い文を、複数の
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
継続される1on1のコツ、話す内容例と1on1の目的について【2022年版】 - Qiita
本記事ではSIerに所属する著者が3年間にわたり、私たちのグループで実践している「1on1」の内容を紹介します（グループの業務内容は主にAI系の自社製品開発です）。 ・1on1をこれから始める方 ・1on1の取り組みを検討をされている方 ・1on1を実施しており、さらに改善を検討されている上司側の方 ・1on1を実施してもらっているが、なんだかしっくりきていない部下側の方 こうした方々にとって、何らか参考となれば幸いです。 とくにIT系の企業や職種では1on1を開催しているところも多いと思います。 新人プログラマの方にとっても、1on1を実施する側がどのようなことを考えて実施しているのか、ひとつの例として参考にいただければ幸いです。 （なおQiitaでは現在、新人プログラマ応援 - みんなで新人を育てよう！企画も開催中です） 私が自分の頭を整理するために記事化しましたが、非常に長い文章にな
Three.jsの勉強の仕方 - Qiita
概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl） - Qiita
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl）TypeScriptNext.jsdeckgltailwindcssMapLibre はじめに はい！！！今年もやってまいりましたMIERUNEアドベントカレンダー！！！ 記念すべき1日目は「何をするにもまずは環境構築からだよね！」ということで、モダンな技術をふんだんに使ってフロントエンド側の環境を構築し、簡単な地図アプリ用テンプレートを作成いきたいと思います！ 最新技術を利用すればめんどくさい環境構築も簡単に行えるようになるぞーっていうのを知ってもらえればなーと思います！ こちらに記載の手順を全部実行したテンプレートは以下のリポジトリで公開していますので、せっかちな方はこちらからどうぞ！ https://github.com/n
モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
急なTypeScript案件🔥最初の30日間に使い倒したい「コードリーディング支援ツール」 - Qiita
この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ
API設計スキルを次のレベルに引き上げるベストプラクティス22選 - Qiita
本記事は、Mohammad Faisal氏による「22 Best Practices to Take Your API Design Skills to the Next Level」（2021年4月15日公開）の和訳を、著者の許可を得て掲載しているものです。 REST API設計のための実践的アドバイス Photo by Andrea Piacquadio from Pexels はじめに すべてが分かりにくく、ひどいAPIに不満を感じたことはありませんか？私はそうです。 マイクロサービスの世界では、バックエンドAPIの一貫した設計が不可欠です。 今日は、知っておくべきベストプラクティスについて、簡潔に説明します。さあ始めましょう！ 用語 API設計は、リソース指向設計というものに従います。3つの重要な概念で構成されています。 リソース：データの一部（例：ユーザー） コレクション：リソー
プログラミングスクールの講師を2年間続けて限界が来て辞めた話 - Qiita
はじめに 某プログラミングスクールで二年間講師をしてました。 受講生の方からの評価点は平均より高く、最終的には全インストラクターの中から代表に選ばれる立場にまでなりました。 始めた経緯 もともと、プログラミングスクールをいつか開きたいと思っていたこともあり、業務委託契約で経験が積めそうなところに応募。 即採用していただき、正社員で働く傍、副業としてプログラミング講師に。 エンジニア歴は当時は5年 得意な言語はPHPのみでした。 コロナ禍で全てが変わった 特定を避ける為に細かな時期は記述しませんが、この復業を始めてから今も尚世界を苦しめているウイルスの流行で事が大きく変貌していきました。 というのも、私が請け負っていたプログラミングスクールでは生徒様が作成したいと言う物をベースにプログラミングを教えるスクールでした。 その中で、コロナ禍前までの生徒様達は明確に、 「ECサイトが作りたい」 「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
