クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

2019-01-01から1年間の記事一覧

React事始め「すごいぞ!ReactはCDNで動いたんだ!」

新シリーズ。JSフレームワークReact、はじめました。今回は初回ということで、環境構築なしにCDNリンクでReactの仮想DOMを初体験してみます。それでは行きましょう!

【p5.js】変数mouseX、mouseYを使ってペイントアプリを作る:Coding Train(p5.js2.1)

p5.jsの続きです。CodingTrainのp5.jsチュートリアル、前回(1.6)までは静止画の描画でした。2.1からはいよいよアニメーションに入っていきます。今回はp5.js組み込みの変数を使って簡易なペイントアプリを作って見ます。それでは行きましょう!

【JS】TypeScriptをGulpでコンパイルしてみる

Gulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしました。今回はAltJSのTypeScriptをコンパイルします。それでは行きまっしょい!

【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行する

Vuexの続きです。前回はVuexストアのステートに保管したデータを読み込みました。今回はミューテーション(mutations)に設定した処理を読み込んで実行してみます。それでは行きましょう!

【CSS】Sass(SCSS)をGulpでコンパイルしてみる

Gulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパイルしました。今回はAltCSSのSass(SCSS)をコンパイルします。それでは行きましょう!

【JS】多次元連想配列のキー名を外部の変数で指定できるか調べた

JS

ネイティブJSネタです。以前、多次元配列とfor文を絡めて「for文のi番目をホニャララする」という処理を書きました(和音鍵盤でも使ってます)。しかし2箇所を参照する場合に2箇所の順番がズレると成立しなくなりそうです。片方は配列のi番目で指定しつつ、…

【Vue.js】Vuexのストアに値を保管してコンポーネントに表示する

Vuexの続きです。前回はVuexが何を管理しているのか調べました。Vuexのストアでコンポーネントを跨いで参照するデータを一元管理するということでした。今回はストアに実際にデータ(値)を置いて、コンポーネントから表示してみます。それではいきましょう!

【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する

Tone.jsの続きです。前回はようやく三和音(トライトーン)の別のコードを増やしました。今回は四和音(セブンスコードとシックスス)にトライ。それではいきましょう!

【HTML】EJSをGulpでコンパイルしてみる(SyntaxErrorでちょい苦戦)

Gulpの続きです。前回はHTMLテンプレートエンジンのPugをGulpでコンパイルしました。今回はEJSのコンパイルにトライ。それではいきましょう!

【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた

Vue.jsの続きです。前回まではNuxt.jsのプロジェクトを見ていきました。今回からは状態管理ライブラリ「Vuex」に取り組んでみます。まず「状態管理」とはなんぞや、何の状態を管理するのか?というところからいろいろ調べてみました。それではいきましょう!…

【Tone.js】和音鍵盤に三和音(トライアド・コード)を追加する

Tone.jsの続きです。前回は、コードタイプを増やしやすいようにリファクタリングをしました。今回はいよいよコードタイプを増やしていきたく思います。それではいきましょう!

【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)

Gulpの続きです。前回はローカルにインストールができました。今回はHTMLテンプレートエンジン「Pug」のコンパイルをやってみたいと思います。メタ言語全体としても自分の中での初コンパイルになります。それではいきましょう!

【Vue.js】$route.paramsと$route.queryでパスやGETパラメータから動的にページを作る

Vue.jsの続きです。前回はNuxt.jsのプロジェクトでTopページと下層ページを往来しました。今回は$route.paramsと$route.queryを使ってパスやGETパラメータから動的にページを作ってみたく。それではいきましょう!

【p5.js】色の基本、コメントとエラー、コメント:Coding Train(p5.js1.4〜1.6)

p5.jsの続きです。ダン先生のCoding Train、前回は「1.3 」でShapes & Drawingを見ました。今回「1.4」でColorです。それではいきましょう!

Gulpインストールでけった〜!!(package.json作り忘れてた。。)

メタ言語のコンパイル環境を作る!続きです。前回、Gulpのインストールを試みて、うまくいかず苦戦中です。インストールに至るまでの実録!後編ですw

Gulpのインストールが5分で出来なかった話(苦戦中)

