nikumaro2’s blog

webエンジニアです。HTML、CSS、Javascript、React.jsの開発についてまとめます。また、初心者英語TOEIC350点。音楽(ベース)、ゴルフなどもたまに、、

Simple Golf プライバシーポリシー

三者に個人を特定できる情報を提供することはありません。個人情報の管理には細心の注意を払い、以下に掲げた通りに扱います。

データ取得

このアプリのご利用に際して、端末の位置情報(GPS、ネットワークを利用した位置情報)を取得します。

利用目的

ご利用者の端末の位置をマップ上に重畳表示し、また距離を算出するために使用します。

変更

ご利用者情報の取得項目の変更や追加、利用目的の変更がある場合には、本プライバシーポリシーで更新し公開します。

同意

このアプリは、本プライバシーポリシーをご確認いただき、内容を理解したうえでご利用ください。

サポート

ご不明な点、問題点、アプリの不具合、改善ご要望などがあれば、以下にお気軽にお問い合わせください。

vi8an8yy@gmail.com
(bot対策のため@を全角にしているのでお気を付けください)

複数のasync awaitを呼ぶときの注意点

async await処理で、ハマったので備忘録としてメモしておきます。

以下のように連続でA()、B()を呼び出して処理をする。

    function() {
        A();
        B();  
    }


