// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
大手ITスタイルガイドがベースGoogleやMicrosoftなど大手IT企業の英語スタイルガイドの基準がベース。一般的な英語表記から外れません。
Help us understand the problem. What is going on with this article?
PHPerKaigi 2022 2022/04/10 10:40〜 Track A レギュラートーク（40分） PHP はバージョンを追う毎に型宣言、例外、表明、列挙型などの機能が大幅に強化され、堅牢なコードを書くための機能が充実してきました。それらの機能はどう使うと効果的なのでしょうか。 …
「オブジェクト指向するとプログラムが読めなくなるから禁止」のような話は昔からあって、新しい技術についてこれない人を揶揄するようなニュアンスで使われていましたが、実際にはこれはオブジェクト指向迷路にうんざりした現場での率直な意見だと思います。 オブジェクト指向は、まじめにやるほどプログラムを読みにくくするという性質をもっています。 ※ 使い方次第というコメントついてますが、だからこそちゃんと性質をしっておく必要があると思います。 オブジェクト指向の代表的な指針を３つあげると次のようなものがあります。 オブジェクト同士の連携としてプログラムを組む 単一責務の原則 インタフェースと実装の分離 まず、オブジェクト同士の連携でプログラムを組むと、コードが飛びまくって追いにくくなります。そして単一責務の原則により、小さいクラスが大量に生成されて、追いにくさがさらにあがっていきます。 ダイクストラ先生が
みりせっく@雌尻ンダー extends Siri @grandcraws ツイ主が勘違いされて傷ついてるようなので、一旦謝罪とこの場でも補足しますが、初学者のコードは普通汚い。初心者はコードが綺麗か汚いかも判断基準がないから。だから教える側がここは綺麗、ここはまずい、普通はこう書く、特殊な書き方はやめよう、という教えをちゃんとやりなさいっていう話です。 2022-08-17 02:49:22 みりせっく@雌尻ンダー extends Siri @grandcraws @manaboru 正論を言うことと相手を傷付けることは無関係で、傷付けるから正論を言わないは間違いだと思いますよ。傷付かないように正論を言うべきで。で、今回はその配慮が足りず誤解させて傷付けてしまったからそこに対して衆人に見える形でリプで直接謝罪してます。それ以上の話として何を求められてますか？ 2022-08-17 12:2
仕様変更に強い命名は大事だ。ボタンを「OKボタン」や「Noボタン」と名付けていたらヤバいかも。ゲーム開発に仕様変更はつきもの。開発中盤「OKボタンの色を使ってキャンセルボタンを作りたい」というケースもある。結論、用途ではなく機械的… https://t.co/6nwzoBNKWR
はじめに Gitのステージングエリアにあるファイルを対象に、レビュー結果をSlackに通知するアプリケーションを作成しました。 開発環境のターミナルで指定したコマンドを実行するだけで、Slackにレビュー結果が送信されます。 ソースコードは以下です。 こんな人におすすめ コードレビューを受ける前に自分で事前チェックをしたい方 一人でコードを書くことが多く、レビュワーがいない方 どうせなら楽しくレビューしてもらいたい、好きなキャラクターにレビューしてもらいたい方 アプリケーションの構成 レビュー依頼の手順と流れ 以下のような手順と流れでレビュー結果を得ることができます。 レビュー対象のファイルをステージングエリアに登録する（複数ファイルの登録が可能です） ローカルのターミナルでaireviewコマンドを実行 Slackに必要な情報が送信される レビュー結果を確認する スレッドにレビュー結果が
##時代は令和ぞ、何を書いとるんや 転職してきた若いプログラマが変なコード書いている。 どうやら前社の社内研修で教わったとのこと。 さて、何を教わったのだろうか。 ※一応TypeScriptで書きましたが別にC#でも言えることです。 ※CやC++やアセンブラのことは全く知らないので、そのあたり詳しい人は今どんな書き方か記事書いていただけると勉強になります。 ##１．変数名が雑 クラス、関数、変数、どれも命名は難しいものです。1 大体が英語で大変です。けど頑張ってわかりやすい名前つけるようにしています。 本読んで勉強してください。Google翻訳使ってください。 10行程度の短い関数ならretでもdataとか適当な名前でもいいけど 長くなるようならちゃんと名前つけてるようにしたほうがいいです。 わかりやすい変数名をつけることでひと目で、その変数の役割が理解出来ます。 // Goodってなんや
確かに、パッと見で 「なんだこれ？」 になりますね。 意味のないコメントとして else 句ごと削除してしまって良さそうにみえます。 しかし、実はこの「何もしない」コードは、 プログラミング（理論）的に面白い側面を持っている ので、簡単に記事にまとめてみたいと思います（記事中では Swift に似た擬似コードを使用します）。 キーワード if 式、網羅的パターンマッチ、参照透過、副作用、モナドと単位元 else 句が省略できる条件 例えば、次のコード例を考えてみます： let array: Array<Int> = ... var positiveArray: Array<Int> = [] // var = 可変変数 for x in array { if x > 0 { positiveArray.append(x) } else { // 何もしない } } ここでは array か
プログラミングをしていて”dataの複数形”を使いたくなることが年に365回くらいあるんですけどどうするのが正解なんですか？
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
長過ぎるとわかりにくいし端折りすぎると何がなんだかわからなくなる
今回のエントリでは先日、僕が勤めているソニックガーデンで話題になったプログラミング関連の小ネタを書きます。 それは何かというと、「プログラミング初心者は変数名やメソッド名を略さない方がいい」という話です。 長い変数名やメソッド名はつい略したくなります。 実際、僕も長い名前を略すときはよくあります。 ですが、略称を使うのは長年の経験から「この略称は一般的だから誤解を招くことはきっと少ないだろう」とか「前後の文脈から、変数の中身は誰が見ても明らかだろう」という想像が付いた場合だけです。 一方、プログラミング初心者の人は経験が浅いため、「一般的かどうか」とか、「誤解が発生しないかどうか」といった判断ができません。 そのため、他の人が見たときに「え、何この変数名？」と思ってしまうような略称を付けてしまう恐れがあります。 たとえば、先日のコードレビューで、初心者の人がrev_noという名前の変数を定
詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。 @acab/reset.css -GitHub :where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる CSSの疑似クラス「:focus-within」が素晴らしい
プログラミングで、日本語変数名を使うことは強く忌避されいると思います。でも、実例を見た時にわかりやすさにk心が撃ち抜かれました。 いつか日本語宗派に入りたいかも。
ブロック本体の中に引数とブロックの両方が一緒に現れる場合は、引数をすべて一番上にまとめて配置し、その下にネストされたブロックを配置する。引数とブロックを区切るには空行を 1 行使う。 ブロック内の引数の論理的なグループを区切るには空行を使う。 引数と "メタ引数"（Terraform 言語セマンティクスで定義）の両方を含むブロックでは、メタ引数を最初に列挙し、空行 1 行で他の引数と区切る。メタ引数ブロックは最後に配置し、他のブロックとは空白行で区切る。 resource "aws_instance" "example" { # meta-argument first count = 2 # 要約追記： = の位置が揃っていないと思ったけど terraform fmt をかけてもこの位置になることを確認済み。 ami = "abc123" instance_type = "t2.micro
開発初期に「どのスタイリング手法でいくべきか」などとよく悩むと思います。 筆者ならそこで「悩むよりもとりあえず書き始めよう」と言いたいところですが、規模が大きいプロジェクトなどでは途中でスタイリング手法を変えようとすると大きな負担になったりと柔軟な変更ができないことがあります。 だがしかし！！ Google先生で調べようものなら 「CSS-in-JSをやめた理由」 「CSS Modulesをやめた話」 などなど... じゃあ何ならええねん！ そもそもReactにおけるスタイリング手法は多種多様で、時代によって流行が移り変わっていくものでもあり、Googleのトップに来るのは古い情報ばかりです。 そんな悩めるあなたにこの記事では筆者が利用したことのあるスタイリング手法を、CSS-in-JSやCSS Modulesに限らず、筆者の使用感もふまえて紹介していきます。 古い情報だけでなく、zero
業務で結構な量のコードレビューを毎日してるんだけど 最近マジでクソコードが多い 適当に書き殴ったコードなんじゃなくて とにかく思い付いたところからコーディングして 実際に動作させたら思い通りに行かないから継ぎ接ぎで修正して 最終的に機能を満たしたから完成、PR作成、レビューよろしく、みたいなのが本当に多い 無駄な処理が多数含まれているのなんて当たり前だし 機能を満たせてるように見えるコードも境界値的なところでバグだらけだったり そういうコードが特に最近増えている 問題なのはレビューで指摘した部分が実は今回のPRではなくて既に業務システムに組み込まれてる、とかいうのも多々あって めちゃくちゃヒヤリとするようなコードも多い レビューは数人でやってるんだけど、こういうコードを通してしまう人物に2，3人心当たりがあるし とはいえ人材不足で仕方ないんだろうな、という気がしている 多分だけどソフトウェ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
InfoQ Software Architects' Newsletter A monthly overview of things you need to know as an architect or aspiring architect. View an example
Plasmic is an open-source visual editing and content platform for building websites and apps. Integrate with existing codebases. Ship incredibly fast.
Background Which Shell to Use Bash is the only shell scripting language permitted for executables. Executables must start with #!/bin/bash and minimal flags. Use set to set shell options so that calling your script as bash script_name does not break its functionality. Restricting all executable shell scripts to bash gives us a consistent shell language that’s installed on all our machines. In part
転職した会社で早期リターンが禁止されている。 正確に言うと、misraCを踏襲し、関数内ではreturnは末尾に１つだけ、という制約が設けられている。 この他にも関数ポインタが禁止等も色々あるが、早期リターンを禁止されるのは本当に困る。 早期リターンによってどれだけ気持ちよくコーディングできるか分かっていない。 もうこの後の行は読まなくていいんだ、という精神的安堵感。 これをもうこの会社では得られない。 関数のポインタ引数のconst禁止程の破壊力がある。 地獄のような１０重以上のネスト地獄・・・。 律儀に守ることによる可読性の低下の方が問題ではなかろうか。
The styling system that powers facebook.cominstagram.comwhatsapp.comthreads.netGet StartedThinking in StyleX
Zero-runtime Stylesheets-in-TypeScript. Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time. Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more. 🔥 All styles generated at build time — just like Sass, Less, etc. ✨ Minimal abstraction over standard CSS. 🦄 Works with
Although SQL is reasonably consistent in its implementations, there are several different dialects available with variations of syntax and grammar. SQLFluff currently supports the following SQL dialects (though perhaps not in full): ANSI SQL - this is the base version and on occasion may not strictly follow the ANSI/ISO SQL definition Athena BigQuery ClickHouse Databricks (note: this extends the s
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation! You can do those things
この記事で伝えたいこと ここでは、私が設計を勉強しながらコーディングした経験から、初心者でも簡単に実践できる簡単なルールを3つピックアップしました。 一つのクラスは150行以内に収める 循環参照はしない 継承はしない この3つを守れば、破滅的なクソコードであれば割と簡単に防げるかと思います。 この記事における「破滅的なクソコード」は「一切のリファクタリングの余地も残されていないほどのコード」を意味し、この記事の目的は、「破滅的なクソコード」から、「最低限リファクタリングすればなんとかなるコード」になる程度の手法を紹介することです。 マサカリは大歓迎ですがお手柔らかにお願いします。 読む上で留意して欲しいこと この記事はあくまで 「初心者のための破滅的なクソコードを書かないための簡単な方法論」 であって、「効率的で分かりやすい設計の方法論」ではありません。 この3つは「銀の弾丸」ではないです
![[初心者向け]破滅的なクソコードを書かないために意識したい3つのこと - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f1197305b664198154d3c9f6846f64805ac9058/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJTVEJUU3JUEwJUI0JUU2JUJCJTg1JUU3JTlBJTg0JUUzJTgxJUFBJUUzJTgyJUFGJUUzJTgyJUJEJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgyJTkyJUU2JTlCJUI4JUUzJTgxJThCJUUzJTgxJUFBJUUzJTgxJTg0JUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFCJUU2JTg0JThGJUU4JUFEJTk4JUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJTg0MyVFMyU4MSVBNCVFMyU4MSVBRSVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NmM4NjU2MjY5MGY5YTA1ZmE4ODQzZWE4NzA4NGEyMjU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWthc3R1ZGlvXyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjhkYjY1OWMyOWZlMjBhM2UwYWU0MzM4ODFlYzk3YmM%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D21ccf0de1dd878a1bf42555f72ecb634)
PlainStyle を友だちに教える 𝕏 Facebook はてブ 説明 文字を学術用の記号に置き換えることによって、擬似的にフォントをつけることができるツールです。 Unicode に対応しているアプリケーションであれば、X 以外にもコピペできます。 テキストの一部を選択してからフォントを選ぶと、その部分だけフォントが変わります。 フォントを指定できるのは英数字のみです。 length は X での消費文字数の目安です。 ご注意 重要な文書には使わないでください。音声読み上げやその他の機械処理で不具合が生じる恐れがあります。 URL やハッシュタグにフォントを付けるとリンクにならないかもしれません。 古い端末や OSバージョンによって正しく表示されない可能性があります。 当サイトは趣味で運営されています。環境によってうまく動かないかもしれませんが勘弁してください。 偽サイトにご注意く
3行 クソコードは無知から生まれる 個人的にコーディングのときに心掛けていることのまとめ ここに書いてあるのが全て正しいわけではないので参考程度に、という保険 クソコードを滅ぼしたい おはようございます。デブです。 早速タイトルと趣旨が食い違っているような気がします。 さて「クソコード」という言葉があるようにコードにもピンキリがあります。 因みにピンキリの語源はポルトガル語のpintaとcruzらしいです(諸説あります)。 時としてクソコードは見た者の精神を破壊します。 私の場合は、年上で先輩で異性であんまり話したことのない方のコードをレビューしろと言われたときに「今まで何やってきたの？」という感情を常識と礼節でねじ伏せて柔らかく表現しようと言葉を選びまくったときが一番精神にキました。 虚空に口汚く文句叫ぶのが一番冷静になれる方法だと学びました。リモートワークで丁度叫びやすいので毎日叫んで
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
2017年09月06日 2023年05月31日 MicrosoftのExcelで作ったブックを、LibreOfficeのCalcで開くとシート上では問題なくレイアウトが再現されますが、印刷しようとすると本来1ページで収まっていたシートが、LibreOfficeでは2ページにまたがってしまう…このようなとき簡単に1ページに収める方法を説明します。 今回説明している方法はExcelのページ設定で「次のページ数に合わせて印刷」を行うと同じようなイメージです。 Excelで作ったシートの内容。今回使ったExcelは2016です。 Excelでは1ページに収まるようにシートを編集したので、印刷プレビューでも問題なく1ページで表示されています。 LibreOfficeのCalcでのシートの内容。特にレイアウト崩れは発生してません（LibreOfficeのバージョンは5.4.1） LibreOffice
Changed in this version fix(types): prevent prop bleed on styling properties (fixes #4053, c0f8015) feat(types): ship csstype via "CSS" namespace (e6c4f0a) chore: bump stylis to 4.3 (fixes #4007, fa58875) reduced some sources of unnecessary branching logic Breaking changes in v6 Migration guide → https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6 now using stylis v4 (if
STYLE LIST 9つのインテリアスタイル、さまざまな空間から、 お好きなイメージをお探しいただけます。
コードスタイルの言語規則は、.NET プログラミング言語のさまざまなコンストラクト (修飾子、かっこなど) の使用方法に影響します。 このカテゴリには、不要なコード規則は、不要でリファクタリングまたは削除することができるコード ベースのさまざまな部分を特定します。 不要なコードが存在する場合は、次の問題の 1 つ以上が存在することを示しています。 読みやすさ: 読みやすさを不必要に低下させるコード。 保守容易性: リファクタリング後に使用されなくなり、不必要に維持されるコード。 パフォーマンス: 副作用がなく、不要なパフォーマンスのオーバーヘッドが発生する不要な計算。 機能: コードの冗長なレンダリングが必要となるコードの機能の問題。 たとえば、IDE0060 は、メソッドで誤って入力パラメーターを無視した場合に、未使用のパラメーターにフラグを設定します。 この規則は次のカテゴリに分けられ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
