HTMLGO

東京在住のフリーランスのフロントエンドエンジニア https://htmlgo.si…

HTMLGO

東京在住のフリーランスのフロントエンドエンジニア https://htmlgo.site/

  • 私生活

  • 技術

    web技術についての記事

  • ワークアウト

土日

今週末は、 生活用品の買い足し 部屋の掃除 ジム（プール）、ランニング、懸垂 仕事＆プログラミングの勉強 買い物（ユニクロ） などやって、あとは好きなYoutubeを…

HTMLGO
HTMLGO
7か月前
1

久しぶりにしんどい

一昨年に体調を崩してしまい、 そこから環境を変えてなんとか持ち直したのだが、今週辺りからまたぶり返してしまった。 ここの所、2日間はずっと寝ていて、 今日はこれか…

HTMLGO
HTMLGO
7か月前

指定ディレクトリへ移動するコマンドをaliasとしてセットするシェルスクリプトを書いた

今、シェルスクリプトを勉強中です。 ずっと手動でやっていて無駄だと思う作業を少しつづ自動化しています。 案件ごとに、いちいちプロジェクトディレクトリに移動するの…

HTMLGO
HTMLGO
2年前
2

githubリポジトリの一部のディレクトリだけダウンロードしたい

6月4日追記２ degitを使いやすくするシェルスクリプトを書いた。 6月4日追記 https://qiita.com/masakinihirota/items/418eec4422fd06690924 npm モジュールに便利そう…

HTMLGO
HTMLGO
2年前

「Fetch API」についてまとめる

今まで、ajax通信にはHTTPクライアント「axios」を使っていたが 最近はIE11をサポートしなくて良くなってきたので、 ブラウザでnativeでサポートされているFetch APIを使う…

HTMLGO
HTMLGO
2年前
4

sshでログインするのを楽にする

~/.ssh/config のファイルに以下のような設定をしておくと 「ssh hoge_prod」 とか 「ssh hoge_dev」 と打てば簡単にログイン出来て便利。 秘密鍵の場所やログイン時のカ…

HTMLGO
HTMLGO
3年前

Jest 入門

テストコードを書けるようにならないとなー、ということで入門。 機能がいっぱいありそうなので、とりあえず基本の部分だけ。 インストールnpm install --save-dev jest …

HTMLGO
HTMLGO
3年前
2

mac でローカルIPを調べる時に観やすくする

macでローカルIPを調べる時に、ターミナルで ifconfig と打つと、バーっと情報が出てしまうので、 本当に必要な ローカルIPだけを調べたい時は ipconfig getifaddr en0 …

HTMLGO
HTMLGO
3年前
1

Gitでファイルの大文字・小文字の変更を反映させる

サーバーAでは、問題ないのにデータをまるっとサーバーBに移行したら phpで requireさせているhogeファイルが無い と怒られてしまった。必要なファイル全てあげているの…

HTMLGO
HTMLGO
3年前

少しのお金と設定で劇的に作業効率をUPさせる（Mac）

GWは、作業効率向上週間(?)ということで、 アナログでやってしまっているめんどくさい操作をなるべく効率化させたいと思います。 (1).各ウィンドウのサイズをショートカッ…

HTMLGO
HTMLGO
3年前
3

React Hooks (useContext)

useContextを呼び出したコンポーネントで、上位のコンポーネントからコンテクストオブジェクトを受け取り、そのコンテクストの現在値を返す。 コンポーネントの階層や、pr…

HTMLGO
HTMLGO
3年前

React Hooks (useEffect)

コンポーネントに副作用を追加する。 副作用という言い方がわかりにくい。 例としてカウンターコンポーネントを作ってみる。（下の画像） カウントが２つあり、一つはク…

HTMLGO
HTMLGO
3年前

React Hooks (useState)

React HooksはReact 16.8から備わった機能。 色々便利な機能が備わっている。 useState は、SFCでも状態を持つことが出来るようになる。 今までのコンポーネント// Hoge.…

HTMLGO
HTMLGO
3年前

noteをはじめます

今まで、wordpress→はてなブログとほっそり技術ブログを書いていたのですが、最近noteがとても急成長していて、色々ワクワクする施策もやっているのでnoteを始めようと思…

HTMLGO
HTMLGO
4年前
2

土日

今週末は、 生活用品の買い足し 部屋の掃除 ジム（プール）、ランニング、懸垂 仕事＆プログラミングの勉強 買い物（ユニクロ） などやって、あとは好きなYoutubeを見て過ごした。 部屋の掃除は精神的にかなりいい。 徐々に調子が良くなりつつある。 Railsのお勉強が止まってるんだよね。。 月に３万払ってメンターについてもらっているので、 もったいない。 あと、英語もやりたいな〜。一人じゃ無理そうだから 週一で誰かに管理してほしい。 確定申告めっちゃめんどく

HTMLGO

久しぶりにしんどい

一昨年に体調を崩してしまい、 そこから環境を変えてなんとか持ち直したのだが、今週辺りからまたぶり返してしまった。 ここの所、2日間はずっと寝ていて、 今日はこれから病院に行く所だ。 去年末から、がっつり働いていたのと、 割と土日も勉強していて、ずっと気が張っていた。 年末年始は、あまり何もやる気が起きなくてわりとダラダラしていたので、リフレッシュ出来た気でいた。 ところが、先週の土日から、何か得体の知れない不安に襲われるようになってしまった。 本や動画をみても内容が

HTMLGO

指定ディレクトリへ移動するコマンドをaliasとしてセットするシェルスクリプトを書いた

