JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
【TypeScript】超実践的テクニック集【Reactなし】 - Qiita
はじめに この記事はニジボックスQiita記事投稿リレーの2日目の記事です🌈 TypeScript（Reactなし）のフロントエンド実務現場で1年半ほど業務してきたうえで、頻繁に使うTypeScriptのテクニック（tipsレベルですが）をまとめていきます。タイトルはちょい盛りです。 手続き型でDOMを直接ゴリゴリいじくるイベント駆動のスタイルで、いわゆるモダンフロントな現場ではないという点、あらかじめご承知おきください。 1. 自分で定義した型に型ガードする 1-1. ユーザー定義型ガードについて TypeScriptではtypeof、instanceof、inなどの演算子を用いて変数を型ガードできますが、これらの演算子では自分で定義した型へは型ガードすることができません。 type Hoge = "hoge" | "fuga"; const attr = document.query
Reactにおける再利用とテストを容易にする疎結合なUIを目指す3つのTips
はじめに コード上での問題を正確に認識しておかなければ、問題を繰り返すのです。Reactを使用したプロジェクトに参画したり、OSSプロジェクトのソースコードを散見すると複雑な仕様に立ち向かったUIに出会うことがあるでしょう。 複雑な仕様に立ち向かったUIは以下の特徴があると考えています。 bundle size が肥大している 保守や維持の管理が高い 他開発者にこのUIは何をやっているのか、質問をしなければならない。 質問の回答を聞いてもそのUIが実行していることが多様で理解しづらい。 再利用性が低い そのUIを利用するために満たさなければならない条件が多く、新しく似ているUIを実装することになる。 複雑なAPI 片手の指の数では溢れる props の数が存在している ユースケースを満たすために、既存の機能を使えば実装ができるのか、判断がしづらい 上記のようなUIを見かけた場合、どのような
【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita
こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。 普段はCSSアニメーションで遊んだりしています。 （頑張って作ったのでよかったら見てね！！！！！） 何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？ 現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。 この記事ではCSSでよく使う（気がする）レイアウトパターンの中で、センタリングに関するものをまとめました！ まえがき この記事では各実例を独自の指標で評価して示しています。 長い記事になる予定なので、部分的に読まれる場合の参考になさってください。 実用性：記述量や例外（中身の文章が長い・改行がある要素など）への対応力など。 よく見る度：コーディングしていて出てくる頻度(n=1)。 お前しか勝たん度：独自性が強い・他の方法では代替しづらいもの
HTMLだけでスマホのカメラにアクセスできるの知ってた？ 前面・背面カメラにアクセスできるHTMLのcapture属性
HTMLだけでスマホやタブレットのカメラにアクセスできる、HTMLのcapture属性を紹介します。 私はこの属性を知らなかったのですが、実際にiPhoneとiPadで試してみたところ、前面カメラにも背面カメラにもアクセスできました。JavaScriptなどは必要なく、簡単なHTMLでできます。 You Can Access A User’s Camera with Just HTML by Austin Gil (@heyAustinGil) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのcapture属性とは capture属性のサポート状況 終わりに はじめに 私は先日、今までに見たことがないHTMLの属性、captureに出会いました。capture属性は非常にクールなので、動画と記事を書くことにし
最近見かけた、CSSの一工夫加えたスゴ技テクニックのまとめ
Apple, Nike, Tesla, AirbnbなどのWebサイトやスマホアプリで使用されている、CSSの一工夫加えたスゴ技テクニックを紹介します。 美しい磨りガラスのヘッダ、コンテンツがズームするエフェクト、タッチフレンドリーなカルーセル、超クールなスワイプオーバーセクション、新感覚のスワイプアップするドロワーなど、すぐに使えるCSSのテクニックです。 my favorite clever CSS tricks by @Steve8708 下記は各ポイントを意訳したものです。 ※著者様の許諾のもと、翻訳・掲載しています。 Apple: ヘッダに使用されている美しい磨りガラスのエフェクト Appleのヘッダに使用されている、美しい磨りガラスのエフェクトはCSSで実装されています。 How does Apple make that awesome frosted glass effect
「話しても結論が出ないムダ議論」をやめるための、議論・ファシリテーションのツボ - BizReach Tech Blog
キャリトレ事業部の松岡(@little_hand_s)です。 キャリトレチームでスクラム開発を導入し、議論の機会が増えたため、議論自体の効率化必要性に突き当たりました。 そこで、会議設計やファシリテーションの書籍を何冊か読み、実際に現場で実践してみたころ、 議論が必要な仕事であれば幅広く、確実に生産性を向上できるという手応えがありました。 その実践結果から、再現性が高く、すぐ実行できそうなTipsを抜き出してまとめました。 「キャリトレ」は2022年12月21日をもってサービス終了しました。 議論を始める前に、必ず目的とゴールを設定する 議論を行う場合は、以下の2つを必ず設定します。 目的：なぜその会議を行うのか？ ゴール：議論終了時にどういう状態になっていたいか？ これはとにかく基本です。これを守るだけで、生産性が大幅に上がるので、まずはこれを徹底しましょう。 対象は主に会議のような場で
[初心者向け]AWS Well-Architected ドキュメントの歩き方 | DevelopersIO
2022バージョンについて 新バージョンをリリースしています。 今後はこちらをご参照ください。 以下2021バージョン AWS認定トレーニング講師の平野@おんせん県おおいたです。 今日はWell-Architectedがテーマです。 はじめに AWS Well-Architected フレームワークとは AWSとAWSユーザの10年以上の経験からまとめられたベストプラクティクス集です。 いいかえれば、多くの失敗反省を元に作られています。 これからAWSを活用する際に、皆さんが同じ失敗をしないためのガイドラインとも言えます。 AWSを始めたら、まずは目を通してもらいたいドキュメントです。 とはいえ... とはいえ、このドキュメントなかなか読みづらいです。 私も正直最初は？？？という感じでした。 そこで、これからWell-Architected ドキュメントを読む方のサポートができないかと思い
![[初心者向け]AWS Well-Architected ドキュメントの歩き方 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/61b8033f05d1e5ba2c6b80dad8bd07c481d8078f/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2021%2F06%2FWA_guide-1.png)
この単語さえわかれば、英語の技術書がサクサク読める!英単語まとめ(保存版) - Qiita
はじめに 英語のプログラミング教材って、良いって聞くけど、英語に苦手意識があるから使ったことがない...。 私もその一人でした。ですが、この単語さえわかっていれば、なんとか英語のDjangoの本を読み切ることができました。 これから英語でプログラミング学習したい人は見ていただけると役に立つかもです! execute 実行する 例文 execute the migrate command migrate コマンドを実行する navigate 移動する 例文 Navigate to our homepage at http://localhost:8000/ http://localhost:8000/のホームページに移動する configure 設定する 例文 the project configured for local development ローカル環境で設定されたプロジェクト co
IE終了後にWeb制作の現場で使えるHTML&CSSコード14選！おさえておきたいコードを集めてみた | Pulp Note
マイクロソフトから正式にInternet Explorer 11 デスクトップアプリケーションのサポートを終了する発表がありました。期限は2022年6月15日です。Webサイト制作者としては歓喜の出来事ですね。 ただ、IEを気にしなくてもいいという事は、IE対応をしてきたコードの見直しも必要となります。そこで今回は、IE未対応で泣く泣くスルーしてきた即戦力なHTMLやCSSコードを14個紹介します。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。 ちなみに、『Windows10 LTSC』や『Windows Server上のInternet Explorer11 デスクトップアプリケーション』といった一部のIE11には影響はないとの事ですが、一般ユーザーが利用する『Windows10のInternet Explorer』はサポート対象外となりますので、これはIE終了と
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
LGTM! チャットやGitHubでよく見る英略語ってこんな意味-Six Apart ブログ｜オウンドメディア運営者のための実践的情報とコミュニティ
こんにちは、シックス・アパートのにっくです。 多くの開発者が利用している「GitHub」。GitHubでは世界中の開発者が議論を交わしながら、プロジェクトを進めています。GitHub については以前、こんな記事も書きました。 「そもそもGitって何？」、「GitとGitHubは何が違うの？」にシンプルに答えるよ GitHubを見ていると、「LGTM」や「SSIA」など、いろんな英略語を見かけます。チャットと同様に、素早いコミュニケーションのために、タイプ量を減らして言いたいことを伝える省略語がたくさん生まれているようです。よく見かける、ひと目では意味が分かりづらい英略語を、いくつかピックアップしてご紹介します。 AFAIK - "As Far As I Know” AFAIK、と言われてもひと目では何のことだかわからない略語ですね。 「自分が知っている限りでは」という意味になります。 FY
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
GitHubのcommitのURLの末尾に ?w=1 とつけると差分がわかりやすい（時がある） - 納豆には卵を入れる派です。
各commitのURL https://github.com/hoge/fuga/commit/xxxxxxxxxxxxxxxxxxxの末尾に "?w=1" をつけてhttps://github.com/hoge/fuga/commit/xxxxxxxxxxxxxxxxxxx?w=1とすると、差分がホワイトスペースのみの行を省いて、文字の変更があった行だけを差分表示してくれるので、何を変更したかがピンポイントですごくわかりやすくなる場合があります。 例えば下記の例。CoffeeScript内である部分をコールバックにして、コールバックした部分のインデントをごっそり下げてるのですが、インデントを変えただけの行も全部差分に表示されてて、何を変えたのかひと目でわかりづらい。 普通のcommit表示 ↓ これがURLに"?w=1"をつけるとこうなる！！！ ↓ 単にインデントを変えただけの行が省かれ
Vim でコピペするときの Tips - 反省はしても後悔はしない
この記事は Vim Advent Calendar 2012 の 40 日目の記事です。 昨日は @kokukuma さんのなんかvimがセグメンテーションフォルト吐いたんですけど。。でした。 はじめに プログラミングに限らず、何かを書くときにコピー＆ペーストってよく使いますよね。Vim でも当然その機能はありますが、Vim の場合はレジスタという仕組みによってさらに便利に使うことができます。 今回は、私が最近覚えてすごく便利に思ったコピー＆ペーストに関する小ネタを書きます。 前提知識 レジスタとは 文字列を y でコピー（Vim ではヤンクといいます）すると、その文字列は無名レジスタに蓄えられます。d とか c とかで削除した時も同様です。無名レジスタに記録された文字列を貼り付けるには単純に p や P を使います。 "ayy とか "bdw とすると、明示的に a レジスタや b レジ
JavaScriptでうっかりやってしまいそうなこと色々
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
Titanium Mobile TableView Tips
このサイトについて Titanium MobileのAPIの一つであるTableViewに特化したTIPSを紹介していきます。 最近の投稿 Listview Calendar（更新日:18 Jul 2012） Basic Tableview（更新日:17 Jul 2012） Jekyll Introduction（更新日:29 Dec 2011） Jekyll Introduction（更新日:29 Dec 2011） カテゴリ lessons Basic Tableview Jekyll Introduction Jekyll Introduction ui Listview Calendar
iPhoneに慣れていない人に教えると感動される10の機能 | nanapi[ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【エンジニア向け】コピペで使えるChatGPTプロンプト構文20選！現役エンジニアが厳選- AIの島
GitHub - ibraheemdev/modern-unix: A collection of modern/faster/saner alternatives to common unix commands.
