はじめに デリシャスマイル〜1、nikkieです。 控えめに言って神！なオンライン勉強会に参加してきました。 レポートを綴ります〜 目次 はじめに 目次 「勉強法の勉強会」 #YUMEMIxTORALAB 勉強法LTラインナップ（見つかった資料ツイートも一緒に） アーカイブ（みんなぜひ見て！） 感想ブログ（気づいた範囲で） 「内需ドリブン勉強法」ぶっ刺さった！ 会場が色めき立った、ツイート読書術 牛尾さんのnote「プログラミングというより物事が出来るようになる思考法」を思い出す 『エンジニアの知的生産術』の「プログラミングはどうやって学ぶか」も思い出す ツイートめっちゃ流れて楽しい 一人同窓会感！ 終わりに P.S. きっかけはKanonさん 「勉強法の勉強会」 #YUMEMIxTORALAB 今回はなんとあのとらラボ！（虎の穴ラボ株式会社）さんとのコラボレーション！ 今回のテーマは、エ

SVGは、Webサイトの中では、アイコンやロゴやシンプルなイラストに使われている、拡大してもずっと綺麗な画像ファイルです。画像フォーマットでありながら、XMLに基づくマークアップ言語でもあるので、テキストエディタで編集できてしまえるのも魅力。しかもずっと綺麗なんです。 そんなSVGファイルを作るときに僕がよくやることをちょこちょこまとめてゆきます:)。 書き出しはイラレから XMLに基づくマークアップ言語とはいえ、複雑な図形やイラストは、人力では到底マークアップできません…X‹。 図形やイラストはAdobe Illustrator（以下、イラレ）で制作して、そのままイラレから、SVGファイルとして書き出すことが常です。 ここでは、このサイトの左上にいるパンちゃんアイコンを書き出してみます:)。 イラレのデータを用意 まずは何はなくともaiデータを用意しなくちゃいけません。 「新規...（⌘

CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。 コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。 CSS Grid Cheat Sheet Illustrated in 2021🎖️ by Joy Shaheb 同じ作者のFlexboxのチートシートも翻訳しました。 Flexboxでどのように配置されるかをまとめたチートシート 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの構造 CSS Gridの各プロパティ（親要素） CSS Gridの各プロパティ（子要素） CSS Gridのショートハンド 終わりに CSS Gridの構造 CSS Gridの知識をリフレッシュしましょう！ 2021年に備えて、C

2019年1月記事更新 当記事は2015年1月に公開した内容を元に、2019年1月最新の情報に変更しました。 Chromeの仕様が変わり、開発者ツールの「Audits」項目から調べられなくなりました。 現在は開発者ツールの「Coverage」機能で調査できるので記事内容を修正しました。 一度リリースしたサイトがほったらかしで済むならいいんですけど、度重なる仕様変更や機能追加でCSSってカオスになりがちですよね。 綺麗に書かれていないCSSに手を加えるとき、かなり大変だったりしますよね。できるだけ日常的に綺麗に書く努力をしたいものです。 今回は、CSSで未使用のセレクタを見つけて削除する方法をご紹介します！ Google Chromeの開発者ツールに標準で搭載されています。

図のようにflexアイテムを均等に配置する方法となぜ均等になるのかを解説します。 <div class ="flex-container"> <div class ="flex-item">1</div> <div class ="flex-item">2</div> <div class ="flex-item">3</div> </div> .flex-container { display: flex; ... } .flex-item { flex: 1; /* これが重要！ */ ... } このようにflexアイテムに対して、flex: 1;を指定するだけで、flexアイテムの個数に限らず均等幅(同じサイズ)になります。 たったこれだけなのでコピペして使えますが、なぜこうなるかも理解してみてください。次のセクションでなぜ均等幅になるか解説します。 【駆け出しの方へ】独学に限界を

font-sizeはCSSのcalcとvwを使った公式にあてはめて、画面枠に応じた最適なサイズを自動計算できます。 必要なのはフォントの最小値と最大値、画面枠の最大値と最小値の4つの数値です。 calcの公式自体を丸覚えしてfont-sizeやpaddingの算出に流用できるようにしておきましょう。 レスポンシブルデザインの見やすさを決める「フォント」 レスポンシブデザインは、WEBの世界において必須のレイアウトになっていますよね。 その中でユーザー目線の優れたサイト作りをするための要因の一つが、「文字の見やすさ」を保つ事でしょう。 常に見やすいページを作るためには、表示デバイスごとに最適な大きさの文字を表示する必要があります。 ユーザーのデバイスはコントロールできない ただ、ユーザーがどんなデバイスで閲覧するかを制限する事はできませんよね。 となれば理想とするのは臨機応変に対応できる仕組