今、シェルスクリプトを勉強中です。 ずっと手動でやっていて無駄だと思う作業を少しつづ自動化しています。 案件ごとに、いちいちプロジェクトディレクトリに移動するのが結構めんどくさかったので、以下のような設定をやっていました。 これをやっておけば、 ターミナルで、「hoge」と叩けば、指定ディレクトリに移動出来るます。 が、最初の設定作業をいちいち手動でやっていたため、 ちょっと面倒だったんですよね。。 # .zshrcalias hoge1='cd /Users/hoge

HTMLGO

githubリポジトリの一部のディレクトリだけダウンロードしたい

6月4日追記２ degitを使いやすくするシェルスクリプトを書いた。 6月4日追記 https://qiita.com/masakinihirota/items/418eec4422fd06690924 npm モジュールに便利そうなやつを発見した。 これを使おう。 結論: svnを使う 最初、え、、？と思ったんですが gitではそういう機能は無いらしい。 ライブラリやフレームワークなどのexamplesで、特定のディレクトリだけ落としてきてローカルで色々試した

HTMLGO

「Fetch API」についてまとめる

今まで、ajax通信にはHTTPクライアント「axios」を使っていたが 最近はIE11をサポートしなくて良くなってきたので、 ブラウザでnativeでサポートされているFetch APIを使うことが多くなってきた。 挙動にちょっと癖があるのもあり、この際 きちんと詳細まで理解しておこうと思ったのでそのまとめ。 Fetch API・(ネットワーク越しの通信を含む) リソース取得のためのインターフェースを提供。MLHttpRequestより簡単で便利 ・fetch() は

HTMLGO

sshでログインするのを楽にする

~/.ssh/config のファイルに以下のような設定をしておくと 「ssh hoge_prod」 とか 「ssh hoge_dev」 と打てば簡単にログイン出来て便利。 秘密鍵の場所やログイン時のカレントディレクトリを指定できる。 パスワードは設定できないので、入力が必要。 Host hoge_prod HostName prod.hoge.jp RemoteCommand cd /home/hoge/prod.hoge.jp/public_html; $SHELL

HTMLGO

Jest 入門

テストコードを書けるようにならないとなー、ということで入門。 機能がいっぱいありそうなので、とりあえず基本の部分だけ。 インストールnpm install --save-dev jest 実際のコード// sum.js ////////////////////const sum = (a,b) =>{ return a + b;}module.exports = sum;// sum.test.js ////////////////////const sum = r

HTMLGO

mac でローカルIPを調べる時に観やすくする

macでローカルIPを調べる時に、ターミナルで ifconfig と打つと、バーっと情報が出てしまうので、 本当に必要な ローカルIPだけを調べたい時は ipconfig getifaddr en0 と打つと、 xxx.xxx.xxx.xxx だけ返ってくるので便利。 (ipconfig と ifconfig が紛らわしい) alias ipcheck='ipconfig getifaddr en0' zshrcにエイリアスを貼っとくのがおすすめです。

HTMLGO

Gitでファイルの大文字・小文字の変更を反映させる

サーバーAでは、問題ないのにデータをまるっとサーバーBに移行したら phpで requireさせているhogeファイルが無い と怒られてしまった。必要なファイル全てあげているのになんで。。 と思っていたら そういえば、 以前ファイル名を大文字から小文字に変えたはずなのにgitに変更が反映されてない ということに気づく hogeHuga.php → hogehuga.php require_once('include/hogehuga.php'); // ファイルが無

HTMLGO

少しのお金と設定で劇的に作業効率をUPさせる（Mac）

GWは、作業効率向上週間(?)ということで、 アナログでやってしまっているめんどくさい操作をなるべく効率化させたいと思います。 (1).各ウィンドウのサイズをショートカットキーで変更するブラウザのサイズを左半分にして、右半分でExcel開いて、、 みたいのをドラッグして、わざわざ合わせてませんか？これ、地味にめんどくさいですよね。今まで何千時間この操作に使ってきただろう。 この操作をショートカットでいい感じにしてくれる、アプリがこちらです。 某Youtuberさんの紹介で

HTMLGO

React Hooks (useContext)

useContextを呼び出したコンポーネントで、上位のコンポーネントからコンテクストオブジェクトを受け取り、そのコンテクストの現在値を返す。 コンポーネントの階層や、propsが多くなると下層のコンポーネントと データのやりとりをバケツリレーのようにしなくてはならない。 これが大変面倒なので、そんな時に、useContextを使う。 React.createContextを生成→Context.Providerのvalueに値を渡す→ 下層のコンポーネント全てでコンテク

HTMLGO

React Hooks (useEffect)

コンポーネントに副作用を追加する。 副作用という言い方がわかりにくい。 例としてカウンターコンポーネントを作ってみる。（下の画像） カウントが２つあり、一つはクリックしたら増えるもの。 もう一つは一定時間で増えるもの（これはコンポーネントがアンマウントしたらタイマーも消す必要がある）。 今までのclassコンポーネントの場合import React from "react";class CountWrapper extends React.Component {cons

HTMLGO

React Hooks (useState)

React HooksはReact 16.8から備わった機能。 色々便利な機能が備わっている。 useState は、SFCでも状態を持つことが出来るようになる。 今までのコンポーネント// Hoge.jsximport React from "react";export default class Hoge extends React.Component { constructor(props) { super(props); this.state = {

HTMLGO

noteをはじめます

今まで、wordpress→はてなブログとほっそり技術ブログを書いていたのですが、最近noteがとても急成長していて、色々ワクワクする施策もやっているのでnoteを始めようと思います。デザイナーさんやエンジニアさんも結構やっている人が多いですよね。 技術以外のことも書いていこうと思うので、良かったら読んでもらえると幸いです。 続けられるか謎。

HTMLGO