Javascript
今回の記事について 私の周囲で他レイヤーからフロント開発へ幅を広げる方が増えていることもあり、こちらの記事を残しておこうと思います。 自身もサーバーサイドからフロントエンドへ転身した経験を持っており、javascriptを触れ始めたとき特異に感じた箇…
React v18が正式リリース! React v18がnpmで更新できるようになったようです。 reactjs.org 手元でv17の環境を持っていたので、こちらを最新のものに更新してみました。 何も考えずに更新してみる 普段、パッケージ更新に関しては npm-check-updates という…
StorybookにDefinePluginを導入、すると…? webpack では DefinePluginをプラグインを誰しも使っていると思います。 真新しい環境にStorybookを取り込んだ際、これが動かない事態に直面しました。 .storybook/main.js の中身はこんな感じ。 module.exports =…
componentWillMountの今… v16以前、componentWillMountというライフサイクルイベントがありました。(過去形…) v17以降は非推奨となり、UNSAFE_componentWillMount と名称変更されています。 嫌われるcomponentWillMount v16以前からReactを利用しているプ…
最近詰まったので、メモっておくことにします。 ブロックによるエラーの特徴 ブラウザから getUserMedia() を用いてカメラやマイクにアクセスすると、それらのデバイスへのアクセス許可が必要になります。これがブロック状態であった時に NotAllowedError が…
React Routerの4系がリリースされて久しいですが、相変わらず対応ができていませんでした。 ようやく重い腰を上げてアップデートしたのですが、噂に違わず障壁が多い移行だったため、メモがてら記録を残しておきます。 v3 → v4で何が変わったか 簡潔に言うと…
コンポーネントが深くなるとパスが読みづらい ecmascriptでは外部ファイルを取り込む際に相対パスを指定します。 ただ、コンポーネントの階層が深くなるに連れて相対パスがわかりづらくなるので、絶対パスが使えればと思うケースも出てきます。 -import Erro…
前のページのスクロール位置が残る react-routerはURLのハッシュを用いて画面遷移を表現していますが、実際のルーティングは固定だったりします。 なので、こんな気遣いをしないと遷移後に最上部にスクロールしてくれなかったりします。 <Router onUpdate={() => window.scrollTo(0,</router>…
概要 前回までの記事でgulpを利用しての開発を進めていましたが、いろいろ見聞してwebpackを使ってみることにしました。 利点を簡潔に言えば、jsをひとつに纏めるかファイル群としてストアするかの選択ができます。さらにwebpack-dev-serverと組み合わせれば…
以下の記事で紹介したサンプルコードです。 tak-taniguchi.hatenablog.com 概要 Reactのstate/propsの関係を簡潔に表すために書いてみました。 余計なコードをほとんど書いていないので、UIは見づらいですが動きがわかりやすいかと思います(笑) 動作に成功…
はじめに 最近Javascriptを用いたフロントエンド開発に従事することになり、取り急ぎ敷居が低そうなReactjsに飛びつきました。 jqueryを弄る程度で知識的に止まっていたので、学習は相当ステップを刻むことになってしまいました… 最近ようやくたたき台的なも…
概要 Ruby on Railsにおけるフロントエンド開発にて、現段階(2016年7月時点)で必要そうな技術ベース、開発規約を調査しています。 唯一の方法策定ではなく、できるだけ多くの技術について俯瞰的に差異を調査します。 具体的な検討領域 フロントエンドと大…
PHPでAPIを用意してAjaxで呼び出し、divタグのinnerHTMLにそのまま埋め込みたいというのはよくある話。 APIにHTML自体を生成させて吐き出させるということをやると、中途半端にHTMLタグが再生されてグズグズのページが見えてしまうというのもよくある話。 そ…
必要なファイル sudo apt-get update sudo apt-get install build-essential curl git libssl-dev バージョン管理ツールを使って入れるのが吉 どうもJS全般でバージョン差異による挙動変化が多く、開発環境下でもそれを変えながら作業する文化があるようだ。…