A()、B()では、関数の最初にasync awaitで同じ処理をする。

    A = async () => {
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
        console.log(status)
  ...
 
    B = async () => {
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
        console.log(status)
  ...
 



await処理は、戻り値がくるまで処理をストップすることができる処理だが、このようにA(),B()を使うと、A()のawait処理を実行すると、B()にも同じ処理があるので、B()のawait()に戻ってきてしまって、A()の処理がずっと止まったままになってしまう。

【オンライン英会話】DMM英会話 2000分までの軌跡

DMM英会話を始めて、受講2000分を超えたので、変わったことなどを書いてみます。

f:id:nikumaro2:20200205212615p:plain
2000分達成


DMM英会話は1回25分で、約6ヶ月続けたので、13回/月ぐらいのペースでした。 ちなみに、受講前の実力は、TOEIC350点でほぼ適当に塗りつぶす感じでした。


2000分で受講したレッスンは、ほとんど”会話”レッスンでした。 以下、会話レッスンの内容とメリット nikumaro2.hatenablog.com




0分~200分

 地獄の期間。最初の挨拶すらままならない。How are you?すら聞き取れなくて、チャットに書いてもらって、こんなのも聞き取れないのかとへこむ。
 初めての先生のときは最初にお互い自己紹介するが、自己紹介の英文は、事前に考えておいてそのテキストを見ながら頑張って話していた。
 先生の自己紹介は、read bookとか、watch TVとか、かろうじて単語が聞き取れるレベル。
 レッスンも、何を話しているのか分からないので、なんとなくyesと言ってしまって、分けわからずに進んでいく。もしくは、チャットに文を書いてもらって、みんな大好きGoogle翻訳へかけるくらいしかできない。
 色々焦って、終わるころには汗だくの期間。


200分~1000分

 自己紹介は、いつも同じ文を話すので、英文も覚えてスムーズに話せるようになってきた。
 挨拶は、だいたいHow are you?とか聞かれるので、”今日は仕事がハードだった”みたいなことをいつも言っていた。先生の話していることは、単語レベルでしか聞き取れない。
 レッスンに関して先生が言っていることは、いつも同じ流れなので、だいたい何を言っているか分かるようになってきた。例えば、2人の会話例文を交互に読むセクションでは、始まる前に”どっちが男の役をやる?”みたいなことを必ず聞かれるので、流れでだいたい分かる。
 また、先生の話すスピードが、速いときは、slowly pleaseみたいなことは言えるようになってきた。
 また、先生の質問の意味が理解できたときも、返答の英作文ができないので、言いたいことをGoogle翻訳で英文にしてそれを話す感じ。
 レッスンの後半に行くほど、ロールプレイングなど難しい内容になるので、ロールプレイングに行かないうちに25分たって終わってしまうように、最初の簡単なレッスンでわざと遅く読んだりしたりしていたw
 終わるころは汗ばむ程度。


1000分~1800分

 自己紹介は、いつも同じ文なのですらすら英文が出てくるようになってきた。
 挨拶は、先生によっては、日本のアニメの話などで盛り上がってレッスンが終わってしまうことがあった。(だいたい一方的に話すのを聞いている感じだが、、)
 レッスンは、発音などを質問できるようになったり、簡単な文ならGoogle翻訳を使わずに話せるようになってきた。
 英文を口に出して読むセクションでは、短い文はスムーズに読めるが、長い文や慣れない単語があると詰まってしまう。
 まだ、ロールプレイングは苦手。


1800分~2000分

 英文を口に出して読むセクションで、文の構造がなんとなく分かってきて、長い文章も先の単語を見てスムーズに話せるようになってきた。
 自分で発声できない文は聞き取れないらしいが、スムーズに読めるようになるとリスニングスキルも上がって聞き取れるようになってきた。
 たぶん文の構造がなんとなくわかるようになったから理解できる気がする。学校の授業でSVOなどが大事って言ってたのを思い出した。
 英作文(会話)は、I think~とか、What kind of~とか簡単な文は作れるが、ちょっと変わるとすぐで言葉が出てこない。話せる言葉のレパートリーを増やさないとダメだとと思う。
 

まとめ

2000分受講して、一番成長を実感したのは、英文をある程度スムーズに読める(音読)ようになったこと。
とそれに伴い、文の構造が理解でき、リスニングスキルが少し上がったこと。
次は、3000分を目指して、頑張ります。

TOEICもそろそろ受けようと思っているので、350点→○○点どのくらい上がっているのかブログに書く予定。
点数、上がらなかったら悲しい。。

【オンライン英会話】DMM英会話 初心者におすすめ レッスン教材(会話 Conversation)のすすめ

DMM英会話2000分を超えましたが、レッスン教材はいつも会話 Conversationを選択しています。


以下、レッスン教材一覧 https://eikaiwa.dmm.com/app/materials/en


TOEIC350点の私にとって、”会話”はレベルがちょうど良く、成長も感じられます。
そこで”会話”のメリットなどを紹介します。


ちなみに、以下、”会話”レッスンページ https://eikaiwa.dmm.com/app/lessons/conversation-now-youre-talking-how-was-your-trip/ULbqIB-GEeeWZpM7Ar8Bpg?category_id=4g-usmSuEeirTddASFJXxg&course_id=ajiBrJ7JEeiGc4ch7lQPWg


”会話”は以下のような構成になっています。各Exerciseは英文の下に日本語が書いてある。


Exercise 1 Vocabularyボキャブラリー

 先生が、単語→意味(英文)→例文 を発声してくれるので、リピートします。
 先生が、発音などを指摘してくれます。
 メリット:日常生活で使われるような簡単な英単語を覚えられる。


Exercise 2 Dialogue Practice会話

 男と女の会話例文があるので、どちらかの役になり、先生と交互に例文を読んでいきます。
 終わったら、男女を交代します。
 そのあと、その会話に対する簡単質問3つに回答します。
 例:What country did Matt go to? (マットはどこの国に行きましたか?) → He went to Spain.
 メリット:簡単な文を発声することができ、先生に発音を直してもらえます。自分が発声できない文は英会話を声に出して読みことは絶対聞き取れないらしいのでリスニングにも効果があります。また簡単な文を作る練習になります。


Exercise 3 Listening Comprehensionリスニング問題

 先生が1分ほどの簡単な文を読んでくれるので、そのあと4つの質問にAかBで答えます。もう一回読みか、スピードを遅くするかなどを先生が聞いてくれます。
 メリット:リスニング力の向上。自分にあったスピードで読んでくれるので良い。


Exercise 4 Role Playロールプレイ

 シチュエーションが与えられるので、役になりきって先生と会話します。ここが一番難しい。
   例:あなたが靴屋の店員になって、お客さんの要望を聞いてください
 メリット:実際の日常生活で必要な作文能力、リスニング能力が必要になります。私もまだ慣れなくて、聞き取れても、言葉がすぐ出てきません。先生も待ってくれるので、言いたいことをGoogle翻訳しましょう!


Exercise 5 Discussion議論

 いくつかの質問事項があるので、それに答えます。 
 メリット:英作文の練習になります。ここはレッスンが始まる前に言いたいことをなんとなく考えておくとスムーズにいきます。


まとめ


英単語が覚えられる。
英文を発声することでリスニング力向上。
簡単な英作文練習。
など日常英会話の基本を学べるのでお勧め。

DMM英会話は、最初は全然聞き取れなくて、つらいが、数回やると、レッスン教材の流れで進めてくれるので、英語が聞き取れなくても流れでなんとなく理解できるので、初心者でも大丈夫です。

react-native-mapsに重畳(overlay)する際にレイアウトが崩れる問題

react-native-mapsで、マップの上にボタンを重畳しようとして、ずっとレイアウトが崩れてしまう問題があったが、 重畳したい要素にflexを指定していたのが原因でした。

以下のように、closing tagにして、styleにabsoluteを指定することで解決しました。

render() {
  return (
    <MapView
      region={this.state.region}
    />
    <OverlayComponent
      style={{position: “absolute”, bottom: 50}}
    />
  );
}

以上、参考までに

【React Native】react-navigationの導入 (expo)

React Nativeプロジェクトにreact-navigationを導入しようとしたら、手こずったので、備忘録として。 今回は、expoを使う場合なので注意。

react-navigationを導入するには、以下をインストールする必要があるが、それぞれのバージョンが対応していないと、動かない。


それぞれ以下のバージョンでインストールすれば動作することが確認できた。

"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.1.0",
"react-native-screens": "1.0.0-alpha.22",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.2"

(package.jsonより)


それぞれは、npm install パッケージ名@バージョン でインストールできる。
もしくは、package.jsonを上記のように書き換えて、node_modulesとpackage-lock.jsonを削除して、npm install で一括でインストール できる。

以上、対応バージョンで困ったので、参考までに



ちなみに、expo、reactなどのバージョンは以下(ここのバージョンはそんなに気にしなくてもいいかも、一応記載)

"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",

【React】Reactプロジェクトで、個人的に使いたいライブラリまとめ

Reactで使いやすいライブラリを調べていたので、備忘録としてまとめます。
全体的に、学習コストが低く簡単にコードが書けそうなものを選んでいます。

レイアウト

  • emotion

    CSS-in-JSとして、学習コストが低く、簡単に使える

emotion – フレームワークに依存しない洗練された CSS-in-JS – PSYENCE:MEDIA


* BULMA

全体のデザインのためのCSSフレームワーク。フレキシブルデザイン(Flexbox)に対応しており。JSを内包せずCSSのみで比較的軽い。

CSSフレームワークのススメ - BULMAの導入と覚え書き - Qiita

electronで使っていて、良かったのですが、BULMAではreact-nativeでは、使えないかも、



状態管理

  • unstated

    Reduxが有名だが、学習コストが高い。unstatedは、簡潔にコードが書け、開発速度が速い。

【React】unstatedとunstated-nextの違い - nikumaro2’s blog



ナビゲータ

  • react-navigeter

    簡単にSPA開発が実現できる。

React Nativeでのルート管理ライブラリReact Navigationの使い方を整理。 | So Far, So Tech



まとめ

随時更新していきます。