Webエンジニアの備忘録

およそ自己の作業メモとして残しております。

お手軽React開発のテンプレを作りました

SPAを最速で作り始めたい! 結果的にはこちらを作りました。 よければ使ってください。 react-template github.com セールスポイント 取り込んで2コマンドで動きます。 npm i npm run start typescript / eslint / prettier とオススメの作法を詰めておきま…

javascript初学者向けメモ(2022年)

今回の記事について 私の周囲で他レイヤーからフロント開発へ幅を広げる方が増えていることもあり、こちらの記事を残しておこうと思います。 自身もサーバーサイドからフロントエンドへ転身した経験を持っており、javascriptを触れ始めたとき特異に感じた箇…

React v18への更新を試みる

React v18が正式リリース! React v18がnpmで更新できるようになったようです。 reactjs.org 手元でv17の環境を持っていたので、こちらを最新のものに更新してみました。 何も考えずに更新してみる 普段、パッケージ更新に関しては npm-check-updates という…

トラックボールマウス「ロジクール Logicool M575」を購入しました

トラックボールマウスを買い替えました 長らく愛用していたM570ですが最近ボールの反応が鈍くなってきており、ついに後継のM575に乗り換えました。 左がM570、右がM575でサイズや重量はほとんど変わりません。 使用感は上々 ボールの操作感ですが、M570は経…

フロントエンドエンジニアがCloudFrontを構築してみた

SPAを自分でホスティングしたい AWSはまだ初学レベルですが、Amplifyによるホスティングを通してSPAを簡単に公開できることに味をしめていました。 次のステップとして、もう少しコストを抑えた一般的な構成を学びたいと思っていましたが、ちょうど業務でS3…

StorybookをWebpack5で使う

StorybookにDefinePluginを導入、すると…? webpack では DefinePluginをプラグインを誰しも使っていると思います。 真新しい環境にStorybookを取り込んだ際、これが動かない事態に直面しました。 .storybook/main.js の中身はこんな感じ。 module.exports =…

componentWillMountをReactフックで書く方法を考えた

componentWillMountの今… v16以前、componentWillMountというライフサイクルイベントがありました。(過去形…) v17以降は非推奨となり、UNSAFE_componentWillMount と名称変更されています。 嫌われるcomponentWillMount v16以前からReactを利用しているプ…

実機へのXcodeビルドが失敗したときに振り返ること

失敗は突如として起こる… iOSのビルドが通らない、実機がつながらないなどにぶち当たり、一日潰してしまった…などということはないでしょうか? 残念ながら、わたしは多々あります… 起きるタイミングは? コードが影響であれば、gitで切り戻したり、差分をst…

Macbookを購入して最初にやること(メモ)

Mac

このページの内容 7年ぶりに新しいMacbookを購入しました! セットアップは非常に楽しい作業ですが、抜け漏れないようにやりたいので自分に向けてメモを残します。 手順 開梱・起動する。 落ち着いて開ける。広めのデスクとコンセントを確保する。 Apple ID…

自社プロジェクトに xcprojectlint をかけてみた

iOS

知見が少なかったり、検証者がいなかったり、小さな開発現場は積極的にLinterを入れるべきだと思っています。 iOS開発をはじめてまだ1ヶ月ちょっとですが、まず最初にLinterを探しました。 プロジェクトのLinterを発見 引き継ぎプロジェクトが Objective-C …

iOS開発の事始め

iOS

今まで近くて遠い存在だったiOS開発ですが、ひょんな事から先月より自社アプリの主担当に就任し、突貫で技術習得しました。 「ピンチはチャンス」 、この1ヶ月は会社の理解もあり引き継ぎ名目で集中してインプットができました。 ここで1ヶ月を振り返り、覚…

getUserMedia() でカメラ・マイクのブロックを個々に検知

最近詰まったので、メモっておくことにします。 ブロックによるエラーの特徴 ブラウザから getUserMedia() を用いてカメラやマイクにアクセスすると、それらのデバイスへのアクセス許可が必要になります。これがブロック状態であった時に NotAllowedError が…

2017年を振り返る

自身の来年やるべきことを模索するためにメモを残しています。 所感 昨年にクライアントサイドに転向し、主にブラウザ対応に重きをおく開発をおこなっていました。サーバーサイドでもRailsなど新しい経験もしましたが、Javascriptの世界は作法も大きく異なり…

Github二段階認証後はID + tokenを使う

https://github.com/settings/security 困ったこと 会社のルールでGithubで二段階認証(SMS)をおこなっていたのですが、コンソールでID+パスワードを求められた際に認証不足で処理が通らなくなります。 こんな場合です。 $ git clone https://github.com/tt…

React+Redux環境でreact-router@v4への移行をおこなう

React Routerの4系がリリースされて久しいですが、相変わらず対応ができていませんでした。 ようやく重い腰を上げてアップデートしたのですが、噂に違わず障壁が多い移行だったため、メモがてら記録を残しておきます。 v3 → v4で何が変わったか 簡潔に言うと…

Reactで絶対パスによるimportを使いたい

