styled-componentsを使いたいけれど使えないときに見る
気になる点がある場合はこちらを見るのは良さそう。
https://github.com/styled-components/awesome-styled-components#real-apps
styled-componentsを使っていて気になった点
- メディアクエリを区切る場所はどこにある？
- コンポーネントにメディアクエリをもたせるのはそれなりにできる
- レイアウトは別の場所にあるのか？
それを解消するために上のリンクを読む
技術書典ではじめて本を出した所感
技術書典7お疲れさまでした。今回初参加で初サークル参加をさせていただきました。技術書典のイベントは毎回、業務のタイミングと重なってしまい行けていなかったのですが今回は気合を入れて参加をさせていただきました。
日本PlayCanvasユーザ会というサークル名で参加をさせていただきました。このサークル自体は技術書典を申し込む際にサークルとして申込みをしたいなということでそのときにできたサークルとなります。現在参加者は10数名おりますが、本の執筆自体は1人で行いました。
当日どうだったか
想定よりは、売れたという感想をいだきました。当日の朝チェック数が39だったので、40冊程売れたら良いなと言う感覚で、販売に挑みました。
結果売れた数としては、電子書籍と紙の本を合わせると、34冊ほど売れたためチェック数には届かなかったがそれなりに売れたのではないかなと思っている。
思ったこと
もう少し目に止まりそう・多くの人が面白と思ってくれそうなタイトルで本を書い他方がもう少しチェック数が増え、最終的な販売数を伸ばせたのかなと思います。
PlayCanvasというまだあまり知名度がなく、注目があまりされていない技術を使う場合にはもう少し大きなバズワードに乗った本を出したほうが良さそうだなと思ったのが感想です。今回はPWAとHTML5ゲームの組み合わせであまり今までにない形式の体験が提供できる本を書いてみましたが、PWAというワードはPlayCanvasと組み合わせたらあまり強いワードでは無さそうでした。
加えて
本の執筆、ReView、GitbookやMarkdown、印刷所等今まで触ったことのなかった技術や体験をすることができたので結果的にはとても満足です。
プログラミングが分からなかったけれどJSONのパースをしたらちょっとだけプログラミングができるようになった
@yushimatenjinです。気がついたらPlayCanvasのオーガニゼーションアカウントに入っていました。Organizationに入ってからの記念すべき1回目の記事は、JSONのパースをしたらプログラミングが少しできるようになったという体験を書きたいと思います。
#### 何をやったのか
私自身プログラミングを初めたのは5年程前でまだまだ浅いですが、少しでも助けというか理解をはかどらせるものになればと思います。元々ネットワークなどに興味があり、UbuntuやCentOSなどは触っておりましたがプログラミングはあまりやったことがありませんでした。
おそらくはじめてプログラミングをして何かを作ったのがJSONをパースしたあたりなのかなと言うことでそちらを紹介します。
プログラミングを初めた経緯として元々、REST APIで作られていたAPIを叩いて色々と自動化をしたいというモチベーションが有りました。なんも分からなかったのでとりあえず、`PHP`を触り始めました。
この分厚いPHPの本をパラパラめくっていってサンプルのコードなどを動かしていったらちょっとづつできる事が増えてウェブサイトなどを作り始めました。
そこから本当に作りたかった`REST API`を叩きはじめました。
HTTPのリクエストの`GET`と`POST`の違い等初歩的なことが分からなかったので、`PHP`でとりあえずフォームを作って、HTML側がGETなら`PHP`で雰囲気で`$~~["GET"]`みたいなコードを書いていたと思います。
その後フォームに入力した`iTunes`の最新のランキングを`JSON`で取得できるということを知りそれをパースして表示するものを作りなんとなく連想配列とかの概念を理解していきました。
コマンドライン上で対話をする
Firebaseのような対話をする
promptという抽象化されたスクリプトがある
これは60行ほどのソースコードで{promptクラストpromptOnceというファンクションの2つをエクスポートしている
import しているライブラリは、inquirerとlodash
https://github.com/SBoudrias/Inquirer.js/
var choices = [
{
value: "database",
name: "Database: Deploy Firebase Realtime Database Rules",
checked: false,
},
{
value: "firestore",
name: "Firestore: Deploy rules and create indexes for Firestore",
checked: false,
},
{
value: "functions",
name: "Functions: Configure and deploy Cloud Functions",
checked: false,
},
{
value: "hosting",
name: "Hosting: Configure and deploy Firebase Hosting sites",
checked: false,
},
{
value: "storage",
name: "Storage: Deploy Cloud Storage security rules",
checked: false,
},
];
return prompt(setup, [
{
type: "checkbox",
name: "features",
message:
"Which Firebase CLI features do you want to set up for this folder? " +
"Press Space to select features, then Enter to confirm your choices.",
choices: choices,
},
]);
chocesとtype
Node.jsでcliツールを作る
Node.jsでcliツールを作る
Firebase initとかcreate-react-appとかめちゃくちゃ便利だなーと思ったのと、CLIツールってどうやって作られてるのか知らなかったため今日はcreate-react-appを参考にCLIで自分のやりたいことができるようになったのでその共有です。
create-react-appというReactの開発環境を一瞬で作れるCLIツールが有るのですがそちらのpackage.jsonを見てみます。
この中のパッケージを使うっているのかな
(puppeteerもあるんだけどこれどこで使ってるんだろう)
meowというcliのパッケージがあること
tempy
こはテスト用野ライブラリかな?
https://github.com/sindresorhus/tempy
https://github.com/marionebl/svg-term-cli
CLIの作成を助けているパッケージをっぽい
https://github.com/sindresorhus/meow
create-react-appの中身
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/init.js
react-dev-utilsというものがよく使われていて、基本的なCLIとのやり取りはここで行われていそう
react-dev-utilsはlernaでモノレポ管理されているみたい
CLIとのやり取りはこのcross-spawnでやり取りしてそう
遅かれながらReact Hooksを使い始めた。
ReactのHooksがReactのバージョン16.8から使えるようになりましたね.
巷ではもう常識レベルで使われているとのことを聞いたため、ReactのHooksを使い始めました.
30分前からHooksを使い始めたので至らないところもあると思いますが理解したことをまとめたいと思います.
基本的に得た情報はReactの公式ドキュメントを元に得たものなので詳しく知りたい方はこちら.
取り敢えずReactのHooksで一つコンポーネントを作ってみましたので. それを元に解説をしていきたいと思います.
こちらは公式のサンプルに少し手を加えたものです.
import React, { useState } from 'react';
import Layout from '../components/Layout'
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<Layout>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</Layout>
);
}
export default Example
こちらをブラウザ上に描画すると"You clicked 0 times"と表示されていることがわかります.
useStateの引数として0を与えているのですが、この0がuseStateを実行した際に帰ってくる配列の1番目の要素の中身となっております. setCountが新しい値を生み出すための関数となっており、コード上の setCount(count + 1)の部分となっております。
今回の例ではsetCountに1が入ることとなります。そして、useStateの返り値の2つ目の要素である. setCountが呼ばれると、その返り値を使用してこの関数が再描画されるようです.(まだReactのライフサイクルのうちどこが実行されるかは調べておりません）
ひとまず、Reactを今まで触っていた人が新たにHooksを使う上で抑える必要があることはこのあたりのことだと思います。
- useStateの返り値が配列となっており、要素の2つ目の実行結果によって再描画をする
これからuseEffectとは何かを使ってみたいと思います。
React NativeとTypeScript
TypeScriptとReact Nativeで新しいプロダクトを現在作っています。
その更新を”毎日"進捗を書いてければと思います。
