はじめに 「なんか、レビューのたびに変数名を指摘されてる気がする...」 「日本人なんだから、英語で命名とか無理...」 こんなお悩みありませんか？ この記事では、「プログラマーが英語の命名で悩んだ時にどうすれば良いか」をフローチャート形式で解説します！ これであなたも駆け出しエンジニアを卒業できるかも!? ※本記事はLaravel,Vue.jsのプロジェクトで運用されているルールを元に解説しています。 プロジェクト内だけの内輪ルールも含まれていますので、ご了承ください。 対象者 この記事は下記のような人を対象にしています。 駆け出しエンジニア プログラミング初学者 PHP(Laravel),JavaScript(Vue.js)で英語のネーミングに苦戦中 前提知識 下記のような中学・高校で学ぶ内容については理解していること前提で解説します。悪しからず。 三単現のsって何？ 5文型(SV/S
一昔前のCSSと比較すると、ここ数年でCSSはかなり進化しました。calc()で数式が扱えるようになり、変数、条件分岐、ループ、論理演算なども使用できます。CSSでロジックをどう記述するのか、ブログラミング言語的な実装を紹介します。 Writing Logic in CSS by Daniel Schulz TwitterでCSSがプログラミング言語なのかと話題になっていました。その前から本記事の翻訳に取り組んでいたのですが、非常に興味深い記事でした。CSSは宣言型プログラミング言語ですが、JavaScriptのような命令型の要素も増えてきて、一昔前からかなり進化しています。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの制御構造 CSSの実装テクニック 終わりに はじめに CSSは、スタイルのシステムに特化
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。 CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。 What's New Since CSS3 by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS3以降の新機能 CSSワーキンググループ これから登場する新機能 はじめに 「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS
はじめに 本記事では、constこそが唯一神であることを証明したあと、letを使いがちな場面でいかにしてconstを使うかをまとめていきます。なお、ES2018までの基本構文(reduce, async/await, 配列とオブジェクトのスプレッド構文)を使用します。「いや、reduceとかスプレッド構文とか難しいからlet使うわ」という方のために、便利メソッド詰め合わせであるLodashを使った例もご紹介します。もちろん、Lodashは機能に対してサイズが大きいライブラリであるため、フロントエンド開発でバンドルサイズを軽減したいという方などはLodashの例は無視し、Lodashを使っていない方の例をご参照いただければと思います。 追記：Lodashの使用について 「Lodashのコードにlet使われてるやん」というご指摘を多く頂いたので追記いたします。 誤解を招くタイトルにしてしまい申
今年になってもCSSの進化が止まりません、むしろ加速しています！ IEのサポートが終了し、CSSのさまざまな機能が使用できるようなりました。中でもCSSの変数（カスタムプロパティ）を使えるようになったのはありがたいですね。 参考: IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ そしてCSSの新機能として、単位を変数として使用できる「Variable Units（変数単位）」が登場しようとしています。 たとえば、--baseを8pxにし、4倍にしたい時はcalc(4 * (var(--base)))と記述していましたが、4--baseで32pxになります。 The Future of CSS: Variable Units by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Var
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。 Goodbye SASS , welcome back native CSS by Karsten Biedermann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数 CSSのネスト :is()疑似クラス :has()疑似クラス コンテナクエリ カスケードレイヤー Sassの未来 Sassよ、さよ
プログラミングをしているとき、変数名や関数名の命名に迷ったことはないでしょうか？ 時間をかけて考えた変数名や関数名を後で見返したときに何の処理なのかわからないと思ったり、他の人が書いたコードを理解するのに時間がかかった経験は誰でもあると思います。 一般に、プログラマーはコードを書いている時間より読んでいる時間の方が長いと言われています。 わかりにくい命名はコードを読んでいる時間を長くしたり、バグを生む原因になってしまいます。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 初級編では、実際に仕事をする中でよく目にしたり自分でも使うことの多いものなど、すぐに使えるテク
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説します。Webページやスマホアプリのレイアウト、コンポーネントなど、実際の使用例がたくさんあるので、実用的なテクニックが満載です。 CSS Variables 101 by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数（カスタムプロパティ）とは 変数名の付け方 CSSの変数のスコープ CSSの変数のフォールバック CSSの変数の効果的な使用例 インラインでCSSの変数を定義 メディアクエリでCSSの変数を定義 CSSの変数の継承 CSSの変数のバリデーションの仕組み CSSの変数の興味深い発見 デベロッパーツールで使用できる便利なテクニック 終わりに はじめに CSSの変数（別名: カスタムプロパティ）がブ
ソフトウェアの中身を大きく2つに分解すると、プログラムとデータに分かれます。コードコンプリートやA Philosophy of Software Designなど、評判の良いソフトウェア設計の本はいくつかありますが、それらはどれもプログラムの説明がメインでデータのライフサイクルについての説明はなかったと思います。しかし、データの表現にもいくつもの方針があって、それによるトレードオフがあるな、というのはもやもやと考えていたので、その考えをまとめて文章にしてみました。 データといっても、処理中の短期間の間では変わらない、いわゆるマスタデータ的なデータです。ジャーナルというか、トランザクション的なデータはここでは触れません。 この記事では、それぞれのトレードオフについて考えていきます。 即値（リテラル） 定数 コマンドライン引数 環境変数 設定ファイル ダウンロードコンテンツ オンラインデータベ
Sassの@importルールは、廃止されることが予定されています。 @useや@forwardといったルールに置き換わるのですが、これらは全く新しいシステムです。 これらの知見が溜まってきたのでご紹介します。 @import と 新しいモジュールシステム Sassの初期の方から実装されていた@importは、テキスト形式でSassファイルを読み込むための機能です。便利な機能ですが、CSSの@importと重複しているため、SassなのかCSSなのか一見してわかりにくい側面がありました。 新しいモジュールシステムは、この問題を解消し、Sassをより柔軟に使用できるようにします。 @importではグローバルに指定されていた変数などは、ファイルごとにカプセル化され、ファイルの内容に基づいて解決できるようになりました。 現在、Dart Sassしか新しいモジュールシステムは使えませんが、Lib
この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまうことで 外側の for 文のカウントにバグが発生し 期待した動作にならない例になります。 私も他の人が作成した web アプリで このバグを見かけたことがあります。 for の変数を宣言する場合 必ず let で宣言して下さい。 var でなければ正常に動作しないのは 構造的欠陥のハズです。 let array1 = [1, 2, 3]; let array2 = [4, 5, 6]; for(let i = 0; i <
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
zshでPATHが壊れないようにPATHに新しいディレクトリを通す - Acme::AnaTofuZ->new;
TL;DR 特に順番は気にしないとき path+=('/hoo/bar/baz'); 最初にいれたいとき path=('/hoo/bar/baz' $path) PATH通そうとして壊れるヤツ UNIXを使っている上で避けて通れないのが環境変数$PATHでしょう。 :区切りにディレクトリを列挙して、列挙されているディレクトリ直下に置かれているバイナリファイルをコマンドとして使えるようにするアレですね。 そんな$PATHに新しいディレクトリを追加しようとして、ついつい次のような事故がよく置きます。 export PATH="/hoo/bar/baz" こうしてしまうと最初から$PATHに設定していたデータが吹っ飛んで、PATHの中身が/hoo/bar/bazだけになってしまいます。こうなるとlsとかのコマンドが使えなくなる訳ですね。 zshだと$pathで配列として扱える この問題は何が原因
CSS変数（カスタムプロパティ）は、文字通りCSSで変数が使用できるので非常に便利です。CSS変数の使い方でよく聞くのはカラーですが、それ以外にもさまざまな優れた使い方があります。 WebサイトやスマホアプリのUIで、特にコンポーネントのバリエーションを実装するのに役立つCSS変数の使い方を紹介します。 Practical Use Cases For CSS Variables by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS変数を活用できてない例 CSS変数の優れた使い方 1: ロングハンドのプロパティ CSS変数の優れた使い方 2: 背景 CSS変数の優れた使い方 3: グラデーション CSS変数の優れた使い方 4: クリップパス CSS変数の優れた使い方 5: チェックボッ
一般にプログラマーはコードを書いている時間より読んでいる時間の方が長いと言われており、わかりやすい命名は可読性や保守性の観点から非常に重要です。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 前回の初級編では、わかりにくい命名をした場合の問題点や、JavaScriptで共通認識となっているルール、すぐに使える命名テクニックを紹介しました。 上級編の今回は初級編で紹介したものでは表現しきれない、より複雑な処理を行いたいときに役立つ表現を集めました。 命名テクニック上級編 1. 有効 / 無効 の状態の表現 オブジェクトやステータスが有効か無効かを表現する単語です。
最近リリースされたCSSの新機能と新しい関数のまとめ
CSSは気がつくと、どんどん進化しています！ 先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。 計算値にキーワード（auto, max-conetntなど）を使用できるcalc-size()関数、ランダムな値を返すrandom()関数、位置を示す論理プロパティなど、魅力的な機能ばかりです。一部はすでにブラウザに実装されており、ブラウザのサポートも年々早くなっていますね。 New Features and Functions Arriving in CSS by Alvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに attr関数の変更 キーワード
CSS変数を使用して、コードを減らしながらもUI要素やコンポーネントのバリエーションを作成するCSSのテクニックを紹介します。 CSSはclassを使用すると、個別の値のみをターゲットにスタイルを適用できます。CSS変数を使用すると、連続した値の範囲をカバーでき、特定のトークンを使用して特定のスタイルを適用できるようになります。 CSS変数（カスタムプロパティ）について詳しくは、下記をご覧ください。 CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説 HTMLは、buttonにclassとstyleを与えます。ポイントとなるのは、styleにインラインでCSS変数を設定することです。
JavaScriptのスコープチェーン・変数参照の仕組み、グローバルスコープ、ローカルスコープ、ブロックスコープについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ⚡️⛓JavaScript Visualized: Scope (Chain) by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptのスコープチェーンの仕組みをGIFアニメで分かりやすく解説 JavaScriptのスコープチェーンについてこの記事では解説します。 私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います😃 まずは、下記のコードを見てみましょう。 const name = "Lydia" const age = 21 const city = "Sa
コンテナークエリーは、要素の幅を条件にする機能だけでなく、CSS変数を条件にスタイルを適用する、コンテナースタイルクエリーという機能があります。活用することで、ひとつのクラスに異なるバリエーションのスタイルを定義できます。 前回の記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』では、コンテナークエリーの基本的な使い方を紹介しました。本記事では、コンテナースタイルクエリーの使い方を紹介します。 ※本記事のデモは、ChromeまたはEdgeでご覧ください。ブラウザのサポート状況は、後述する「対応ブラウザ」を参照ください。 コンテナースタイルクエリーの使い方 @containerの条件をstyle()関数で定義することで、コンテナースタイルクエリーを利用できます。関数の引数には、条件とするCSS変数と値を設定します。CSS変数は、親要素に定義された値を参照します。 また、前
Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えることなく既存のCSSにも利用する事が可能です。 ファイルはTypography、Colors、Layout、UIの4つに分けられています。既存のWebサイトに導入する事でHTMLに変更を加えることなくスタイルを統一したり管理しやすく再設計する事も出来るのでCSSの最適化に一役買ってくれそうですね。 個人的にもCSS変数を使わない世界はもはや考えられないほど。まだ使った事が無い方はぜひ。 Pollen
Firefoxが2024年7月9日にリリースしたバージョン128で、CSSの「@property」に対応したことにより、主要なブラウザ全てで「@property」の記法を使用できるようになりました。「@property」を使うことで実現できるデザインの一例について、ウェブエンジニアのライアン・マリガン氏がブログに投稿しました。 CSS @property and the New Style https://ryanmulligan.dev/blog/css-property-new-style/ マリガン氏がデモとして提示したのは下図のようなボタンのアニメーションです。 最初にマリガン氏はボタンの周りをループする光について解説しています。カスタムプロパティとして「--gradient-angle」を宣言し、宣言においてこのカスタムプロパティには「angle(角度)」の値を設定可能で、初期値
再宣言 一度宣言した変数を、同じ変数名で宣言し直すことを再宣言といいます。 再宣言可能なvarで再宣言した場合、後に宣言した変数が適用され、 再宣言不可能なlet/constで再宣言した場合、エラーになります。 varでは、予期しない再宣言が起こりうるため危険です。 // var var a = 0; var a = 1; console.log(a) // `1`と出力される // let let b = 0; let b = 1; // SyntaxError: Identifier 'b' has already been declared // const const c = 0; const c = 1; // SyntaxError: Identifier 'c' has already been declared
CSSでアスペクト比を管理する | かちびと.net
Result CSSでアスペクト比を管理しよう、みたいなネタです。 上サンプルはサイズがバラバラな画像を一定の比率のサイズで統一したものです。歪みが出るので画像そのものには使えませんが分かりやすいサンプルとして。 css :root { --w: 300px; --h: calc(var(--w) / (1.618 / 1)); } img { width: var(--w); height: var(--h); } こちらは黄金比で固定したものになります。横幅を決めて変数に代入するとcalc()関数で比率に沿った高さに計算されます。後は幅と高さの変数を比率を保ちたい要素に適応すれば任意のアスペクト比を保つ事が出来ます。 例えば横幅400pxで4:3比率固定にしたいなら :root { --w: 400px; --h: calc(var(--w) / (4 / 3)); } とすればいい。
イージングをCSS関数で管理する | かちびと.net
Result 使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で管理しましょう、という内容です。 普段さほど使わないので思いつきませんでしたが皆さん既に取り入れてそうですね。 css :root { --ease-in-quad: cubic-bezier(.55, .085, .68, .53); --ease-in-cubic: cubic-bezier(.55, .055, .675, .19); --ease-in-quart: cubic-bezier(.895, .03, .685, .22); --ease-in-quint: cubic-bezier(.755, .05, .855, .06); --ease-in-expo: cubic-bezier(.95, .05, .795, .035); --ease-in-circ: cubic-bezier(
プログラミングを行う際に、非常によく使われる手法として変数宣言があります。 例えば、「この箱には、12という数値を入れる」「あの箱には、”JavaScript”という文字列を入れる」など、変数の名前（箱）と、変数に格納されるデータ（文字列や数値など）を決められるのが変数宣言です。 宣言された変数は、繰り返し使える利便性があり、計算式や関数を作る場面で活躍します。 JavaScriptでは、主にletとconstを使って変数宣言を行いますが、どちらを使うべきかシチュエーションに悩む方も少なくないのではないでしょうか。 今回は、letとconstをうまく使い分けられるように、それらの性質やスコープとの関係性について紹介していきます。 var letとconstの性質を説明する前に、varという変数について少し補足します。 プログラミング言語が時代とともに進化していくように、JavaScript
概要 Python で文字列に変数を埋め込む方法 (変数展開) が複数あるのでサンプルコードを書く f-string 2. 字句解析 — Python 3.7.4 ドキュメント バージョン 3.6 で追加. フォーマット済み文字列リテラル（ formatted string literal ）または f-string は、接頭辞 'f' または 'F' の付いた文字列リテラルです。これらの文字列には、波括弧 {} で区切られた式である置換フィールドを含めることができます。他の文字列リテラルの場合は内容が常に一定で変わることが無いのに対して、フォーマット済み文字列リテラルは実行時に式として評価されます。 サンプルコード。
関数の仮引数とvarは関数スコープだけを生成し、letとconstは関数スコープとブロックスコープの両方を生成します。 ここまでは、各スコープの概要について簡単に紹介しました。次節からは、それぞれのスコープの仕様に基づき、スコープについて知っておきたい基礎的なことをまとめていきます。 グローバルスコープとwindowオブジェクト グローバル変数を宣言するというのは、実際にはグローバルオブジェクト（ブラウザの場合はwindowオブジェクト）のプロパティを追加することになります。 そのため、グローバル変数は、windowオブジェクトのプロパティとしてアクセスできます。 var scope = 'global'; // windowオブジェクトのプロパティとして追加される console.log(window.scope); // -> global なお、letやconstをトップレベルで宣言
JavaScriptのvarとletは、変数を宣言するためのキーワードですが、いくつかの重要な違いがあります。 スコープ varは関数スコープを持ちます。これは、varで宣言された変数が関数内でアクセス可能であることを意味します。一方、letはブロックスコープを持ち、letで宣言された変数はそのブロック内でのみアクセス可能です。 function testVar() { if (true) { var x = 10; } console.log(x); // 10 } function testLet() { if (true) { let y = 20; } console.log(y); // ReferenceError: y is not defined } ホイスティング varで宣言された変数は、関数またはグローバルスコープの先頭に巻き上げられます。これは、変数が宣言される前に
シンプルで見やすいレイアウトをclass不要で作れるclasslessなCSSフレームワーク・「new.css」 - かちびと.net
new.cssはシンプルで見やすいレイアウトをセマンティックなHTMLだけで作れるclasslessなCSSフレームワークです ブラウザの設定に基づいたダーク/ライトモードにも対応できる上にCSS変数を利用したオリジナルのテーマ設計も可能となっています 主なユースケースとしてシンプルなブログ、リンク集、プロフィールページ、Markdownによって生成されたHTMLレンダリング等を想定しているそうです サイズもとっても軽量です。とても良いですね。ライセンスはMITとのこと new.css
Var、Let、Const – その違いとは？
原文: Var, Let, and Const – What's the Difference? 新しい機能がたくさん ES2015 (ES6) で発表されました。2020 年現在、多くの JavaScript の開発者はその機能に慣れ、そして使い出したと考えられています。 この考えは部分的には正しいかもしれませんが、一部の開発者には、その機能のいくつかはいまだに謎のままかもしれません。 ES6 で発表された機能のひとつに、let と const の追加があります。これらは、変数宣言に用いられます。問題となるのは、私たちが使用してきた古き良き var とどう違うのかということです。もし、この違いをまだ十分に理解されていないならば、この記事が役に立つことでしょう。 この記事では var、let、const のそれぞれのスコープ、使用法、宣言の巻き上げ (hoisting) に関して説明します
SES - JavaScriptをセキュアに実行
JavaScriptを使えばWebページを自在にコントロールできます。ユーザにマクロを組ませて、より彼らのニーズに合ったサービスにしたいと思うこともあるでしょう。しかし自由にJavaScriptが実行できるのはセキュリティ上の問題にもなります。 そこで使ってみたいのがSESです。セキュアにECMAScriptを実行できるランタイムです。 SESの使い方 アタックコードの例。Date.nowを使うことで解析するタイプです。何もしない場合はセキュリティを破られます。 SESを有効にした場合。Date.nowが使えなくなってエラーになります。 SESを使うことでグローバルな変数へのアクセスを禁止したり、特定のオブジェクトへのアクセスがエラーになります。これにより、サードパーティーが作ったJavaScriptを誰でも安全に実行できるようになります。 SESはJavaScript製のオープンソース・
レビューでこのようなコメントをもらいました。 「インスタンス変数に依存していないことを明示するために、staticメソッドにするのが良さそうに思います。」 コメントをもらうまでは、メソッドに static をつけるのは「インスタンスを生成せずに呼び出すメソッドの時」という理解でした。これは「インスタンスを生成せずに呼び出すメソッド」であれば「インスタンス変数に依存していないメソッド」と言えるということにコメントをもらって気づくことができました。 初学者の頃は「インスタンス変数に依存していないメソッド」と分かることは一体何が嬉しいの？状態でしたが、今ならその有難みが分かります。 が、うまく言語化できていません（笑）。インスタンスの状態と切り離して考えられる点が嬉しいんだと思っています。脳のメモリが節約できたり、不具合調査のときに役立つイメージですね。 修飾子や型から得られる情報は沢山あります
コマンドの実行結果を変数に代入
バッククォート(`)で文字列中のコマンドを実行することができます。 これを使って変数にコマンドの実行結果を代入します。 [変数名]=`コマンド` 例 pwdコマンドの結果を変数のDIRに代入 DIR=`pwd` コマンドのネスト バッククォートをバックスラッシュでエスケープすることで、コマンドのネストも可能になります。 例 pwdコマンドの結果に対して"ls -ld"を実行 STR=`ls -ld \`pwd\`` 最初に実行されるコマンドは、以下の赤色の個所のpwdコマンドになります。 その後、pwdコマンドの結果に対してlsコマンドが実行されます。 STR=`ls -ld \`pwd\`` これは以下と同じになります。 DIR=`pwd` STR=`ls -ld $DIR` コマンドの実行結果を配列に代入 コマンドの実行結果を配列にする場合は、バッククォートで囲んだコマンドを"("と"
命名規則とは 命名規則とは、プログラムの変数名や関数名などを決めるルールです。 ほとんどのプログラミング言語は、その言語仕様さえ守っていればとても自由にソースコードを記述することができます。しかし、変数名や関数名を以下のように記述するとどうなるでしょう。 var _1 = 180; var _2 = 75; function a(_a, _b) { _a /= 100; return _b / (_a * _a); } var _3 = a(_1, _2); console.log(_3); 変数名や関数名から意味を読み解くことができず、結果的にプログラム全体の処理も分かりづらくなってしまいます。 それでは同じプログラムを、変数名や関数名を変え、コメントを付与するとどうなるでしょうか。 // 身長(cm) var height = 180; // 体重(kg) var weight = 7
ReactのJSXとは ReactにおけるJSXとは、Reactの要素をHTMLと同じように記述することのできる拡張構文です。 JSXで記述するのは実際にはHTMLではなく、JavaScriptのコードに変換されるものになります。 // 下のコードを変換すると、 import React from 'react'; const Render = () => { return <div>Sample</div>; } // HTMLではなく、下のようなJavaScriptコードに変換される import React from 'react'; const Render = () => { return React.createElement('div', null, 'Sample'); } そのため、実はReactを使う上でJSXの記述は必ずしも必要ではないのですが、ほとんどの場合はその便
「varの使い方がよくわからない」 「letやconstとの違いが知りたい」 と思うことはありませんか？ JavaScriptで変数宣言するときに、varがいいのか、それともletやconstがいいのか迷ってしまいますよね。 では、実際にどういった使い分けがあるのでしょうか？ そこで今回は、
PS C:\Users\Administrator> C:\Users\Administrator\Desktop\scripts\dns_check\test.ps1 Name : Windows PowerShell ISE Host Version : 5.1.17763.1007 InstanceId : 02356453-d661-49b1-9bff-29f1aa00ea35 UI : System.Management.Automation.Internal.Host.InternalHostUserInterface CurrentCulture : ja-JP CurrentUICulture : ja-JP PrivateData : Microsoft.PowerShell.Host.ISE.ISEOptions DebuggerEnabled : True IsRun
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者プログラマーのための変数/関数/メソッドの英語命名規則 - Qiita
CSSは確実に進化している！ 変数、条件分岐、ループ、論理演算など、ロジックに記述するCSSの実装テクニック
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ
JavaScriptからletを絶滅させ、constのみにするためのレシピ集 - Qiita
CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」
そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
定番のコード規約とライブラリから学ぶJavaScriptの命名テクニック（初級編） - ICS MEDIA
CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説
データライフサイクルとトレードオフ | フューチャー技術ブログ
Sassを@importから@useに置き換えるための手引き - kojika17
【熱望】javascript の for 文で var i を宣言するのはやめて下さい - Qiita
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ
定番のコード規約とライブラリから学ぶJavaScriptの命名テクニック（上級編） - ICS MEDIA
CSSの変数をインラインで使用した条件付きCSS、コードを減らしながらもバリエーションを作成するCSSのテクニック
JavaScriptのスコープチェーン・変数参照の仕組みをGIFアニメで分かりやすく解説
CSSのコンテナースタイルクエリーstyle()の使い方 - ICS MEDIA
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
「Excel」に“変数”が使える新しい関数「LET」～“Office Insider”でテスト中／今年後半には他のチャンネルにも展開へ
CSSの「@property」を活用しておしゃれなボタンを作る方法をエキスパートが解説
【JavaScript】var / let / const を本気で使い分けてみた - Qiita
【JavaScriptの基本】letとconstの使い分け – ワードプレステーマTCD
Python で文字列に変数を埋め込む方法あれこれ - Qiita
https://jj-blues.com/cms/wantto-variableinbatfile/
JavaScriptのスコープ総まとめ | 第1回 スコープの種類とその基本
お前らはjsのvarとletの違いを分かってない - Qiita
static なメソッドにする理由の一つ：インスタンス変数に依存していないことを明示する - Qiita
JavaScriptの命名規則を現役エンジニアが解説【初心者向け】
【React】JSXで条件分岐を記述する方法をまとめてみた
【JavaScript入門】varの使い方とlet,constとの違いについて解説 - WEBCAMP MEDIA
【PowerShell】コマンド出力結果を変数に入力する方法 - Qiita
note.com/bai2_chun1
masayuki.nm.bex.jp
office-match.jp
be-sevenday.com
cookpad.com
togetter.com