メタ言語のコンパイル環境を作る!続きです。前回はコンパイル方法を検討しました。Gulpとnpm scriptsが候補となりましたが、まずはGulpから体験してみようぞホトトギス。それではいきましょう!*1 *1:と、ハイテンションで始めたが今回は悪戦苦闘な展開にな…

【Tone.js】コード音が読みやすくなるようにリファクタリング

久々にTone.js再開!前回はコード切り替えボタンと鍵盤を連携しました。これからコードを増やしていくにあたり、今の書き方だとコード名とコード音の把握が分かりにくくなりそうな気がします。今回はコードのリファクタリングをメインにしてみたく思います。…

【Vue.js】Nuxt.jsプロジェクト router-linkで下層ページに往来

Vue.jsの続きです。前回はNuxt.jsプロジェクトのTOPページのコードを読み解きました。今回は下層ページを作ってみたく。それではいきましょう!

【Gulpかnpm-scriptsか】メタ言語のコンパイル方法を調査・検討した

メタ言語のコンパイル環境を作る!続きです。前回はメタ言語を選定しました。今回は言語をコンパイルするタスクランナーを選定します。

【Vue.js】Nuxt.jsのプロジェクトファイルを見てみる

Vue.jsの続きです。前回はNuxt.jsのプロジェクトを作成しました。今回はそのプロジェクトファイルの中身を見てみる。それではいきましょう!

【JS】モジュール(import / export)でどんなことができるのか事始めてみた

JS

Vue.jsやNuxt.jsを理解する上で重要なJSの「モジュール」という仕組みを先に理解する。外部JSファイルの一部の機能を読み込むようだが、どんなことがことができるのか。それではいきましょう!

Figmaで完結する!Webサイト設計の流れ

Webサイトのデザインや設計を行うとき、昔は工程によっていろんなツールを使い分けていました。今はそれを(私の愛してやまない)Figma一つでブラウザ上だけで完結できます!

【Vue.js】Nuxt.jsのプロジェクトを作成する

Vue.jsの続きです。前回はNuxt.jsのインストールと簡易ページを作成しました。ハローワールド的なペライチページでした。今回は本式なプロジェクトをつくってみる。それではいきましょう!

フロントエンドのメタ言語のコンパイル環境を作る(言語選定編)

以前、CodePenで体験できるフロントエンド のメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)をやってみた。その後、CodePenでは体験できないEJSなどの存在も知り、そろそろローカル環境にメタ言語のコンパイル環境を作りくなった。言語によって方法が…

【Vue.js】Nuxt.jsをインストールして簡易ページを作成した

Vue.jsの続きです。前回までVue CLIをインストールしてみた。今回はNuxt.jsをインストールしてみる!途中、何度かエラーが起こったが、調べながらなんとか進めた。それでは行きましょう!

【Googleアナリティクス】主なメニューからユーザー層をイメージする

以前書いたGoogleアナリティクス(GA)の続きです。前回はGoogleアナリティクスの基本であるユーザー、セッション、PVの関係について書きました。GAは膨大な情報量でもっといろいろな分析できますが、主だったメニューをざっと見るだけでもサイトを見ている…

【JS】Web Speech APIを使ってページのテキスト読み上げボタンを実装してみた

テキスト読み上げのスクリーンリーダーについて調べたところ、なんとJSで「Web Speech API」というのがあることを知った!どんな風に読み上げられるのか、実際にやってみた。それではいきましょう!

【Vue.js】Vue CLIのダッシュボード(GUIツール)を開く

Vue CLIの続きです。前回はVue CLIのプロジェクトを作ってみました。今回はプロジェクトのダッシュボード(GUIツール)を開いてみます。それではいきましょう!

【HTML】テンプレートエンジンEJSでFizzBuzzる!(Pugとの比較あり)

HTMLテンプレートエンジンの続きです。前回はPugでFizzBuzzってみました。今回はEJSでFizzBuzzる!Pugと同様Node.jsでトランスパイルできつつ、PugよりもHTMLの書式が残ったテンプレートエンジンです。それでは行きましょう!

【Vue.js】Vue CLIのプロトタイプとプロジェクトを作る

Vue.jsの続きです。前回はVue CLIをインストールしてみました。今回はプロトタイプとプロジェクトを作ってみます。それではどうぞ!