技術

rubyで定数を扱うならfreezeメソッドを使うべき

tl;dr rubyでfreezeメソッドを使うとオブジェクトを変更不可な状態にできる 定数を扱う時はfreezeをつけておくといい rubyのfreezeメソッド rubyではfreezeと言うメソッドが定義されています ref.xaio.jp freezeメソッドを使うとオブジェクトを変更できない…

Javascriptで数字に直接ドットを繋げてメソッド書いちゃダメ

結論から言え! javascriptを書くときに 1.toString() {}.id はダメです、エラーになります 1..toString() ({}).id はOKです、上は "1"が、下はundifinedが返ります JSに限った話ではないかも 以下出来事と解説 {}.idってエラーになりませんか? 先輩のコー…

active recordのnew_record?とpersisted?の違い

tl;dr new_record?はobjectが保存されていないときだけtrueを返します persisted?はobjectが保存されていない、かつ今までに削除されていないときtrueを返します new_record? vs persisted? new_record? 最近Active Recordにnew_record?というmethodがあるこ…

chrome.runtimeのsendMessageとonMessageでハマった

contentとbackgroundの通信でハマった chrome拡張を開発していている中で content => background => native app => background => contentと通信を行おうとしていました コードはこんな感じです↓ // content.js document.addEventListener("fire", event => …

IAMの薄い本 備忘録 ~第5章から第10章~

最近AWS IAMのマニアックな話という本を読んだので理解の整理がてら感想を書いていきます 昨日の記事の続きです 読んだ本 Takuro SASAKIさんが書かれた同人本です 内容はその名の通りAWSの Identity and Management (IAM)についての本で 各用語の説明から設…

IAMの薄い本 備忘録 ~第1章から第4章~

最近AWS IAMのマニアックな話という本を読んだので理解の整理がてら感想を書いていきます 読んだ本 Takuro SASAKIさんが書かれた同人本です 内容はその名の通りAWSの Identity and Management (IAM)についての本で 各用語の説明から設定方法、実際に運用する…

PUTメソッドとPATCHメソッドの違い

PUTメソッドとPATCHメソッド railsで新しくリソース更新用のrouteを追加しようとしました put 'new-route/:id', action: 'new-action' が、エラーになってしまいました Routing Error No route matches [PATCH] '/new-route' あー、putメソッドじゃなくてpat…

content.jsとbackground.js

Chrome拡張についての話です chrome拡張を作ろうとする時には以下の3つのファイルが必要になります manifest.json content.js background.js まあ正確にはcontent.jsはなくてもいいこともあります manifest.jsonはchrome拡張についての設定ファイルです 残り…

flowの$PropertyTypeと$ElementTypeの違い

型定義したファイルをimportして使うときの話 $PropertyType JavaScriptでflowを使って型を定義する場合、 型の定義自体は別ファイルで行いそれをimportして使うことができます 例えばReactで本の情報を登録する画面を作ろうと思い、 本のid、タイトル、著者…

JavaScriptでObjectをaddしたい!appendしたい

jsでObjectに新しいkey, valueのセットを追加したい とおもったんですがobjectだとできないですよね 新しくキーとバリューを追加したい場合は以下のリンクのようにassignを使います developer.mozilla.org 具体的な使い方としては cosnt obj_A = {name: "tar…

Reactでinputタグの外でsubmitを行う

formの外でsubmitをしたい時ってありませんか? 例えばユーザーにECサイトのフォームに氏名や年齢、電話番号、クレジットカード番号を入力してもらい、 購入ボタンを押した時にモーダルで最後の確認を行う機能を実装するとします (画像は拾い物) モーダルの…

42Tokyoの入学テストを受けてみました

42が日本にやってきました!! エンジニア養成機関の42が2020年4月、ついに東京校をオープンします prtimes.jp 42Tokyoって? 42 Tokyo パリ発のエンジニア養成機関 42 Tokyo(フォーティーツー)は、フランス発のエンジニア養成機関です。 「挑戦したいすべ…

大量にstate定義するときに毎回useStateを使うと辛い

繰り返しけどReactでhooks使って書きたいよね Reactのversionが16.8以降ならHooksを使って書くことができますね (2回目) reactjs.org useStateはいい って話は昨日しました https://zwzw.hatenablog.com/entry/2019/11/24/175427?_ga=2.153461688.1824511460…

useStateでの型定義

tl;dr flowでuseStateで定義したstateに型をつけるにはこう書けばOKです // @flow const [name, setName] = useState(''); (name: string) Reactでhooks使って書きたいよね Reactのversionが16.8以降ならHooksを使って書くことができますね reactjs.org Reac…

AWS Hands-on for Beginnersで初めてのサーバレスアーキテクチャ

やったこと 最近公開されたAWS Hands-on for Beginners 〜Serverless 編〜を受講しました! ハンズオン資料 | AWS クラウドサービス活用資料集 何を作るの? Lambda + API Gateway + DynamoDB + Amazon translateで日本語を英語に自動翻訳するサービスを サ…

flowのSyntheticFocusEventにはtarget propertyはない

やりたかったこと ユーザーがフォームに入力をして、フォーカスが外れたタイミングで stateを更新するってのをhooksで書こうとしてました cosnt [state1, setState1] = useState<string>(''); function _onBlurHandler(event: SyntheticFocusEvent) { setState1(even</string>…

React.fragmentを省略する方法

<> ←これ Pull Requestのレビューをしていたらこんなコードにであいました <> <div> foo bar </div> <div> hogehoge fugafuga </div> <> ってなんだろって思って調べたところReact.fragmentの省略形だそうです The only difference is that older versions of the JSX Babel plugi…

AWS / インフラエンジニアのスキルアップとキャリア戦略に参加してきました!

参加したイベント これです 「インフラエンジニアのキャリア最前線」@AWS 〜アーキテクト、マネージャー、フリーランスが語る〜 - connpass 五反田バレーという一般社団法人と品川区が主催するエンジニア向けのイベントです AWS Loft Tokyoで開催されました …

railsでcssに書いたpathはapplication.css内で解釈される

imageが表示されなかった css内で .example { background-image: image-url("hogehoge.png") } とか書いていたら本番環境で画像が表示されなかった assetsの配信方法 ディレクトリ構成は↓みたいな感じ sample-app app assets stylesheet application.css . .…

JavaScriptのimportのpathでディレクトリを指定するとindex.jsを探しに行く

こないだhogehogeディレクトリ内のhogehoge.jsという名前のcomponentを予防としてました 構成はこんな感じ↓ component hogehoge hogehoge.js index.js このcomponentは他のreact componentからも呼び出されていて、他のcomponentから呼ばれた時は setStateが…

JavaScriptのアロー関数はthisをbindしてる

jsのアロー関数ってありますよね function() { hogehoge fugafuga } って書く関数を () => { hogehoge fugafuga } って書くことができます 僕これただ関数を短く書ける記法としか思ってなかったんですが違うんですね 呼び出されたスコープのthisをbindしてい…

JavaScriptは変数名を展開してkeyにできる

タイトルのまんまです jsでは変数名を展開してkeyにできる どいうことかというと const a = "key" let b = {} とある時に b[a] = "value" // b = {"key": "value"} とできる Reactでhandler書く時に handleChange = (e) => { this.setState({ [e.target.name…

JavaScriptのドット三つ three dots ...

JSの... js書いててたまにみるこれ→ ... こういうのググるときになんて調べたらいいのかわかんなくてよく困ってます 記号を検索に適応する方法を調べろって話なんだが 今回は 「javascripts three dots」とかで出ました 雑にめも 役割は二つ 引数で長さが不…