first-childが効かない時の対処方法。 first-childが効かない例 例えば以下のようなHTML構造になっている場合、 <div class="myClass"> <h1>title</h1> <p>hoge</p> <p>hoge</p> <p>hoge</p> </div> 以下のようなCSSは適用されません。 .myClass p:first-child { background-color: red; } これは、myClassの最初の子要…
npmってなんですか？ 世界一大きいソフトウェアライブラリ ソフトウェアパッケージマネージャー npmを使ってみる npm init オプション -- y npm install 基本の使い方 オプションなど --save-dev -g パッケージを指定しない場合 エイリアス npm uninstall 基…
弁当ですか？（違う） 結論 一言で言うと、プロトコル・ドメイン・ポートまでを一塊にしたもの。 解説 例えば、 http://example.com:80/app1/index.html 上記のようなURLがある場合に、 http://example.com:80 ここまでがオリジンということになります。 あ…
useStateに型情報を付与する TypeScript + Reactでフロントエンド開発するなら、最大限型による恩恵は受けたいですよね。 ということで、以下のようにすると型情報を付与したuseStateが定義できます。 booleanなどの場合 この場合は型推論が働く（多分）ので…
JavaScriptでたびたび見かけるスプレッド構文についてまとめます。 構文 ...obj; // こういう感じ 配列の場合の例 const arr = [1,2,3,4,5]; const arr2 = [...arr, 6,7,8]; console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8] オブジェクトの場合の例 const us…
昨今のフロントエンド事情について行けていないので、アプリケーション作成時によく聞く単語などを整理する。 間違っているところもあるかもしれないが、現時点での理解を残す。 Webpack 複数のファイルを1つにまとめる。らしい。 ESLint JavaScript用の静的…
以下の3冊を読みました。 ざっくり内容や感想を書き記します。 証言 羽生世代 証言 羽生世代 (講談社現代新書)作者:大川慎太郎発売日: 2020/12/16メディア: Kindle版 将棋界のレジェンド羽生善治と同世代の棋士を総称して「羽生世代」と呼ぶのですが、その羽…
結論 zipとtoMapを使用することで簡単にできます。 val names = arrayOf("one", "two", "three") val nums = arrayOf(1, 2, 3) val nameAndNums = names.zip(nums).toMap() println(nameAndNums) // {one=1, two=2, three=3} zipは、List<Pair<T, R>を返却するメソッド</pair<t,>…
Springのコントローラが受け取る引数は基本的にあらかじめ決められた型のものしか受け付けません。 （Stringなど） そのため、パラメータでオリジナルの型として受け取りたい場合はConverter<K, T>を使用するといいでしょう。 例えば以下のようなコントローラのメ</k,>…
SELECT LOWER(CONCAT( SUBSTR(HEX(id), 1, 8), '-', SUBSTR(HEX(id), 9, 4), '-', SUBSTR(HEX(id), 13, 4), '-', SUBSTR(HEX(id), 17, 4), '-', SUBSTR(HEX(id), 21) )) FROM some_table;
近年、Null安全という言葉と共に、各言語でNullを安全に扱うための構文が一般的になってきています。 こちらの記事にあるように、この流れはJavaScriptに限った話ではありません。 今回はJavaScriptに限った話になりますが、Nullを扱う際に便利な構文をいく…
A - Plural Form 末尾の文字に従って分岐をします。 s = input() if s[-1] == 's': print(s + 'es') else: print(s + 's') B - Go to Jail タプルなどで同時に投げたサイコロの目を保持しておきます。 3回連続の判定は変数なり、現在のindexから2つ先までも…
ラムダの書き方や注意点を学びます。 はじめに ラムダは、リストの操作等でよく使用されることが多いため、リストに対しての操作を例にとって解説していきます。以下は、リストに格納するPersonオブジェクトです。 名前、年齢、性別を表すプロパティを持つ、…
Kotlinの拡張について。 拡張とは ある既存のクラスに新しくメソッドやプロパティなどを定義する方法です。 拡張関数 fun main(args: Array<String>) { //拡張関数の例：既存のIntクラスにisOddメソッドを追加する fun Int.isOdd(): Boolean = (this % 2 != 0) 5.isO</string>…
Kotlinのデータクラスです。 はじめのまとめ Kotlinに、値を表すクラスを作成する際に便利な機能のひとつとして、data classがあります。 data classを用いると、そのclassにはコンパイラ側で以下の3つのメソッドが実装されます。 1. toString 2. equals 3. …
はじめに Kotlinの基本的な文法等を学びます。 取り扱っていないトピックも多々あるかと思いますが、最低限持っていたい知識をまとめました。 また、所々Javaとの比較も織り交ぜております。 はじめに Hello, World! 変数 関数 分岐と繰り返し 分岐 if when …
こんなTweetが流れてきたので、ひとつひとつできるように勉強。 Reactの実務でここら辺が必修科目かなってのをあげてくまる・React・Redux・React Router・redux-thunk redux-saga・hooks・context API・TypeScript・jest・enzyme・Cypress or TestCafe・esl…
React16.8から導入されたフックの基本を学びます。 概要 簡単に言うと、関数型のコンポーネントにstateを持たせる仕組みのことです。以下、公式ドキュメントからの引用です。 フックとは、関数コンポーネントに state やライフサイクルといった React の機能…
C問題までは簡単なんだけどなぁ・・。 A - Takoyaki 単純に、全体で作成したい個数を、一回あたりの個数で割った数に時間をかければ良いだけです。 余りが出る場合は１回分の時間を足すことを忘れずに。 n, x, t = map(int, input().split()) ans = n // x *…
採用基準作者:伊賀 泰代発売日: 2013/01/28メディア: Kindle版 まとめ グローバルに活躍するために必要なのは地頭や論理的思考能力よりもリーダーシップが必要であり、リーダーシップとは役職や年齢ではなく全ての個人が発揮すべき能力であり、求められるも…
１ヶ月ぶりくらいに挑戦しました。 結果はC問題までAC・・・。 A - Rainy Season 単純に文字数を数えるだけではWAになってしまうことに注意します。 連続してRが出る回数が答えとなるため、R以外が出現した場合はカウントを初期化するなどすればOKですね。 …
JavaScriptとCSSを使って、モーダルウィンドウを作成します。 実現方法は至って単純で、なんらかのボタンが押されたらモーダルのdisplay属性をnoneにしたりblockにしたりするだけです。 .modal { display: none; position: fixed; z-index: 1; left: 0; top:…
はじめに ctrl + Enterに限らず、特定のキーを押下した際になんらかのイベントを発火させる方法です。 ソースコード document.addEventListener('keydown', (e)=>{ if (e.ctrlKey && e.keyCode == 13) { alert('ctrl and enter!'); } }) 一応HTMLも。 <html> <head> <title>ctr</title></head></html>…
React開発中に出現したワーニングを対処しました。 ワーニングなのでそこまでクリティカルではないと思いますが備忘として残します。 調査 ワーニングメッセージを直訳すると、 まだマウントされていないコンポーネントでsetState()は呼び出すことができませ…
JavaScriptで使用できるLocalStorageについて学びます。 LocalStorageとは ブラウザにデータを保存できる仕組みです。 公式ドキュメントはこちらです。 使い方 localStorageへデータを保存する //例 localStorage.setItem('key', value); localStorageへデー…
アロー関数について勉強します。 基本の書き方 まずはおなじみの、公式サイトからの引用です。 アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッ…
Reactを学習中なのですが、たびたび出現するbind()メソッドがよくわからなかったため、メモ。 はじめに 結論を言ってしまうと、bind()メソッドを理解するためにはJavaScriptにおけるthisの挙動の理解が必要かもしれません。ひとまず、JavaScriptではthisの扱…
結論 inputタグをdivタグなどで囲む。 その上で、divタグに対してtext-align:centerを指定する。 .center { text-align:center; } <div class='center'> <input type='text'></input> </div> 成り行き input要素に直接text-align:centerを指定しても効かなかったため。 （以下のCSSではテキストボックスが親要素に…
近年のフロントエンド全くわからんのです。 公式ページにチュートリアルもありますので、まずはここからですね。
CSSで背景色などの色を指定する方法がいろいろあるため、まとめました。 以下、４種類の方法を記載していますが、全て同じ色となります。 色名を指定する 16進数で指定する rgbで指定する hslで指定する 色名を指定する .button1 { background: aqua; } CSS…
