最近reactのhooksが話題になっていますね。 そのhooksを利用した状態管理ライブラリを見つけました。 github.com easy-peasyの意味は、「とっても簡単」というらしいです！ 今回はこのライブラリを使用して簡単なgithubのリポジトリ検索機能を作成しようと思…
今回は分割代入でオブジェクトにある特定のキーの値を取得してくる方法を見ていきたいと思います。 経緯 reduxのコードを見ている時に分割代入をしているコードを見かけて挙動が気になった。 従来の方法と分割代入の比較 nameを取得する const person = { na…
今回はReactのライフサイクルやPureComponent辺りについて紹介したいと思います。 早速ですが、ライフサイクルはMounting、Updating、Unmounting、Error Handlingがあります。(今回の記事ではUnmountingとError Handlingについては紹介しません。) Mounting …
今回非同期処理とスコープの関係性について紹介したいと思います。 唐突ですが以下のコードをご覧になってください。 function countdown() { let i; for (i = 5; i >= 0; i--) { setTimeout(function() { console.log(i === 0 ? "GO!" : i); }, (5 - i) * 5…
今回はTypeScriptの型の互換性について取り上げます。 型の互換性・・・？？ 簡単に言うと例えば、ある型の変数であるHogeに、別の型であるFugaが代入できれば、型の互換性があると言えます。逆に代入できなければ型の互換性がないとなります。 この型の互換…
今回は言語において基本中の基本であるfor文について取り上げます。 for forというのはfor three daysなど期間を表す意味として使われます。 このようにfor文は決められた回数のなかで何か繰り返し処理を書きたい時に使います。これとは対照的なものとしてwh…
プロフィール画像をアップロードした時などプレビューできるできると便利ですよね？ 今日は簡易的なものですが、作っていきます。 こちらアップロードした後の画面です。 準備 必要なものはブラウザとエディタです。それだけ。 見た目を整える まずは、簡単…
JavaScriptにおけるシャローコピー(shallow copy)とディープコピー(deep copy)について簡単にまとめました。 shallowは日本語で「浅い」という意味になります。 シャローコピー シャローコピーはざっくり言うと参照元のオブジェクトとコピー先のオブジェクト…
タイトルにもあるように今回は、Nodemailerを使って手軽にgmailを送ってみます。railsには標準でActionMailerがあるのですが、nodeにも何か良いライブラリはないのかなーと調べたところありました。 Nodemailerについて nodemailer.com 環境 node v8.11.1 は…
今回はJavaScriptにおける演算子の中でもカンマ演算子を取り上げたいと思います。 カンマ演算子は、演算対象を左から右へ評価し、最後に評価した値を返します。 簡単な例を示します。 let name = "john", age = 35, personalInfo; personalInfo = (name, age…
今回はJavaScriptにおける真となる値、偽となる値について説明していきます。 偽とみなされる値 null undefined flase 0 NaN 空文字('') 上記の値以外は真となりますが、その中でも覚えておきたいものをピックアップしたいと思います。 真とみなされる値 オ…
今回はJavascriptのイベントフェーズについて説明していきたいと思います。 そもそもイベントにはどのようなものがあるのか？ イベントの種類 onClick・・・ボタンやリンクをクリックした時 onSubmit・・・フォームの送信ボタンをクリックした時 onKeyDown・…
最近写経をはじめました。 そこでの気づきや学びを備忘録としてここに残していきます。 おかしなところがあればご指摘ください。 写経する教材はこちらになります。 www.oreilly.co.jp 今回はJavaScriptのプリミティブ型とオブジェクト型についてです。 プリ…
最近、業務でreactを使用しています。 その中でredux周りのライブラリを使うことが多いです。そんなreduxと仲良くしたいと思い今回はcomposeがどんなことをしているのか見ていきたいと思います。 そもそもcomposeって？ composeは任意の数の関数を引数に受け…
ducksというデザインパターンを使用して簡単なTodoアプリを作成しようと思います。 機能としては以下になります。 タスクを追加できる タスクが終わったかどうかのラベルをつけることができる 環境構築 今回は自分みたいにブログの更新に時間がない方などが…
今回はz-indexで思い悩んでしまうことについて取り上げてみます。 この記事を書く前までz-indexを指定した値の大きな要素ほど前面に配置されると思っていました。 しかしこれは間違いでした。。。 z-indexのことを知らなすぎました。 それでは何を知らなかっ…
前回の記事でstorybookの簡単な使い方を学んだので、typescriptを導入すると共にstyled-componentsが提供しているThemeProviderを使ってみようと思います。 ThemeProviderをラップすることでどのコンポーネントからもThemeProviderが保持しているthemeにアク…
storybookの超基本的な使い方について紹介できればと思います。 今回はコマンド一つでreactの環境を構築できるお馴染みのcreate-reacta-appを使っていこうと思います。 インストールしていない方は事前にしておいてください。 環境構築 ではまずは以下のコマ…
昨日から自分が所属している会社のユニットメンバー5人日替わりで個人ブログを更新していこうという取り組みをしていくことになりました。 第一回の記事です。 ブログ続かないからちょっと始めてみた#はてなブログブログローテーションはじめてみた - ちゃな…
今回はRailsとVueを使用してファイルアップロード機能について作成したいと思います。 開発環境 vue：2.3.4 typescript：2.2.2 ruby：2.4.2 rails：5.2.0 投稿記事を例に説明していきます。 投稿用のテーブル作成 投稿のタイトル、本文、サムネイル画像用の…
今回もvue+railsのプロジェクトにおいて自分が実際にハマった？体験を記事にしていきます。 開発環境 vue：2.3.4 typescript：2.2.2 ruby：2.4.2 rails：5.2.0 やりたいこと railsで新規投稿ページや編集ページを作成する場合、よく利用される方法として標準…
今回はrailsのプロジェクトにおいてフロントにvue.jsを導入してみたことを記事にしてみました。具体的には下記のやりたいことに書いてあります。 開発環境 vue：2.3.4 typescript：2.2.2 ruby：2.4.2 rails：5.2.0 やりたいこと railsでjavascriptのフレーム…
最近業務でvueを触る機会が多いので備忘録として残します。 ここで記述しているvueのバージョンは2.5.16です。 v-onについて v-modelについて v-bindディレクティブについて イベント修飾子 親→子へ値を渡す方法 子→親へ何かをするとき v-onについて v-onデ…
今回はrubyのmoduleについて説明していこうと思います。 この記事を書こうと思った経緯としては、業務においてソースコードを読んでいる時にmoduleという単語が出てきたのでJavaScriptユーザーの自分としては何ぞや？となったからです。 moduleの役割として…
今回は前回の記事↓の続きとして、pug、sass、typescriptを導入しようと思います。 top-men.hatenablog.com それでは早速必要なパッケージをインストールします。 pugをインストール npm i -D pug sass関連のパッケージをインストール npm i -D node-sass sas…
Vueでの開発には欠かせない単一ファイルコンポーネント用の環境構築をしていきます。本当に最小構成になりますのでご了承ください。 vue-cliを使用すれば爆速で構築できると思うのですが、初心者であるからこそ環境構築の部分は時間をかけて理解していきたい…
今回は内部結合について紹介したいと思います。 そもそも内部結合とは、2つのテーブルを結合してデータを取得する手法のうち、指定したテーブルのカラムの値が一致するデータだけを取得する方法です。 内部結合をした結果を実際にブラウザに表示するところま…
Kotlinを触ってみようと思います。 今までフロントネタが多くを占めていたのですが、実際の業務でKotlinを使用することが増えることが予想されるので。 この記事では実際にKotlinの開発環境を準備して お馴染みのHello Worldを出力するところまでやっていこ…
JavaScriptで開発をしている時に、自分で作成したファイルやnodeモジュールなどを読み込む時にimportやrequireを使う時があると思います。 そういえばこの二つの違いってなんだろうと疑問に思ったのでその違いを探っていきたいと思います。 結論を先に述べる…
今回はReactとaxiosを使ってgithubのAPIからデータを取得しようと思います。 まず、初めにプロジェクトフォルダを作ってください。 作成後、プロジェクトフォルダに移動して以下のコマンドを実行してください。 create-react-app プロジェクト名 create-reac…
