コードのネストを深くするな | anopara

2014/08/15 407 users result anopara else int a コード

昔の記事にも書いたのだが、ソースコードのネストは小さければ小さいほど読みやすい。 ではどうするか。一つは、returnできるところでさっさとreturnするというのが良いだろうと思う。 たとえば、 public int func1(int a, int b) { int result; if (a > 10) { if (a > 20) { if (a > 30) result = b; else... 続きを読む

VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」

2023/02/27 369 users CSS ボーダー PHP HTML カスタマイズ

HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズ... 続きを読む

【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 ｜ クラスメソッド開発ブログ

2012/10/23 266 users Webデザイナ コーダー向け クラスメソッド開発ブログ 変数

はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回は... 続きを読む

2024年のCSSの書き方、ワークフローとツールについて

2024/01/18 207 users ワークフロー CSS Flexbox subgrid ブラウ

CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウ... 続きを読む

これでよく分かる！ 2023年、CSSとUIの新しい機能のまとめ

2023/05/25 181 users CSS カスケードレイヤー コンテナクエリ 三角関数 広色域

2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラース... 続きを読む

パナソニックにグーグル幹部　外部人材の登用相次ぐ　　:日本経済新聞

2019/10/16 177 users 登用 パナソニック グーグル幹部 外部人材 バイスプレジデント

パナソニックは17日付で米グーグルのバイスプレジデントの松岡陽子氏（48）を役員待遇で迎え入れる。松岡氏はロボット工学の専門家でグーグルでスマートホーム事業「ネスト」を率いた実績があり、その手腕を「つながる家電」などに生かす。同社はビジネスモデルの変革のため外資系企業などから人材を相次ぎ採用している... 続きを読む

Deferred/Promisesと非同期処理 - 素人がプログラミングを勉強していたブログ

2012/12/30 170 users Promises Deferred プログラミング 概念 実装

2012-12-30 Deferred/Promisesと非同期処理 概念/仕組み Deferred/Promisesは非同期処理を簡単にするための取り決め。 callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減することができて非常に便利。 慣れれば便利だが、一見どう使えばいいのか分かりづらいので、少し解説を書く。 ここではPromises/Aという仕様を実装... 続きを読む

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/18 168 users Sass CSSネスト CSSコーディング CSS ブラウザ

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。 続きを読む

JavaScriptの上限・限界値 - Qiita

2022/05/30 151 users 引数 配列 最長 関数 Qiita

JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？ この記事では、そんな素朴な疑問に答えてみます。 テストに使った環境は、 macOS 12.3.1 (Arm64) Node.js v17.7.2 Firefox Nightly 102.0a1 (2022-05-29) です... 続きを読む

そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

2024/04/02 127 users Sass Has カスケードレイヤー ワークフロー 変数

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む

[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js | コリス

2013/03/13 124 users コリス jQuery スクリプト アニメーション 実装

複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組み... 続きを読む

Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid | コリス

2015/03/05 116 users Flexbox コリス カラム グリッド 天地

企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉...記事の続きを読む 続きを読む

HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説 | コリス

2016/12/13 112 users コリス section要素 HTML アウトライン 事例

2016年11月1日に、 HTML 5.1 が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したも... 続きを読む

ネストを覚えた人のためのSassの便利な使い方

2013/02/04 101 users Sass 使い方

10 Favorites keiko kudo, Designer at Bleunote Design,home 1 day ago Kumi Morita, Graphic & Web Designer at Coara 2 days ago Kei Sato 2 days ago kashima kiyoto, front-end-engineer 3 days ago Akira Ito,... 続きを読む

【第5弾】少しのコードで実装可能な10のCSS小技集

2023/09/07 100 users 実装 CSS小技集 コード アスペクト比 目次

2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定... 続きを読む

[CSS]チャイルドセレクタを使った、グリッドを簡単に設計できるフレームワーク -Child Selector System | コリス

2011/03/09 86 users コリス カラム フレームワーク グリッド CSS

チャイルドセレクタ（Child Selector）を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。Child Selector Systemの主な特徴超軽量サイズ（0.31KB）使い方はとても簡単余分なHTMLは最小限コンテナはパーソナライズ可能（%, px, em）カラムのネストをサポート条件付きコメントを使用すれば、IE5.5にも対応C... 続きを読む

現場で役立つ実践Sass（2）セレクタをもっと便利に書く | Adobe Creative Station

2016/01/27 54 users セレクタ Sass 実践Sass Tips CSS

Sassの便利な機能としてまず最初に挙げるとすれば、セレクタをネストして記述できることでしょう。 ネストできることにより、CSSでは繰り返し書く必要があった子孫セレクタをまとめて書くことができ、記述量が減って、コードの見通しも良くなります。ネストができないCSSにはもう戻れないという方も多い…はず。 第二回目の今回は、セレクタ周りのTipsを紹介します。 ※今記事はRuby Sass 3.4.21... 続きを読む

とあるエンジニアの備忘log: LinuxカーネルのMakefileを解析する その2

2014/07/07 54 users Makefile Linuxカーネル Linux エンジニア

2012年2月12日日曜日 LinuxカーネルのMakefileを解析する その2 前回は、LinuxのトップのMakefile の一番外のネスト ifeq ($(skip-makefile),) について説明しました。 その内部にさらにわかりにくい部分があります。 トップのMakefile の400行目付近からは以下のようなコードになっています。 # To make sure we do not... 続きを読む

isValidの書き方 - Mitsuyuki.Shiiba

2014/08/17 46 users anopara bufferings m_seki ツッコミ

2014-08-17 isValidの書き方 きっかけ コードのネストを深くするな | anopara を読んで、 僕もネストは浅い方が好きだけどisValid…お前はダメだ。 - bufferings のコメント / はてなブックマーク って書いたら、@m_seki さんに"isValidダメなんだ。どう書けばいいの？"というツッコミを頂いたので。ちょい考えてみた。まぁ、元記事の主題とは関係ない... 続きを読む

元アップル社員がサーモスタットの歴史を変える！ “冷暖房界のiPod”――「ネスト」の革新性｜ビジネスモデルの破壊者たち｜ダイヤモンド・オンライン

2012/01/03 46 users サーモスタット 昨秋 シリコンバレー iPod ダイヤモンド

ネストは、シリコンバレーの新興企業、ネスト・ラボが開発、販売しているもので、昨秋に発売された。年内に第一弾製造分は売り切れるというヒットぶりで、現在予約した人々が第二弾の製造完了を待っている状態である。 たかがサーモスタットに、なぜそんな人気が、と思われるだろう。そこで、ネストの人気の秘密を4つに分けて説明しよう。 第一は、デザインの美しさ。ネストはステンレス製円形で、中央に設定室温がデジタルにわ... 続きを読む

【エクセル時短】もう「IF」のネストは不要。新関数「IFS」で複数の条件指定を手早く済ます | Excel | できるネット

2017/06/28 44 users IFS IFS関数 イブ 関数 Excel

セルの値によって異なる結果を求める。Excelでよく行う作業ですね。 従来、複数の条件を判定したい場合は「IF」（イフ）関数の組み合わせ、つまりネストすることで求めていました。これがExcel 2016では、 「IFS」（イフエス）関数 によって1つの関数で行えます。 【 エクセル時短 】第16回では、Excel 2016の新関数「IFS」を解説します。 ※IFS関数はExcel 2016に加えて... 続きを読む

Marked.app で GitHub Flavored Markdown を使う - portal shit!

2014/05/12 40 users portal shit シンタックスハイライト 解釈 文章

MacVim で Markdown 形式で文章を書いて Marked.app でプレビューしてた。 Marked.app 、便利なんだけどリストのネストの解釈が GitHub とかの Markdown と違ってて、スペース 4 つ入れないといけないのがだるかった。あとコードのシンタックスハイライトも GitHub のに比べたら弱い。やはり GitHub Flavored Markdown で Ma... 続きを読む

Bolts-Androidで連続したHTTPリクエストをウォーターフォールにする - Islands in the byte stream

2014/05/03 28 users ウォーターフォール HTTPリクエスト Bolts task

AndroidFacebook (Parse) が開発している Bolts-Android は asyn.js のように、ネストしたコールバック呼び出しをウォーターフォールで記述できるライブラリである。コールバックのネストをウォーターフォールで記述できるというのもありがたいが、処理をTaskに分割することで、非同期リクエストを組み合わせて使うことも簡単になっている。Boltsを使わない、ネストした... 続きを読む

PCREは無限の括弧の対応が取れる ~ 再帰も、ネストも、あるんだよ. | sw@mac

2011/05/01 28 users aaa bbb sw@mac 括弧 再帰

こんなの絶対おかしいよ はい. PCRE すごいです. 僕が正規表現と戯れ始めたのはちょうど1年前. その時, 最初に @shinji_kono 先生に賜った 言葉が 正規表現は たかが 括弧の対応が取れないんですよ. もうちょっと正確にいうと, 正規表現では (a) (((a))) ((aaa)((bbb)((cc)(d)))) (()(()())()(()))()() のような任意のネストを認... 続きを読む

CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説

2023/04/19 27 users CSS Sass CSSプリプロセッサ ネス ブラウザ

CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネス... 続きを読む