robotsによるアクセス制限

使ったことないし使う予定もないけど、いつか使うかもなのでメモしとく。

robots.txtによるアクセス制限

robots.txtをルートに配置。 すべてのクローラ対象にすべてのページをアクセス制限するなら以下みたい。

User-Agent: *
Disallow: /

メタタグによるアクセス制限

<meta name="robots" content="noindex">

これだけ見ると、インデックスさせないってだけでスクレイピング禁止にはできなそうだけどどうなんだろう。

2020/6/19(Fri) ToDo

今日やること

  • これ読む

www.amazon.co.jp

今日やったこと

  • 上記本読み終わった

所感

本から特に新しく得られるものはなかった。React未経験、Firebase未経験の方が、とりあえずReactやFirebaseがどんなものか触ってみたい、という目的であれば図が多くて読みやすいのでおすすめかもしれない。

【React Native】はじめてのiOSアプリ開発

主題の通り、はじめてのiOSアプリ開発をReact Nativeでやってみました。 その時の開発メモです。

同じくReact Nativeを触ってみたい方への参考になればと。
ちょこちょこcoffee break(短い休憩)と所感入れてます😉

環境構築

Mac前提で進めます。

1) Xcodeのインストール

App Storeからインストール
iOSシミュレータはXcodeでインストールできる模様。

2) nodeとwatchmanのインストール

nodeは元々入れてたからwatchmanだけ追加でインストールしました。

brew install watchman

coffee breakと所感

Xcodeのインストール時間かかりすぎる。。これ必要な機能だけ部分的にインストールとかできるんかな?

3) iOSシミュレータのインストール

Xcodeメニュー -> Xcode -> Prefenrences -> Componentsからインストール。
僕の使用しているiOSが13.5.1だったので、とりあえず一番上のiOS 13.4 Simulatorをインストールしてみる。

f:id:natech12:20200614122448p:plain
Xcodeメニュー -> Xcode -> Preferences -> Components

coffee breakと所感

やっとXcodeインストール終わったと思ったら、今度はiOSシミュレータのインストールに時間がかかる。もう飽きてきた←

4) cocoapodsのインストール

ライブラリ管理ツールぽい?要るんかな。

sudo gem install cocoapods

React Nativeプロジェクトの作成

以下のコマンドで作成。最後のパラメータは任意のプロジェクト名。

npx react-native init demo_react_native

ただ僕はintellij ideaで開発したかったので、上記コマンドは使わず、ideaからプロジェクト作成。 微妙にコマンドのときと生成ファイルが違ったので、コマンドでプロジェクト作成した方は、以降の内容で辻褄合わないことあるかも。
ただ大差はないと思うので、良い感じに読み替えて貰えればと。

とりあえず実行

プロジェクトができたのでとりあえず実行してみる。
コマンドは以下。

npx react-native run-ios

Xcodeどこで使うんだろ?って思ったけど、なるほどここでシミュレータの起動時に使われるのか。 ターミナルみると、xcodebuildってのも使われてビルドしてるっぽい?

f:id:natech12:20200614130446p:plain
初めての起動

主なコンポーネント

  • View:コンテナ
  • Text:pタグ相当
  • Image:画像表示用
  • ScrollView:スクロール可能なコンテナ
  • TextInput:テキストフィールド
  • FlatList:ScrollViewと違って、今表示しているリスト分のみをレンダリングする(らしい。後で試す。)
  • SectionList:セクションごとにリストを渡せる(セクションごとにヘッダつけるときとか)

TODO

続きはまた今度。

【JS】!!によるbooleanへの変換

割とよく使う。ライブラリ側で型チェックしててboolean以外のtruthy/falsyな値を渡すとwarningにされるときとか。

!!val

JSだと0とか''(空文字)がfalsyな値とされたり、逆にちゃんとした(?)値を持つ場合はtruthyに扱われる。これを、ひとつ目の!でまずboolean型に変換して、ふたつ目の!で元のtrue/falseの意味に変換するもの。

【JS】null, undefinedチェックについて

nullチェック、undefinedチェック、これらを両方書くのはしたくない。
↓こんなの。

if (val === null || val === undefined) {
}

でもこれらの値の違いを明確にして実装されているプロダクトもあまりない。

ので、一般的に===で厳密にチェックすることが望ましいが、空値のチェックに関しては、

if (val == null) {
}

と書くこともありかも。

およそ空値に使用されうる値についてのnullとの==結果は以下。
ちゃんと(?)undefinedのときだけtrueになってくれる。

console.log(null == undefined)  // true
console.log(null == 0)  // false
console.log(null == "0")  // false
console.log(null == false)  // false
console.log(null == "")  // false
console.log(null == {})  // false

【TypeScript】Getting Started

インストール

npm install -g typescript

Hello World

hello.ts

function hello() {
    return "Hello World";
}

console.log(hello());

コンパイル

tsc hello.ts

hello.jsが生成される

アノテーション

function hello(name: string) {
    return "Hello " + name;
}

console.log(hello('taro'));

以下だとコンパイルエラーとなる。

function hello(name: string) {
    return "Hello " + name;
}

console.log(hello(2));
error TS2345: Argument of type '2' is not assignable to parameter of type 'string'.

インタフェース

interface Person {
    name: string;
    age: number;
}

function hello(person: Person) {
    return `My Name is ${person.name}. I'm ${person.age} years old.`;
}

const taro = {name: "Taro", age: 18};

console.log(hello(taro));

クラス

コンストラクタの引数にpublicを付ければクラスプロパティにできる。

class Person {
    fullName: string;

    constructor(public firstName: string, lastName: string) {
        this.fullName = firstName + " " + lastName;
    }
}

function hello(person: Person) {
    return `Hello ${person.fullName}`;
}

const taro = new Person('Suzuki', 'Taro');

console.log(hello(taro));

型の種類

  • boolean
  • number
  • string
  • array(2通り)
    • number[]
    • Array<number>
  • [string, number]:タプル型(複数の型を含めた配列相当)
  • enum
    • `enum UserType {ADMIN, NORMAL}
  • any
  • void
  • object
  • undefined
  • null
  • never

アサーション

const anyVal: any = "sample";

console.log((<string>anyVal).length);
console.log((anyVal as string).length);