イイダリョウのブログ。略称「クモコツ」プロフィール2020-02-18【JS】アロー関数のthisの挙動(プロトタイプとクラスの違い)JSアロー関数の続きです。前回はアロー関数の書式の違いについてでした。今回は従来の関数とアロー関数の挙動の違いについて。影響が大きそうなのはthisの挙動。この違いを認識しないまま単純に従来の関数をアロー関数に書き換えていくと動かない事態もあ...【JS】アロー関数のthisの挙動(プロトタイプとクラスの違い)2020-02-17【React】JSXの中に別の関数のJSXを読み込む(入れ子状態)JSReactの続きです。前回はJSXを事始めて、変数でテキストやCSSスタイルを読み込んでみました。今回はJSXの中に別の関数のJSXを読み込むのをやってみます。JSXの入れ子状態です。CSSフロントエンド開発環境の続きです。前回はHTMLHintでHTMLの構文チェックしました。今回はAutoprefixerでCSSのベンダープレフィックスを自動で付けてみます。自動ベンプレ付けよう(Gulpで動かす)2020-02-13ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたことJSNode.jsのフレームワークExpress。存在は前から知っていたけどイマイチ何ができる物なのかわかっていなかった。APIについて調べたことをキッカケに、ExpressとJSフレームワーク(Vue、React、Angularなど)の関係についても調べました。...ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと2020-02-09【JS】アロー関数の複数の書き方を試してみたJSES6(ES2015)で追加されたアロー関数。従来の関数よりもコンパクトに書けます。IE非対応とはいえ、もう5年も経っているのでそろそろこちらをメインで行きたい!アロー関数には複数の書き方があります。HTML構文チェック系の続きです。前回はStyleLintを使ってCSSの構文チェックを行いました。今回はHTMLHintを使ってHTMLの構文チェックをしてみたく。CSS構文チェック系の続きです。前回はESLintでJSコードの構文チェックを事始めました。今回はStyleLintでCSSコードの構文チェックを事始めます。それが何かはいまいち理解できていなかった。調べまくったところフロントエンドとバックエンドの分業の流れがようやく理解できました。「API」と「JSON」への理解も重要でした。JSフロントエンド開発環境の続きです。JSフロントエンド開発環境の続きです。前回はESLintでコードチェックをしてみました。今回はコードフォーマッター「Prettier」でコードの整形をしてみます。JSだけでなくHTML、CSSなどもできるみたい。JS以前、フロントエンドの開発環境についていろいろ調べた記事を書きました。その後、Gulp、Babel、Webpackのフロント開発三兄弟を体験しました。今回はESLintを使った構文チェックをやってTRY!それではいきませう。JSwebpackの続きです。これまでフロント開発3銃士のうちGulpとBabelを触ってみたので、今回は最後の一つ、webpackを触ってみる。以前のJSモジュールの記事のjsファイルをバンドルしてみました。それでは行きましょう!webpackでJSのモジュールファイルをバンドルする2020-01-12【React】JSX事始め「すごいぞ!JSXもCDNで動いたんだ!」JSReactの続きです。前回はReactの仮想DOMをCDNで体験しました。今回はJSXのコンパイルを同じくCDNで体験します。ReactといえばJSX!なイメージだったのでようやく一歩踏み入れた感。JSJSコンパイル系の続きで今回はBabelです。前回はAltJSのTypeScriptをGulpでコンパイルしました。今回のBabelはESの新しい書式を従来の書式(ES5)に変換します。AltJSではなく正規なJSでちょっと書き方が新しいだけだし、Babel自体にコンパイル機能があるた...【JS】BabelでESをコンパイルする2020-01-09【Three.js】マテリアルとライティング設定(入門編に再入門!)JSThree.jsの続きです。前回はThree.js入門のの回る箱をいろいろ打ち替えてみました。今回は「マテリアル」と「ライティング」を見てきます。それでは行きましょう!【Three.js】マテリアルとライティング設定(入門編に再入門!)2020-01-07【Vue.js】vuex-persistedstateでデータをローカルストレージに保存するJSVue.jsの続きです。前回はVuexのミューテーション(mutations)に設定した「いいね」アイコンのカウント処理を読み込んで実行しました。今回はvuex-persistedstateでそのカウント数をローカルストレージに保存してみたく。それでは行きましょう!【Vue.js】vuex-persistedstateでデータをローカルストレージに保存する2020-01-05【Tone.js】和音楽器に五和音(テンションコード)他を追加するJSTone.jsの続きです。前回は和音楽器に四和音(セブンス、シックスス)を追加しました。今回は五和音(テンションコード)などを追加してみます。それでは行きましょう!【Tone.js】和音楽器に五和音(テンションコード)他を追加する2019-12-31React事始め「すごいぞ!ReactはCDNで動いたんだ!」JS新シリーズ。JSフレームワークReact、はじめました。今回は初回ということで、環境構築なしにCDNリンクでReactの仮想DOMを初体験してみます。Train(p5.js2.1)JSp5.jsの続きです。CodingTrainのp5.jsチュートリアル、前回(1.6)までは静止画の描画でした。2.1からはいよいよアニメーションに入っていきます。今回はp5.js組み込みの変数を使って簡易なペイントアプリを作って見ます。JSGulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしました。今回はAltJSのTypeScriptをコンパイルします。それでは行きまっしょい!【JS】TypeScriptをGulpでコンパイルしてみる2019-12-20【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行するJSVuexの続きです。前回はVuexストアのステートに保管したデータを読み込みました。今回はミューテーション(mutations)に設定した処理を読み込んで実行してみます。CSSGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパイルしました。今回はAltCSSのSass(SCSS)をコンパイルします。for文を絡めて「for文のi番目をホニャララする」という処理を書きました(和音鍵盤でも使ってます)。2箇所を参照する場合に2箇所の順番がズレると成立しなくなりそうです。片方は配列のi番目で指定しつつ、...【JS】多次元連想配列のキー名を外部の変数で指定できるか調べた2019-12-11【Vue.js】Vuexのストアに値を保管してコンポーネントに表示するJSVuexの続きです。前回はVuexが何を管理しているのか調べました。Vuexのストアでコンポーネントを跨いで参照するデータを一元管理するということでした。今回はストアに実際にデータ(値)を置いて、コンポーネントから表示してみます。それではいきましょう!【Vue.js】Vuexのストアに値を保管してコンポーネントに表示する2019-12-08【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加するJSTone.jsの続きです。前回はようやく三和音(トライトーン)の別のコードを増やしました。今回は四和音(セブンスコードとシックスス)にトライ。HTMLGulpの続きです。前回はHTMLテンプレートエンジンのPugをGulpでコンパイルしました。今回はEJSのコンパイルにトライ。それではいきましょう!【HTML】EJSをGulpでコンパイルしてみる(SyntaxErrorでちょい苦戦)2019-12-03【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べたJSVue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていきました。今回からは状態管理ライブラリ「Vuex」に取り組んでみます。「状態管理」とはなんぞや、何の状態を管理するのか?というところからいろいろ調べてみました。それではいきましょう!...【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた2019-12-01【Tone.js】和音鍵盤に三和音(トライアド・コード)を追加するJSTone.jsの続きです。前回は、コードタイプを増やしやすいようにリファクタリングをしました。今回はいよいよコードタイプを増やしていきたく思います。HTMLGulpの続きです。前回はローカルにインストールができました。今回はHTMLテンプレートエンジン「Pug」のコンパイルをやってみたいと思います。メタ言語全体としても自分の中での初コンパイルになります。それではいきましょう!【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)2019-11-27【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作るJSVue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと下層ページを往来しました。今回は$route.paramsと$route.queryを使ってパスやGETパラメータから動的にページを作ってみたく。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。