パソコンの売り上げは減り続けているし、スマホやタブレットがあれば、立ったままでも仕事はできる。もはやスタバでドヤるまでもない。椅子に座り、机に向かって仕事をする人は、いまどき少数派なのかもしれない。 気がつけば「座って仕事をするのは身体に悪い」「立った方が効率良い」などと言われはじめ、スタンディングデスクなんてものも見かけるようになった。あんまり立て立て言われたせいで「立ち仕事はかえって身体に悪い」という説も見られるようになり、去年の暮れには、座って仕事しながら運動できる椅子が評判を集めた。なんだそれ、である。 立ったままでは疲れる、座りっぱなしでは運動不足になる。当たり前の話ではないか。大体、どっちも身体に悪かったら、人間どうすればいいのだ。そもそも立とうが座ろうが、仕事ばっかりしていたら身体がおかしくなるのは当たり前。適当に遊んで好きなことをする。それでみんな幸せになれる。それが許され
前回の記事から少し時間がたってしまったけど,Material-UI を使ったプロトタイプ開発を続けている.今回は GridList コンポーネントをサンプルコードを参考に実装しながら理解を深めていく.グリッドリストはフォトリストのようにコンテンツを並べる UI のことを言う.過去には List コンポーネントと Snackbars コンポーネントの記事を書いていて,コンポーネントの調査シリーズも定期的に書いていく. material-ui.com なお,実装したサンプルコードは GitHub に公開してある.TypeScript で create-react-app を実行してから実装を進めた.記事に載せるコードはポイントを限定し抜粋するため,実際にコード全体を見る場合は GitHub を参照して頂ければと! $ create-react-app sandbox-material-ui-g
2018年6月11日 ゲスト bagelee npmのpackage.jsonと依存関係を理解しよう!
公開日:2014年5月8日 入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。 JavaScriptで実現する方法もありますが、HTML5で導入されたplaceholder属性を使うとはるかに簡単に実現できますので、その方法をとることにします。 現在ではほとんどのブラウザがHTML5対応になっていますので、特殊な事情がない限りこの方法で構わないでしょう。 やり方は、以下の例のようにplaceholder属性で表示する文字列を指定するだけです。 <form action="" method="post"> <p><label>電話番号:<br><input type="tel" name="telNumber" placeholder=
ベルリン Buzzwords 2010で発表する開発者Shay Banon Elasticsearch(エラスティックサーチ)はLucene基盤の分散処理マルチテナント対応検索エンジンである。かつてはオープンソースソフトウェア(OSS)だったが、現在はプロプライエタリソフトウェアである。[要出典] 現在はオランダ・アムステルダムに本社を置くElastic社が中心になって開発が進められている[2]。なお「Elastic Search」といったように間に空白を入れる・「search」の頭を大文字にするといった表記は誤り(ただしVer.1.0.0リリース前にはそのような表記も混在していた)[3]。 全文検索に特化しており、他のソリューションと比較しても圧倒的な全文検索スピードと利便性を誇る[4]。Elasticsearchの内部ではApache Luceneが提供する超高速全文検索をフル活用して
MeCabはオープンソースの形態素解析エンジンで、奈良先端科学技術大学院大学出身、現GoogleソフトウェアエンジニアでGoogle 日本語入力開発者の一人である工藤拓[1][2]によって開発されている。名称は開発者の好物「和布蕪(めかぶ)」から取られた。 開発開始当初はChaSenを基にし、ChaSenTNGという名前で開発されていたが、現在はChaSenとは独立にスクラッチから開発されている。ChaSenに比べて解析精度は同程度で、解析速度は平均3-4倍速い。 品詞情報を利用した解析・推定を行うことができる。MeCabで利用できる辞書はいくつかあるが、ChaSenと同様にIPA品詞体系で構築されたIPADICが一般的に用いられている。 MeCabはGoogleが公開した大規模日本語n-gramデータの作成にも使用された[3]。 Mac OS X v10.5及びv10.6のSpotlig
結論から 公式の TypeScript ドキュメントの何処にも namespace を非推奨と示唆する記載は無い。 尚且つ microsoft/TypeScript#30994(comment) で TypeScript チームのリード開発者である Ryan Cavanaugh 氏が述べているように将来的に廃止される事も無い。 TypeScript の namespace について調べると公式では無い記事や投稿で非推奨(deprecated)というワードが目立つ事、tslint や typescript-eslint を使用していると namespace の使用で注意されてしまう事などから非推奨と認識されてしまっていると推測する。 個人的に「非推奨」という強いワードは「使用するな」というメッセージ性を感じる。開発者同士の間で誤解を生みかねないため namespace は非推奨では無いと伝え
APIのTypeScriptの型定義ファイル(foobar.d.tsなど)が提供されておらず、APIレスポンスをjson2tsなどにつっこんで型定義ファイルを得るということをよくやる json2ts - generate TypeScript interfaces from json こんな型定義が得られる declare module Kibela { export interface OutgoingWebhook { action: string; blog: Blog; resource_type: string; } export interface Blog { author: Author; boards: Board[];a content_html: string; content_md: string; id: string; title: string; url: s
はじめに テストって何? Jest Enzyme 環境構築 実際にテストしてみる Jestによるテストの書き方メモ テスト実行のながれ 子コンポーネントの存在を確認 setStateで値が更新されているか確認 子コンポーネントで受け取ったpropsがレンダリングされているか確認 モックを使ったテスト アラートのテスト 参考資料 はじめに 宮崎大学 Advent Calendar 2019の記事です。 qiita.com ソースコードはこちら。 github.com テストって何? プログラムの振る舞いを確認し品質を保証する目的で行う。 手動はつらいので、『こういう入力があったらこういう動作』をあらかじめ記述しテストフレームワークに任せる事で自動化する。 Jest Facebookが開発 JavaScriptのユニットテストツール __tests__フォルダ内のファイルまたは、ファイル名が◯
Reactの続きです。前回はreact-helmetでheadタグの中身を動的に打ち替えました。今回はHTMLのテキスト部分を外部JSONデータからJSXに読み込みます。インラインのタグを認識するためにdangerouslySetInnerHTMLを、JSX内でループするためにmap()を使いました。それではいきましょう! 【目次】 前回のおさらい JSONファイルを作成(テキスト部分) Appコンポーネントでheadタグのテキスト読み込み HeaderコンポーネントにJSONデータを読み込む FooterコンポーネントにJSONデータを読み込む MainコンポーネントにJSONデータを読み込む Innerコンポーネントを作成 MainコンポーネントでInnerコンポーネントを読み込み InnerコンポーネントにJSONデータを読み込む(map()でループ) おまけ:text型式だとインラ
TypeScriptでは変数宣言するときに、その変数にどんな値が代入可能かを指定できます。その指定のことを型注釈(type annotation; 型アノテーション)と言います。変数宣言の型注釈は、次のように変数名の右に型を書きます。
● TypeScript の Parameter 'xxx' implicitly has an 'any' type に対応する let user = Users.find(user => user.id === query); ↓ let user = Users.find((user: any) => user.id === query);
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、tsconfig.jsonでfile not foundエラーが発生する場合の対処方法を確認してみました。 さきに結論 not foundエラーとなっているファイルを一瞬そのパスに配置すれば、エラーが解消する場合があります。 環境 VS Code: 1.61.1 TypeScript: 3.9.10 事象 AWS CDK(TypeScript)アプリケーション環境で、tsconfig.jsonファイルがFile '(中略)/aws-cdk-app/sampleHandler.test.ts' not found.というエラーとなりました。 エラーが発生し始めたのは、sampleHandler.test.tsというファイルをアプリのルートパスからtest/配下に移動させた後からです。 下記はエラーとなったtsconfig.jsonで
【webpack】json-loaderで『Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = [{"...'』の解決方法JavaScriptJSONwebpackjson-loader
I create a ReactJS project with the create-react-app package and that worked well, but I cannot find webpack files and configurations. How does react-create-app work with webpack? Where are the webpack configuration files located in a default installation with create-react-app? I'm unable to find configuration files in my project's folders. I have not created an override config file. I can manage
Vimエディタの特徴の一つは範囲の指定が簡単で柔軟な点です。それは置換の時も同様です。他のエディタで指定の範囲のみ置換する選択肢がなくて困ったことがある方もいるのではないでしょうか。 この記事では、Vimエディタで範囲指定して文字を置換する方法について解説しています。 全体、行指定、範囲指定ぞれぞれの置換方法を紹介するので参考にしてください。Vimエディタのバージョンは8.1を利用しています。 ファイル全体を置換する方法「%s」の構文を利用することで、現在開いているファイル全体を置換することができます。 全体を置換(同一行の複数ヒットを含む) :%s/置換前文字列/置換後文字列/g複数ヒットしても全て置換するために最後に「g」を付けます。全体を置換(同一行の複数ヒットを含まない) :%s/置換前文字列/置換後文字列/上記のコマンドは、同一行で置換前文字列が複数ヒットした場合、最初にヒットし
はじめに こんにちは、Qiita開発チームの@ohakutsuです。 現在、QiitaのフロントエンドはReact + Atomic Designで実装されています。 Atomic Designの特徴として、再利用可能な単位で分割されたコンポーネントをつくる必要があります。 しかし、分割されたコンポーネントの数は日々大きくなっていってしまい、コンポーネントの管理が難しくなってしまいます。 そこで、Qiita開発チームでは、default exportを使い実装をしていたのをやめ、named exportを使い実装を行うようになりました。 今回は、Qiita開発チームがなぜdefault exportを使わなくなったのかについてお話します。 なぜ default export を使わなくなったのか Qiita開発チームがdefault exportを使わなくなった理由は、default ex
自動で型定義 typescript@^2.9.1(2018.5.31~)からはtsconfig.jsonでresolveJsonModuleとmoduleResolutionを設定すれば型の付いたJSONを直接インポートできるようになりました。
【2017年9月時点の情報で更新しました。】 Xamarin(ザマリンと読みます) とはなんぞや、個人開発者として使う時にどうなるの、的な事をさらっと書いてみようと思います。 Xamarin は 2016年2月、Microsoft に買収され、 Visual Studio に無償で同梱されることになりました。 【速報】Xamarin のこれからについて! - Xamarin 日本語情報 Xamarin が Microsoft に買収された結果 - Qiita Xamarin 自体は元企業名であり、その歴史は .NET の Linux 版を開発していた Ximian という企業が Novell に買収されて、その後レイオフされて作った企業で・・・した。 このあたりの歴史については @atsushieno さん や ちょまどさん のブログが(読み物としても)おもしろいです。 Microsoft
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
☞ React 一覧JSXJSXの記法条件分岐・ループ処理Design patternCompound ComponentOthersコンポーネントのレンダリング位置をずらすReact HooksReact Hooksとは?useEffectuseEffectのよく間違うポイントuseStateuseStateの注意点useMemouseCallbackuseReducerComponent関数コンポーネントを使うべき理由ReduxRedux の概念RefRefref forwardingServer ComponentReact Server Component Component の種類 React でコンポーネントを定義する際は大きく分けてクラスコンポーネント、関数コンポーネントの 2 つに分けることができます。 これらのコンポーネントについては、コンポーネントと props につい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く