本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま

【WordPress】今更だけど、WysiWygエディタ（ビジュアルエディタ）で書いた記事にCSSを適用する方法をまとめてみた話PHPWordPress はじめに 未だ世界でも日本でもシェアNo.1を誇るWordPress！！ 我が社においても、WordPressの案件は多い・・・ WordPressの案件をやっていてよく考えるのが、相手にどうやって記事を書いてもらうのか！？です。 WordPressにはデフォルトでWysiWygエディタが搭載されています。 注）現在の最新WordPressのバージョンでは、WysiWygエディタとBlockエディタの両方が搭載されており、デフォルトはBlockエディタになっています。 ただ、WysiWygエディタ（特にビジュアルエディタ）は機能が豊富なので、好き勝手使用されると書いた記事にCSSが適用されず、せっかくデザインしたページが台無しになってしま

アイコンやロゴ、見出しやイラストなど、写真以外の画像ではSVGを使うことが多くなりました。 PNGのように荒れたりしないし、使い方によってはCSSで変更することができるので便利です。 ただ、PNGと違ってSVGは汎用性が高い分、作り方や使い方で気をつけることがたくさんあります。正直まだ把握しきれていないところもあるんですが、社内への共有も含めてドキュメント化しています。 もし、「ここが間違ってるよ」とか「こうしたほうがいいよ」みたいなことがあれば、Qiitaのコメント欄やGitHubのIssueをいただけたらとても嬉しいです。 SVGの作成時に注意すること サイズ削減のためにすること 「オブジェクト」→「パス」→「単純化」でアンカーポイントの数を最小化する（見た目を損なわない程度に留めます） 非表示にしているレイヤーを削除する（非表示レイヤーも書き出されます） 1回しか使わないシンボル図形

regex = /*ここに何らかの正規表現*/; regex.test("あいうえお"); // -> true regex.test("あぁ"); // -> true regex.test("aiueo"); // -> false regex.test("あいueo"); // -> false regex.test("あい うえお"); // -> false

PHPのstringは任意のバイト列を扱えますが、JavaScript/JSONはUnicodeで扱える文字しか扱えません PHPのint / floatはプラットフォーム依存ですが、JavaScriptのnumberは整数と小数を型レベルで区別しません JSONのarrayに対応する型はPHPのarrayのうちリストであるものです PHPは配列(リスト)と連想配列を型レベルで区別せず、どちらもarrayです リストはキーが0からの抜けがない連番になっている要素が0個以上の配列です array_is_list()関数で連想配列とリストを判別できます array_values()で連想配列をリストに変換できます array_filter()の結果はフィルタされたキーがスキップされるのでリストではありませんが、結果をarray_values()に通すことでリストにできます JsonSerial

1. はじめに この記事はNuco Advent Calendar 2022の12日目の記事です。 1-1. 対象者 この記事は ・正規表現に触れたことがあるけど、結局なんだったのかわかっていない ・正規表現の考え方にイマイチ慣れない ・正規表現って美味しいんですか？ というような正規表現初心者の方に向けて書いています。 1-2. この記事を読むメリット 大きなメリットとしては「正規表現の考え方」を身につけることができるはずです。 また記事の最後では正規表現のサンプル集、参考記事および練習サイトを紹介しています。 足りない知識をカバーし実際に手を動かすことで身についていくので、この記事と合わせて参考記事を読んだり練習問題にチャレンジしてみてください。 2. 導入知識 2-1. 正規表現のメリット 具体的な話に入る前に、正規表現を使えばどのようなことができるのか紹介します。 正規表現を用いれ