コンポーネントが深くなるとパスが読みづらい ecmascriptでは外部ファイルを取り込む際に相対パスを指定します。 ただ、コンポーネントの階層が深くなるに連れて相対パスがわかりづらくなるので、絶対パスが使えればと思うケースも出てきます。 -import Erro…

react-router画面遷移時のスクロール位置を操作する

前のページのスクロール位置が残る react-routerはURLのハッシュを用いて画面遷移を表現していますが、実際のルーティングは固定だったりします。 なので、こんな気遣いをしないと遷移後に最上部にスクロールしてくれなかったりします。 <Router onUpdate={() => window.scrollTo(0,</router>…

ES6におけるReactコンポーネントの書き換えについて

用途に併せてコンポーネントを書き分けよう eslintに従いクラスコンポーネントを書き換えるケースがよくあるので、サンプルを貼っておきます。 たくさん書いてありますが、全て結果としては同じ内容を表現しています。 クラスコンポーネント(class) 以下の…

Mac新OS「Sierra」で内蔵カメラが動かなくなった件

Mac

今回「Sierra」へのアップデートでは早くもいくつか辛酸を味わっていますが、FaceTimeカメラについてはようやく解決したのでメモを残しておきます。 以下、やってみたこと。 VDCAssistantのプロセス強制終了 カメラを握っているプロセスがあることで、他で利…

React開発をwebpackでおこなう

概要 前回までの記事でgulpを利用しての開発を進めていましたが、いろいろ見聞してwebpackを使ってみることにしました。 利点を簡潔に言えば、jsをひとつに纏めるかファイル群としてストアするかの選択ができます。さらにwebpack-dev-serverと組み合わせれば…

Reactjsのstate/propsの挙動を確認する極力シンプルなコード

以下の記事で紹介したサンプルコードです。 tak-taniguchi.hatenablog.com 概要 Reactのstate/propsの関係を簡潔に表すために書いてみました。 余計なコードをほとんど書いていないので、UIは見づらいですが動きがわかりやすいかと思います(笑) 動作に成功…

フロントエンド初心者がReactによるSPAを構築するに至るメモ

はじめに 最近Javascriptを用いたフロントエンド開発に従事することになり、取り急ぎ敷居が低そうなReactjsに飛びつきました。 jqueryを弄る程度で知識的に止まっていたので、学習は相当ステップを刻むことになってしまいました… 最近ようやくたたき台的なも…

Ruby on Railsにおけるfrontend開発基盤を考えるメモ

概要 Ruby on Railsにおけるフロントエンド開発にて、現段階(2016年7月時点)で必要そうな技術ベース、開発規約を調査しています。 唯一の方法策定ではなく、できるだけ多くの技術について俯瞰的に差異を調査します。 具体的な検討領域 フロントエンドと大…

rubyのメソッド引数が値渡しという話

Rubyを書き始めてまだ2〜3週間ですが、メソッドで思わぬ挙動があったので記録しておきます。 挙動が想定外だった def test_add(arr) arr += [1] puts 'B=' + arr.to_s end def test_push(arr) arr.push(1) puts 'D=' + arr.to_s end arr = [0, 2] puts 'A=…

フロントエンド環境構築(node/nvm/npm/gulp)

以前のプロジェクトでgulpを利用していたのに、フロントエンド担当ではなかったため環境構築に携われませんでした。 正直よくわからないで使っていたので、自分で構築して何をやっていたのか考えてみます。 今回は「ドットインストール」を教材に習ったもの…

PostgreSQLのインストール

UbuntuにPostgreSQLをインストールしてみました。 使い方についてもあまり知らなかったので、メモがてらCUI操作まで描いておきます。 パッケージのインストール こちらで本体、クライアントなど一通りの関連パッケージがインストールされます。 $ sudo apt-g…

Vagrant上でNginx+Unicornサーバー設定

rails serverコマンドでアプリケーションサーバーを立ち上げるのも手間になってきたので、Unicornを入れてみました。 こちらは前回記事の続きの作業になります。 tak-taniguchi.hatenablog.com Unicornをインストール 以下、Vagrant内での作業になります。 G…

Vagrant + Nginx + Ruby on Railsを動かしてみる

かなり遅まきながら、Rubyに触れる機会がありVagrantでのセットアップまでを試してみました。 RubyをVagrantにインストールし、Railsの新規プロジェクトを起動・ブラウザ確認するまでの工程をざっくり記載しました。 コマンドで迷ったところをメインにまとめ…

Unity Cloudで自動ビルドからSlack通知までを試してみました

Unityビルドの悩み これまで実機での確認はPCにAndroid端末を接続して行っていました。 ただ、こちらの方法だと以下の懸念がつきまといます。 ビルドが環境に依存する。(ProjectやSceneを保存し忘れる、Unityバージョンを揃えそこねるなど) 複数のプラット…

さくらVPSの独自ドメインサーバーからgmailにメールを転送

さくらVPSで独自ドメインを取得していたのですが、メールアドレスとして利用していなかったのに気づき、せっかくなので設定してみました。 これまでメールサーバーを構築したことがなかったので、基本的なことから勉強しました。 今回の要件 さくらVPS独自ド…