TOEIC試験までのカントダウンツイートを自動化
はじめに
エンジニアをやっていると、さまざまな試験を受験する機会があります（情報処理試験、TOEICなどなど）。試験日までの残り日数を気軽に確認したいなと思い、GitHub ActionsとTwitter APIを利用して、作成して見ました。
1. 作成物
https://github.com/wkamuy/tweet-countdown
2. 利用方法
.github/workflows/main.yml をお好きなように、編集し利用できます。
name: 'tweet-coutdown'
on:
schedule:
- cron: '30 22 * * *'
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: |
npm install && npm run build && npm run package
- uses: ./
with:
consumer_key: ${{ secrets.TWITTER_API_KEY }}
consumer_secret: ${{ secrets.TWITTER_API_SECRET_KEY }}
access_token_key: ${{ secrets.TWITTER_ACCESS_TOKEN }}
access_token_secret: ${{ secrets.TWITTER_ACCESS_TOKEN_SECRET }}
first_message: |
🕑 カウントダウン
📝 TOEIC試験 2021/02/28 まで
target_date: '2021/02/28'
last_message: |
あと少し頑張りましょう🙋🏻🙋🏻♀️
※毎日 7:30 に更新(Github Actionsより)
#TOEIC
#カウントダウン
#勉強
結果は以下の通り。
3. TOEICの結果
ちなみに、結果は 705点 でした。まあ700目標だからOKです。
4. Javascriptアクションのテンプレート
以下に、Javascriptのtemplateが用意されています。こちらをベースに作成しました。
https://github.com/actions/typescript-action
5. 所感
- アクションが時間通りに動かない。大体15分程度のラグがあるようです。
- 気軽に無料でお試しできます。
ReactコンポーネントのKey(キー)の付け方
はじめに
最近Reactを勉強し始めて、map()などのループでコンポーネントを作成するときに、Keyはどのように付けるべきなのか疑問に思い、調査したことをまとめて紹介します。
参考文献
この記事は以下の情報を参考に執筆しました。
インデックスをReactコンポーネントのKeyとして使用しない
配列のインデックスを、ReactコンポーネントのKeyとして使用しないでください。map()やイテレータやループを使用したときに、Keyとしてインデックスを利用するパターンはよく見られます。または、Math.random()などを利用して乱数を使用するのがおなじみのパターンではないでしょうか。
Keyの役割
- ReactはKeyを利用して、何をレンダリングまたは再レンダリングする必要があるかを決定します。つまり、Keyはコンポーネントの識別に利用されます。
- Reactは、レンダリングの時間を節約するため、重複したレンダリングなどをしないように動作します。そのため、２つの要素があり、それらが同じKeyを持っている場合、Reactはそれらを同じ物とみなし、一部の要素のレンダリングが省略される可能性があります。
- Reactは、コンテンツ自体が変更されていない場合でも、Keyが変更された要素を再レンダリングします。
- これが、Keyとしてインデックスを使用することが、良くない考えである主な理由です。
2について、例を出して説明します。例えば、現在読んでいる本の一覧を表示させるとします。以下のように、本の名前と著者の2つのキーバリューのペアを持つオブジェクトの配列を作成します。これらの本をレンダリングするもっとも簡単な方法は、map()を使用してそれを反復処理し、li要素を返すことです。またインデックスをKeyとして使ってみましょう。
import React from 'react'
// 本のリスト
let bookListData = [
{
title: 'The Hard Things About Hard Things',
author: 'Ben Horowitz'
}, {
title: 'Only the Paranoid Survive',
author: 'Andrew S. Grove'
}, {
title: 'Lean Startup',
author: 'Eric Ries'
}, {
title: 'Fullstack React',
author: 'Anthony Accomazzo'
}
]
// 本のリストを返す
const BookList = () => {
return(
<ul>
{
bookListData.map((book, index) => <li key={index}>{book.title} by {book.author}</li>)
}
</ul>
)
}
インデックスをKeyとして使用する際の問題
では、本の配列を変更するとどうなるでしょうか。例えば、新しい本を追加することにしましょう。確かに、Reactはリストを再レンダリングし、DOM構造を更新します。問題は、Reactがどれくらいの数の要素を更新するかということです。
// 配列の先頭に新しい本を追加します。
bookListData.unshift({
title: 'Elon Musk',
author: 'Ashlee Vance'
})
答えは、すべての要素です。追加した本が1冊だけで、前の4冊が同じであるかどうかは関係ありません。Reactが認識しているのは、特定のKeyを持つ4つの要素があり、それらのKeyがすべて変更されてることだけです。配列の先頭に、本を追加することで、すべての本のインデックスも変更されます。
再レンダリングについて上記で説明したように、Reactは、コンテンツ自体が変更されていない場合でも、Keyが変更された要素を再レンダリングします。新しい本を追加することで、他の本のインデックスも変更され、すべての要素の再レンダリングが起こりました。これらは必要だったのでしょうか？
答えはいいえです。Reactはすべての本を再レンダリングする必要はありませんでした。Reactは、元々あったDOM構造を使用して、1つの新しい要素、つまり1つの新しい本を追加するだけで済んだはずです。
また、Math.random()を利用すると同様の問題が発生します。新しい本を追加すると、再レンダリングが発生します。新しいレンダリングでは、random()メソッドもトリガーされ、新しいKeyが生成されます。それにより、すべての要素が再レンダリングされてしまうのです。
Keyのシンプルなルール
では、これらの問題を回避するために、どのようにルールでKeyを付与すればよいでしょうか。
- 要素のKeyは常に一意である必要があります。グローバルスコープやプロジェクトスコープで一意である必要はありません。兄弟の間だけでユニークである必要があります。
- 同じ要素のKeyは、ページの更新や要素の並べ替えなど、時間の経過とともに変化しないようにする必要があります。つまり、キーは不変で、定数である必要があります。
- これはインデックスの例で説明した、問題を回避するためのルールです。
- Keyは予測可能である必要があります。Keyがランダムに生成されないようにする必要があります。
これらの、シンプルで簡単なルールを覚えて、Keyを追加してみましょう。
import React from 'react'
// 本のリスト
let bookListData = [
{
title: 'The Hard Things About Hard Things',
author: 'Ben Horowitz',
isbn: '978-0547265452'
}, {
title: 'Only the Paranoid Survive',
author: 'Andrew S. Grove',
isbn: '978-0385483827'
}, {
title: 'Lean Startup',
author: 'Eric Ries',
isbn: '978-0307887894'
}, {
title: 'Fullstack React',
author: 'Anthony Accomazzo',
isbn: '978-0991344628'
}
]
// 配列の先頭に新しい本を追加する
bookListData.unshift({
title: 'Elon Musk',
author: 'Ashlee Vance',
isbn: '978-0062301239'
})
// 本のリストを返す
const BookList = () => {
return(
<ul>
{
bookListData.map(book => <li key={book.isbn}>{book.title} by {book.author}</li>)
}
</ul>
)
}
上記のように、isbnのような識別子を、Keyとして利用することですべての要素が再レンダリングされる問題を回避することができました。
英語弱者がTeamsで英語ミーティングするときに簡単かつ最低限できること
はじめに
エンジニアの皆さん、英語がそんなにできないのに、急にTeamsで英語ミーティングの司会、または参加を依頼された経験はありませんか？私はあります。そんなときに、簡単かつ最低限できることをご紹介します。
私の海外経歴
- TOEIC: 695点
- グローバル経験: 海外のエンジニアと英語メールのやり取りをたまにしたり、海外旅行に数回。
英語が得意なわけでもなく、めちゃめちゃ苦手意識があるわけでもない、よくいるエンジニアです。そんな私に、急に転機が訪れました。
上司「来週から、グローバルプロジェクトのプロマネやってくれないか？」 私 「英語もしゃべれないし、プロマネ自体もほとんど経験ないんですが。。。」 上司「とりあえず、Teamsのミーテイングのインビテーション送付しておいたから」 私 「わかりました、参加だけしてみます。」 上司「来週から、司会もお願いね」 私 「ファッ。。。。!?」
こんなことから、約半年のプロマネとミーティングを実施してきました。今も決して上手くできてはいないのですが、初心者なりにいくつかコツがあるので、ご紹介します。
注意：英語の表現も紹介しますが、正しくないものもあるかと思います。責任はとれませんが、私は使ってなんとか理解してくれていたので、紹介しています。
Teams編
ライブキャプションをONにする
この機能は、会話の内容を文字起こしして、Teamsの画面の下に表示してくれる機能です。まだ、英語しか表示できませんが、耳で聞き取れなくても、文章で理解できるのでかなり助けになります。設定方法は、公式サイトを御覧ください。
実際の会議で、司会をしている時は、ななかなか見る余裕はないですが、あるだけで心が安心します。 今後は、他の言語への展開や翻訳機能もリリース予定らしいので、期待したいですね。
設定方法：公式サイト-Teams会議でライブキャプションを使用する
チャットを利用する
どうしても聞き取れないときや、上手く伝えられないときは、チャットを利用しましょう。私の経験上、日本側から利用するというよりは、海外側が痺れを切らして、チャットを見てくれって言われるパターンが多かったです。
想定される会話
- I posted/sent the details in the chat. / チャットに詳細を投稿しました
- Could you confirm it? / 確認してもらえますか？
英語表現編
会議に人が集まり始めたときの挨拶
会議にパラパラ人が集まり始めたら、ちゃんと挨拶をしましょう。基本です。
- Hello everyone / 皆さんこんにちは
- Good morning/evening everyone / 皆さんこんにちは、こんばんは
音声と画面共有の確認
どの会議でも最初に音声や画面共有の確認があります
- Can you hear me? / 声聞こえますか？
- I can hear (clearly). / （クリアに）聞こえます
- Can you see my screen? / 私の画面が見えますか？
- I can see. / 見えます
- Not yet. / まだです
〜させてください
司会をしていると、~させてください を利用することが多々あります。本当は色々な表現を知るべきですが、私達には時間も余裕もないので Let me ~ を使いましょう。
- Let me share my screen / 画面を共有させてください。
- Let me consider within the Japanese team / 日本のチーム内で検討させてください。
- Let me consider once / 一度、確認させてください。
一緒に〜させてくださいの場合は、Let us ~ (Let's) が使えます。
- Let's proceed as planed / 計画どおり勧めましょう。
- 実際は遅延の場合のほうが多いですw
していただけますか？ ~してほしいです
ミーティングの中で、海外側への依頼をすることもあるでしょう。そんな時は、Could(Would) you 動詞の原型 を使いましょう。
- Could(Would) you (please) review our design? / 私達の設計をレビューしていただけますか？
- Could(Would) you (please) provide us the detail? / 詳細を教えていただけますか？
〜したいです
日本人は、意見を主張することが苦手と言われますが、PMをやる以上、自分の意見を伝える必要があります。そんな時は、I would like to 動詞の原型
- I would like to proceed as planned / 計画どおり進めたいです
- 何かが起こったんでしょうねｗ
- I would like to do these activities after business hours / 業務時間後にこれらの作業を実施したいです。
- 深夜コース確定です
心構え編
恥ずかしい
失敗するのが恥ずかしいと思うときは、これを思い出してください。
例えば、海外から日本に来た同僚がいます。その同僚は日本語が上手くありません。その同僚が頑張って日本語を話しています。あなたはその同僚に対して、どう思いますか？きっと、応援したり、なんとか聞き取ってあげようと思うのではないでしょうか？英語のネイティブも一緒です。私達の英語が上手くないことはわかっています（特に日本と仕事をしている方は）。恥ずかしいことなんてありません。一生懸命頑張る皆さんをみんな応援してます。私もです。
発音が下手なのが気になる
私もいろんな国の発音を聞いてきましたが、どの国も発音は違います。特にインドはとても聞き取りづらいです。でも彼らは、それを気にしているようには見えません。最低限伝わる発音はとても大切だと思います。でも完璧じゃないと、話してはいけないなんてことはありません。失敗もしますが、時間のない私たちはとりあえず伝われば良しとしましょう。
最後に
私くらいの英語力で苦労しているエンジニアはたくさんいると思い、記事を投稿しました。私の英語はまだまだです。一緒に英語頑張りましょうね!!
ReactコンポーネントをJestでスナップショットテストする
はじめに
最近Reactを勉強し始めた初心者です。今まで、バックエンドのユニットテストなどは書いたことがあるのですが、フロントエンドのテスト手法に、スナップショットテストというものがあると知り、作成してみました。また、今回は create-react-app を利用しているので、最初から使える Jest をテストフレームワークとして利用します。
1. 検証環境
2. スナップショットテストとは
スナップショットテストは、予期しないUIの変更を確認したいときに、有用なテストです。一般的には、UIコンポーネントをレンダリングし、そのスナップショットを取得して、以前、取得した参照用のスナップショットと比較します。２つのスナップショットが一致しない場合、テストが失敗するため、何らかの変更が起こったときに簡単に検知することができます。
また、スナップショットの生成物は、コードの変更と一緒にコミットし、コードレビューのプロセスの一部としてレビューするします。Jestは、以下のように、コードレビューで人間が読めるように、可読性の高い形でスナップショットが生成されます。
exports[`renders correctly 1`] = `
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
Facebook
</a>
`;
テストが失敗した場合（UIに変更が起こった場合）は、スナップショットの内容をレビューし、バグとして修正するか、実装された変更が正しいと判断し、スナップショットを更新する必要があります。
なんだか、今まで実装したことのある、ユニットテストとは少し感う印象です。
3. コンポーネントのスナップショットテストを作成する
3.1 フォルダ構成の決定
create-react-appを利用していれば、最初からJestは利用できるはずなので、フォルダ構成の決定から実施します。create-react-appでは、以下のパターンにマッチすると、テストコードとして認識します。
__tests__フォルダ内にある、.js/tsx拡張子のファイル.test.js/tsx拡張子のファイル.spec.js/tsx拡張子のファイル
今回は、scr/__tests__を作成して.test.tsx拡張子でテストコードを作成したいと思います。フォルダ階層は以下です。
src ├── __tests__ │ └── components │ └── molecules │ └── Copyright.test.tsx ├── components │ └── molecules │ └── Copyright.tsx
3.2 テスト対象のコンポーネントの説明
フッターにコピーライトの文字を返すコンポーネントです。UIフレームワークには、material-uiを利用してます。
import { FC } from 'react';
import Typography from '@material-ui/core/Typography';
type CopyrightProps = {
authorName: string;
};
const Copyright: FC<CopyrightProps> = ({ authorName }) => (
<Typography variant="body2" color="textSecondary" align="center">
{'© '}
{new Date().getFullYear()} {authorName}.
</Typography>
);
export default Copyright;
3.3 react-test-rendererのインストール
create-react-appを利用すると、jestは使えるのですが、react-test-rendererが入ってないので、インストールします。私はTypescriptを利用しているので、@types/react-test-renderer と ts-jest もインストールします。
yarn add --dev react-test-renderer yarn add --dev @types/react-test-renderer yarn add --dev ts-jest
3.4 テストコードの作成
以下のようにテストコードを作成しました。
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import Copyright from '../../../components/molecules/Copyright';
it('renders correctly', () => {
const tree = renderer.create(<Copyright authorName="test1" />).toJSON();
expect(tree).toMatchSnapshot();
});
3.5 テストの実行
以下のコマンドで、テストを実行してみましょう。
$ yarn test
PASS src/__tests__/components/molecules/Copyright.test.tsx
Copyright componet
✓ renders correctly (14 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 0.787 s, estimated 1 s
Ran all test suites related to changed files.
Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
無事テストが成功しました。テストを実行すると、テストファイルと同じ場所に、__snapshopts__/Copyright.test.tsx.snap というスナップショットが作成されました。内容は以下のようになっていました。
// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Copyright componet renders correctly 1`] = ` <p className="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter" > © 2021 test1 . </p> `;
テストが正しく動くかを検証するために、テストコードのpropsを変更してみます。
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import Copyright from '../../../components/molecules/Copyright';
describe('Copyright componet', () => {
it('renders correctly', () => {
const tree = renderer.create(<Copyright authorName="test2" />).toJSON();
expect(tree).toMatchSnapshot();
});
});
テストを再度実行すると、以下の様になりました。
$ yarn test
FAIL src/__tests__/components/molecules/Copyright.test.tsx
Copyright componet
✕ renders correctly (15 ms)
● Copyright componet › renders correctly
expect(received).toMatchSnapshot()
Snapshot name: `Copyright componet renders correctly 1`
- Snapshot - 1
+ Received + 1
@@ -2,8 +2,8 @@
className="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter"
>
©
2021
- test1
+ test2
.
</p>
6 | it('renders correctly', () => {
7 | const tree = renderer.create(<Copyright authorName="test2" />).toJSON();
> 8 | expect(tree).toMatchSnapshot();
| ^
9 | });
10 | });
11 |
at Object.<anonymous> (src/__tests__/components/molecules/Copyright.test.tsx:8:18)
› 1 snapshot failed.
Snapshot Summary
› 1 snapshot failed from 1 test suite. Inspect your code changes or press `u` to update them.
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 1 failed, 1 total
Time: 1.232 s
Ran all test suites related to changed files.
Watch Usage
› Press a to run all tests.
› Press f to run only failed tests.
› Press u to update failing snapshots.
› Press i to update failing snapshots interactively.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
ちゃんと差分が検知され、テストが失敗しました。この変更が、意図したものであれば、yarn test -u でスナップショットを更新し、バグであれば修正するという流れになります。
3.6 可変値に対応する
これで、テストは一旦完了ですが、一つだけ修正したい場所があります。このコンポーネントですが、new Date().getFullYear() を利用しており、翌年になると一切変更を指定なくてもテストが失敗します。このような、コンポーネント内にIDや日付などの可変値を含む際の対処を実施します。
以下のように、mockを利用し、Dateが固定値を返すように変更します。
describe('<Copyright />', () => {
it('should render correctly', () => {
const mockDate = new Date(2021, 1, 1);
const spy = jest
.spyOn(global, 'Date')
.mockImplementation(() => (mockDate as unknown) as string);
const tree = renderer.create(<Copyright authorName="wkamuy" />).toJSON();
expect(tree).toMatchSnapshot();
spy.mockRestore();
});
});
これで、テストは完了です。
4. プログラムソース
以下がプログラムソースです。
以下が実際のWEBページです
5. 所感
今回はスナップショットテストを作成しました。かなり手軽に作成できるので、UIのテストの一つとして導入するのは結構有用かなと思います。DOMの操作などもできるようなので、必要な部分は実装してみたいなと思います。
ファビコンの作成方法
はじめに
ポートフォリオを作成した際に、ファビコンも自作したので、その方法を紹介します。
注意：ドローソフトの使い方やデザインの方法論などは説明しておりません。
1. 検証環境
$ brew --version Homebrew 2.7.7 Homebrew/homebrew-core (git revision 200f4; last commit 2021-02-03) Homebrew/homebrew-cask (git revision 00135; last commit 2021-02-03)
2. ファビコンとは
ブックマークした時やタブ表示した際にWebページ名の横に並ぶ小さなアイコンがfavicon（ファビコン）です。サイトの識別やブランディングなどに効果があります。
3. ドローソフトのインストール
デザインを作成するための、ドローソフトをインストールします。今回は、Inkscapeを利用します。インストール方法は以下の過去記事を参照してください。
HomebrewでM1 MacにInkscapeをインストールする
4. デザインの作成
4.1 ドキュメントサイズの設定
まずは、ドローソフトを起動して、ドキュメントのサイズを設定しましょう。
以下のコマンドでドローソフトを立ち上げます
$ inkscape
以下のように、ウィンドウが表示されます。
左上のメニューバーで、[File] > [Document Properties] を選択します。
お好みのサイズを設定します。今回私は、100pt × 100pt にしました。
設定すると、以下のようにドキュメントサイズが変更されます。
4.2 デザインの作成
今回は、Inkscapeの詳しい使い方は説明しませんが、以下のようにお好きなデザインを作成してください。 以下のデザインは、5分くらいで適当に作成しましたｗ
あとは、左上のメニューバーで、 [File] > [Save As] を選択し、svgファイルとして保存します。
5. 各サイズのpngファイルの作成
svgファイルを元に、各種サイズのpngファイルを作成しましょう。ファビコンとして利用する、icoファイルですが、複数のサイズのpngを一つのファイルとしてまとめる事ができます。その元になるpngファイルを作成すると思ってください。今回作成する、pngファイルは以下の3つです。
- 16px × 16px
- 32px × 32px
- 48px × 48px
ターミナルを開き、以下のコマンドを実行します。
inkscape -w 16 -h 16 -e 16.png [元になるsvgファイル] inkscape -w 32 -h 32 -o 32.png [元になるsvgファイル] inkscape -w 48 -h 48 -o 48.png [元になるsvgファイル]
上記コマンドを実行すると、16/32/48.png の各サイズのファイルが生成されます。
6. pngファイルからicoファイルの生成
pngからicoファイルを作成します。GIMPやインターネット上のツールを使う事例をよく見かけますが、GIMPを入れるのが嫌で、インターネット上にアップロードするのも嫌だったので、imagemagickを使いました。
6.1 imagemagickのインストール
$ brew install imagemgick
6.2 pingファイルからicoファイルを生成
以下のコマンドを実行して、icoファイルが作成できます。
$ convert 16.png 32.png 48.png favicon.ico
念の為以下のコマンドで確認
$ identify favicon.ico favicon.ico[0] ICO 16x16 16x16+0+0 8-bit sRGB 0.000u 0:00.001 favicon.ico[1] ICO 32x32 32x32+0+0 8-bit sRGB 0.000u 0:00.001 favicon.ico[2] ICO 48x48 48x48+0+0 8-bit sRGB 15086B 0.000u 0:00.001
無事ファビコンが完成しました。
設定するとこんな感じ
HomebrewでM1 MacにInkscapeをインストールする
はじめに
先日購入した、M1 MacにHomebrewでIncscapeをインストールしたので、手順を紹介します。
1. 検証環境
$ brew --version Homebrew 2.7.7 Homebrew/homebrew-core (git revision 200f4; last commit 2021-02-03) Homebrew/homebrew-cask (git revision 00135; last commit 2021-02-03)
2. Inkscapeとは
ベクター画像を作成したり、編集することができるオープンソースのエディタです。Adobe Illustratorが一番近いツールだと思います。オープンソースですが、かなり高機能で、お金がない大学時代に使っていました（社会人の今も使おうとしているが笑）。また、M1チップだからなのかわかりませんが、かなりサクサク動いてます。詳細は、公式サイトを御覧ください。
3. インストール手順
3.1 Homebrewのアップデート
$ brew update
3.2 homebrew/caskリポジトリを追加
Inkscapeですが、homebrew/cask リポジトリにあるので、まずリポジトリを追加します。
$ brew tap homebrew/cask ==> Tapping homebrew/cask Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask'... remote: Enumerating objects: 7, done. remote: Counting objects: 100% (7/7), done. remote: Compressing objects: 100% (5/5), done. remote: Total 547893 (delta 2), reused 4 (delta 2), pack-reused 547886 Receiving objects: 100% (547893/547893), 240.49 MiB | 4.75 MiB/s, done. Resolving deltas: 100% (386975/386975), done. Tapped 3803 casks (3,924 files, 258MB).
3.3 Inkscapeのインストール
まずは、詳細の確認。記事投稿時のバージョンは 1.0.2 でした。
$ brew info inkscape inkscape: 1.0.2 https://inkscape.org/ Not installed From: https://github.com/Homebrew/homebrew-cask/blob/HEAD/Casks/inkscape.rb ==> Name Inkscape ==> Description Vector graphics editor ==> Artifacts Inkscape.app (App) /usr/local/Caskroom/inkscape/1.0.2/inkscape.wrapper.sh -> inkscape (Binary) ==> Analytics install: 1,998 (30 days), 5,754 (90 days), 26,371 (365 days)
以下のコマンドでインストール
$ brew install inkscape Updating Homebrew... ==> Auto-updated Homebrew! Updated 1 tap (homebrew/core). ==> Updated Formulae Updated 5 formulae. ==> Downloading https://media.inkscape.org/dl/resources/file/Inkscape-1.0.2.dmg ######################################################################## 100.0% ==> Installing Cask inkscape ==> Moving App 'Inkscape.app' to '/Applications/Inkscape.app' ==> Linking Binary 'inkscape.wrapper.sh' to '/usr/local/bin/inkscape' 🍺 inkscape was successfully installed!
インストール後の確認
$ inkscape --version
Inkscape 1.0.2 (e86c8708, 2021-01-15)
Pango version: 1.43.0
4. 起動
$ inkscape
以下の様に起動できれば、完了です。
Reactでポートフォリオ作ってみた 報告編 - 作品はまだないけれど -
はじめに
Reactを勉強し始めて、初めてサイトを作成したので公開してみました。
Note：技術的な解説はしてません。リクエストがあれば、解説しようかな？と思います。解説が必要なものがあれば、3. 使用した技術要素をベースにリクエストしてください！
1. 成果物
2. プログラムソース
WKAMUY.PAGE's GitHub Repository
3. 使用した技術要素
- 言語：Typescript
- Javascriptライブラリ：React
- State管理：Redux
- ルーティング：React Router
- UIフレームワーク：Material-ui
- Github Pagesへのデプロイ：gh-pages
4. 所感
今まで、JQueryでガチャガチャしてたんですが、改めてReactに入門して、とても便利だなと思いました。ただやっぱり、初期学習コストがかかる印象。ある程度、勉強したら手を動かして悩みながら学ぶのが良さそうですね。まだまだ、追加したい機能がたくさんあるので、少しずつ更新します!!
