じゃこscript

フロントエンドとかデザインとかバックエンドとか浅く広く書いていきたいです

Javascript

Vue-test-utilsではじめてのフロントエンドテストを書きました

背景 会社では主にディレクションやフロントエンドを担当することが多いのですが、恥ずかしながらフロントエンドのテストコードを書いたことがありません… (そんな状態でフロントエンドエンジニアとして名乗るのもおこがましいですが…)。 現職でもエンジニア…

会社でフロントエンド研修課題をつくりました(その3. とりあえず実装してみる)

背景 こんな流れで研修課題を作ることになりました。 概要 課題内容を考えてみる 環境構築手順をまとめる 実際にアプリを作ってみる ←いまここ Todoアプリを作る コンポーネント化する EventをEmitするパターンを実装する fluxアーキテクチャでデータ管理す…

会社でフロントエンド研修課題をつくりました(その2. 環境構築)

背景 こんな流れで研修課題を作ることになりました。 概要 課題内容を考えてみる 環境構築手順をまとめる ←いまここ 実際にアプリを作ってみる Todoアプリを作る コンポーネント化する EventをEmitするパターンを実装する fluxアーキテクチャでデータ管理す…

会社でフロントエンド研修課題をつくりました(その1. 何をテーマにするか)

背景 現職のインターン生はほぼほぼバックエンドを担当しているのですが、 先日「フロントエンドも最低限開発できるようになりたい」という要望を受けました。 フロントエンドにおける研修課題のようなものはなかった(バックエンドはある)ため、いっちょやっ…

localstorageに意図せずundefinedを突っ込んだらハマりました

localStorage を久しぶりに使う機会があって、ハマったのでメモしておきます。 背景 // hogeはobjectを想定しています localStorage.setItem('item', JSON.stringify(hoge)); ~~~~~~ let item = JSON.parse(localStorage.getItem('item')); console.log(item…

オブジェクト指向を意識してコードを書いてみた

今までオブジェクト指向に則ったコードの書き方とか全く意識したことがなくてですね、 ワークショップとかセミナーとかで現場で働いている方のコードを見た時に「なんだこれ」っていう顔にならないように確認しておこうと思いました。 そもそもオブジェクト…

Javascriptを使ってテキストフィールドの内容をリアルタイムで表示させる

これまたお仕事関係で使いそうなので先回りでコードを書いてみました。 コード ※chrome想定 <textarea id="text"></textarea> <div id="output"></div> window.onload = function() { var txtEl = document.getElementById('text'), outputEl = document.getElementById('output'); txtEl.addEventListener('keyup',…

Javascriptを使って選択しているテキストを取得する

今インターン先で担当しているお仕事に使えそうなのでメモします。 コード ※chromeでの使用を想定しています <div>あいうえお</div> <button id="btn">取得する</button> window.onload = function() { var btnEl = document.getElementById('btn'); var str = ''; btnEl.addEventListener('click'…

クロージャを本能的に理解できない理由を考えたらあっさり解決した話

Javascriptを勉強している方なら誰でもぶち当たる壁、クロージャ。 「クロージャを理解する=Javascript初心者卒業」とまで言われてたりしていますよね。 サンプルを見たりコードを書いたりしてなんとなくどういうものかは掴めてたのですが、 「関数内でretu…

Javascriptの関数定義、実行についてのおさらい

タイトルまんまです。 クロージャとかスコープチェーンとか調べてる間にこんがらがってきたので確認のため。 関数定義と実行のパターン 1:function命令 function test() { console.log('hoge'); } test(); // hoge 関数funcを直接定義しています。 関数名()…