はじめに 普段、Ruby On RailsでMPA（マルチページアプリケーション）による開発をメインに行っています。 最近「jQueryを使わない」という話しをチラホラ見かけるようになりました。その辺を調べていくうちに自分も「jQueryを使うのやめよう」と思いました。しかし、jQueryに慣れてしまっていて、プレーンなJSで書く方法がパッと出てこなかったので、その辺りを備忘録としてまとめてみました。 jQueryでよく使っていた機能 自社内のプロダクトでjQueryの利用状況をざっと見たところ、利用されている機能としては次のものが多かったです。 セレクタ Ajax イベント ループ それぞれプレーンJSでの記述例を書いておきます。 単一セレクタの例 jQuery

この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で

この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で

こんにちは。ぬこすけです。 最近（2022/10/24）、 setTimeout について記事を書いたのですが、予想以上に多くの人に読んでいただけて嬉しい限りです。 setTimeout によって処理を遅らせることは皆さんご存知かと思います。 （上の記事に詳しい仕組みは解説しているので、ぜひ一読ください） ただ、 setTimeout にも問題はあります。 それは 処理の優先度をブラウザに教えることができない 問題です。 setTimeout はただ処理を後回しにしているにすぎません。 後回しにするにしても「この処理は優先度が低いので、ひまな時にやってね」みたいに詳しくブラウザに教えることができません。 パフォーマンスの観点では、重要な処理は優先的にさばいてより快適なユーザー体験を提供したいところです。 この問題を解決するためにあるブラウザ API が生まれました。 今回はこのブラウザ A

プログラミング学習で模写したWebサイトや、制作したWebサイトで「画面揺れ」や「謎の空白」などの問題は、一度は誰しもが経験しているでしょう。 「何となく使っていたけど、 overflow:hiddenって結局何？必要？ 」 「どう頑張っても要素が画面に収まらない…」 今回は、そんな悩みを持つ方のためにoverflow:hiddenの使い方と効かない時の対処法を解説します。 この記事を読んでわかる内容は以下の通りです。

はじめに この記事は、ちょっとだけGitは使ったことがあるけれども、SourcetreeやGitHubやBacklogなどで出てくるGitのツリー（樹形図）の読み方がよく分からないという人に向けた記事です。なんとな～くで読んでしまっていて、実はよく分かっていないという人も、意外といるのではないでしょうか。 もしあなたが、まだGitを触ったことがなかったり、「変更のステージング」「ブランチにチェックアウトする」と言ってなんの事か分からなかったりしたら、先にこの記事 君には1時間でGitについて知ってもらう(with VSCode) を読んでくることをオススメします。（宣伝） 対象読者の想定レベル Gitを触ったことがあり、コミットをしたことがあるが、本格的なチームでのGitを使った開発は未経験 mainブランチ（masterブランチ）というものがあるらしいということは知っている Source

20190502追記 わかりにくい表現を修正しました 「おまけ」を追加しました 追記ここまで そもそもHEADとは 現在チェックアウトしているブランチの先頭を指す。 ブランチの切り替えという動作は、「HEADの移動＋ワークスペースのファイルの更新」で成り立っています。 詳しくはこちらを参照ください。→ Git のブランチ機能 - ブランチとは ~　(チルダ) ~世代前のコミットを指定できる。 ^ (キャレット) 複数ある親コミットのなかからコミットを指定できる。 絵にしてみる チルダ チルダ指定をすることで、コミットをさかのぼって指定ができます。 HEAD~と指定することで、HEADに対して1世代前のコミットを指定でき、HEAD~~と指定することでHEADの2世代前のコミットを指定できます。 キャレット キャレット指定をすることで、複数親がいる場合に、親コミットを指定できます。 複数親がい

おことわり この記事はプログラミング＆業務未経験の新入社員に、Gitについて1時間程度で説明した内容をもとに作ったものです。自分がもし誰かにGitについて教えて貰える立場にいたら、最初にこれを教えて貰いたかったという気持ちで作りました。 とりあえず「1人のプロジェクト」で「1時間で」Gitをそこそこ知って使えるようになることを目的としています。実際のチーム開発ができる水準までこの記事だけで達することはできませんが、今後Gitを使う必要がある人にとって学習の足がかりになれば幸いです。 それと、新入社員に教えるという都合上、表現がやや正確でなくざっくりしたところがあるかもしれませんが、質の悪い誤解を招くようなものでなければご容赦下さい。 全体像 まずはGitとは何かをざっくり分かって貰った後で、VSCode上での操作を行って頂きます。 Windowsでの説明を行いますが、Macの方は適宜読み替