経緯 フロントエンド開発において主流になった印象のフレームワークReact.js。 業務でも使えるようになりたいので、学習がてら実際に練習サイトを作成してみようと思いました。 Reactについての私の理解度 JavaScriptはES6の仕様を含めた基本構文は抑えてい…

基本 TypeScriptは型を推論する。 const name: string = 'torahack';のようにして、型アノテーションを使い明示的な型を定義。 型 柔軟な型定義が可能。例： // 生まれの年は数字か文字列でも受け取れる変数 let birthYear: number | string; valueが存在し…

初めに cookie, localStorage, sessionStorageなど、セッション中のデータ保存できる仕組みがあります。私はJavaScriptでこれらを使った何かしらの実装をしたことが無かったので、今回はlocalStorageを使った簡単なToDo Webアプリを作成してみました。cookie…

初めに まだまだ多くのサイトで使われてるjQuery。最近ではパフォーマンスや保守性などの観点から、jQueryの必要性は無くなってきました。 私は数年前からJavaScriptを一から学び始めましたが、対応案件ではまだjQueryに頼る事が多かったです。 そこで、案件…

成果物 サイト: https://kaiyoshida57.github.io/js_app_ajax/ Github: https://github.com/kaiyoshida57/js_app_ajax きっかけ JavaScriptにおける新しいの非同期処理の学習をしようと思いました。 そこで、TMDB（https://www.themoviedb.org/）という映画…

ボタンのCSSジェネレーター ボタンのCSSジェネレーター作ったので、よかったら使ってみて下さい！https://t.co/w3jyPDgqbB pic.twitter.com/YErJouOrkf— はにわまん (@haniwa008) 2020年9月12日 ちなみに、作者はにわまんさんのサイトでも、WordPressの記事…

・要素があるかどうか判別したい場合の記述 //querySelectorやgetElementByIdなどの単一要素を取得するメソッドを使った場合 const elem = document.querySelector('.elem'); if(elem !== null){ /* elemがあれば */ } //querySelectorAll や getElementsByC…

使い所 カーソルホバーで開く「プルダウン（ドロップダウン）メニュー」や、自動スクロールしている「スライダー」など、 イベントや動きの設定されている要素のスクリプトを一旦止めて、要素に設定されているスタイルを変更したい時など。 方法 ①Devloper T…

Webページで使っているJSでは、出てくることも多いので、改めて調べてまとめました。 setTimeout() ・引数に指定した待ち時間の経過後に、関数を1度だけ実行させます。 ・処理を遅延させたい時、例えばコンテンツの非表示を遅らせる時などに使います。 ・cle…

【HTML文字列の挿入】： insertAdjacentHTML insertAdjacentHTMLは、第二引数で指定するテキストをHTMLとして、指定された位置（第一引数で指定）に挿入します。構文は以下です。 .insertAdjacentHTML(position, text); ・第二引数で指定するテキストを HTML…

ブラウザで、要素に設定されたイベントを調べる方法を備忘録として書いておきます。 【Chrome例】 ①developerツールにて、タグを選択する。 ②Event Listenersタブをクリック。 ③clickイベントがあればclickなどと表示されており、▼を押してさらに下を見ると…