技術系同人誌を書く人の味方「Re:VIEW Starter」の紹介 - Qiita
（追記 2019-08-18: この記事公開後の新機能を紹介する記事を書きました。こちらも見てください。） （追記 2019-12-27: その後の新機能を紹介する記事を書きました。こちらも見てください。） はじめに 技術書典を筆頭に、技術系同人誌のイベントが盛り上がっています。しかし技術系同人誌を書くのは、初めての人にとってはまだまだ敷居の高いことでしょう。 この記事では、初めて技術系同人誌を書く人のために「Re:VIEW Starter」というツールを紹介します。 Re:VIEW Starter (https://kauplan.org/reviewstarter/) Re:VIEW Starterの概要 「Re:VIEW Starter」とは、技術系同人誌を書くための書籍作成ツールです。 特に、初めて技術系同人誌を書く人がつまづかないように工夫されています。 もともと技術書典界隈では
React Native をプロダクションで使ってわかった良かった点・悪かった点 - Qiita
こんにちは、株式会社ピケ CTO の中西（@nakanishy）です。 Dish というランチ検索アプリのフロントエンドとデザインを担当しています。 Dish では、React Native を採用して iOS アプリの開発をしています。iOS アプリを正式にリリースしたことがなく、また React Native も初めてだったので、苦戦する場面も多々ありましたが、良かった点もたくさんありました。 この記事では、Web 開発者の視点で React Native の良かった点と悪かった点を紹介したいと思います。 React Native の良かった点 高速に開発できる React Native は、ライブリロードとホットリロードをデフォルトでサポートしているので、Web 開発をしているかの如く高速に開発が進められました。保存すると即座に変更が反映されます。また、ホットリロードの場合、状態を維
JavaScript でカスタム例外をしっかり使う
JavaScript には、そこかしこに罠がありますが、その中の1つはエラーハンドリングだと思います。 今回はエラーハンドリングにおいて、あまり活用されていない気がする、カスタム例外をしっかり使ってみたいと思います。 TL;DR necojackarc/extensible-custom-error を使うと、エラーオブジェクトも引数に取れる便利なカスタム例外が簡単に定義できるよ！ const ExtensibleCustomError = require('extensible-custom-error'); class MyError extends ExtensibleCustomError {} new MyError('message'); // メッセージ new MyError(error); // エラーオブジェクト new MyError('message', error
10万冊近いマンガのタイトルから巻数を取得する関数、巻数関数を作ったら思ったよりかなり大変だった話 - Qiita
マンガのタイトルから巻数を取得したい 自作サービスでマンガのタイトルから巻数を取りたくなった。マンガのタイトルで、巻数は何処に書いてあるか？例えば集英社の「HUNTER×HUNTER 1」。見ての通り最後に1と書いてある。つまりタイトルの最後に書かれている数字を取得すれば巻数が取れそうだ。ただし、出版社によってルールは若干違い、小学館は「名探偵コナン １」、講談社は「はじめの一歩（１）」、秋田書店は「ドカベン 第1巻」だ。 区切り文字の後の文字列から数字を抜き取ったものが巻数 ただ、巻数は何文字か分からない。それよりもタイトルと巻数の間に、空白や括弧のような区切り文字がある。出版社に合わせて、タイトルと巻数の区切り文字の後の文字列を取得すると、集英社と小学館は「1」、講談社は「１）」、秋田書店は「第1巻」という文字列が取れる。この文字列から正規表現などで数字だけを抜き取るようにすると無事タ
Firestore だけで Algolia を使わず全文検索 - Qiita
（この記事は先日2019年9月22日に開催された技術書典7にて頒布した『りあクト！ Firebaseで始めるサーバーレスReact開発』の「4-6. Firestore だけで全文検索を実現する」の内容を紹介したものです） やっぱりまだ Firestore で提供されない全文検索機能 昨日（2019年9月26日）、スペインのマドリードで開催された Firebase Summit 2019 ですが、新機能が大量にリリースされて開発者は嬉しい悲鳴を上げているようです。詳しくは公式ブログやセッションの動画を参照していただくとして、個人的には Firebase Extension に可能性を感じてて、分散カウンターや Firestore コレクションの BigQuery 同期が手軽に使えるようになったの嬉しいですね。これからめっちゃ活用していきたいです。 しかしそれでも今回も、Firestore
おまえはReact hooksを知っているか - Qiita
よく来たな。おれは毎日すごい量のコードを書いているが、誰にも読ませる気はない。しかし今回はReact hooks という真の男のためのAPIを発見したのでいてもたってもいられずQIITAに記事を書くことにした。 （この記事の文体は、逆噴射聡一郎先生のパロディです。） お前は毎日VUEだとかREACTだとかPWAだとかBBBFFだとかそういう流行に常に振り回されながらフロントエンドというメキシコを生きている。フロントエンドで生まれてくる技術のほとんどは、マッチの火より儚くすぐ消えてなくなるものだ。しかし、流行に乗り遅れるのを恐れているおまえはそういった技術にとびつき、チュートリアルをよみ、すべてを理解したと息巻いてプロダクトに導入し・・・やがてそれの流行がおわり・・・メンテをするのが辛くなり・・・しぬ。フロントエンド界隈ではへなちょこな技術がもてはやされ、しばらく経ってそれが全く使い物になら
やっていこう。PWA - Qiita
2015年にPWAが提唱されてから3年以上が過ぎました。 2015年6月に公開された「Progressive Web Apps: Escaping Tabs Without Losing Our Soul」に Progressive Web Apps の初期のコンセプトが書かれています。 記事中には、PWAによって「deliver an even better user experience (さらに優れたユーザーエクスペリエンスを実現)」 と書かれている通り、様々なWebの技術により、最近のWebサイトはとてもUXが良くなってきました。これもじっくりと期間をかけて、様々な技術者がPWAを取り組んでいっているからだと思います。 そして2015年11月に開催された「Chrome Dev Summit 2015」のキーノートで発表されてPWAは話題になりました。 この動きは今後も継続していくこ
量子コンピュータエンジニア始めて5年が経った - Qiita
はじめに もともとふつうのベンチャーでしたが、2014年に量子コンピュータにピボットしてからはすくすく会社が育ち、向いてることをするのは大事だなと感じてます。 Qiitaはポエムを書かないといけないらしい（多分）ので。おそらく日本初の量子コンピュータベンチャーとしてまず五年目までに気づいたことを書いてみます。 もともとはデザイン会社 もともとうちの会社はデザイン会社でした。出身が建築事務所だったので、そのまま2009年に独立してデザインをしてました。建築時代はphotoshop+autocadを使っていました。イラレはいまだに苦手です。 前の建築事務所は隈研吾建築事務所というところで、青山の美術館の設計や中国のアリババの社屋のコンペなどを主にしていました。 建築は当時CGパースも仕事がたくさんありましたので、CGのモデリングやレンダリングをやりながら当初は生計を立てていました。ただ、リーマ
State of SEO for SPA 2019 - Qiita
メタ この記事はNode学園2018にて話した内容を記事として編纂 +その後の変化を加筆修正したものです。 スライドはこちら。 https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b 追記 2019/5/8 遂に Google bot が扱うレンダリングエンジンが Chrome 最新版(現時点では 74)相当となりました！ https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html ただタイムアウトなどのリスクは依然存在するので、信頼性を求めるならやはり Dynamic Rendering や SSR が選択肢になるのかなと言う気はしますが、そこまで要求が強くない場合にはあまり頑張らなくてよ
esModuleInterop オプションの必要性について - Qiita
個人的にちょうど該当の問題を取り扱ったので、TypeScript 2.7.1 で導入された esModuleInterop オプションの役割と背景についてまとめておく。 なお、本来は export と import の両方に影響するオプションだが、この記事では外部の npm パッケージを import する状況のみを取り上げる。 TL;DR Node.js 環境で import/export を使う場合、 esModuleInterop オプションを積極的に有効にする。 関数や class を export するモジュールを import する場合、import * as _ from '_' のかわりに import _ = require('_') を使う。 モジュールの互換性 先にTypeScript の ES6 modules の解釈と allowSyntheticDefaultI
react-native-web を試す - Qiita
import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('App', () => App); AppRegistry.runApplication('App', { rootTag: document.getElementById('root') }); import React, { Component } from 'react'; import logo from './logo.svg'; import { Image, StyleSheet, Text, View } from 'react-native'; const Link = (props) => <Text {...props} accessibilityRole="link"
Visual Studio Live Share でリモートペアプロができるか試してみた - Qiita
経緯と背景 @oukayuka はフリーランスな React 専門のフロントエンドエンジニアです。 いま現在、グロービスでお仕事をしていてふだんは麹町のオフィスに通っているのですが、あるとき社員のみなさんが研修で2日間いなくなり、チームのフロントエンド要員の業務委託2人が取り残される形になりました。 ちょうど暑くなってきて出勤しんどいしいい機会なので、1日だけフルリモートで前々から気になってた Visual Studio Live Share（以降、Live Share）を使ってお仕事してみたいと提案したところ、許可されたのでやってみました。 なおふだんは当チームのフロントエンドエンジニアは4人（開発中盤まではほぼ私1人+αな感じでしたが）で、ペアプログラミングを基本とする開発を行っていて、ペアは随時組み替えています。顔を突き合わせて1枚の画面を2人で見ながらのペアプログラミングは全員が抵
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
TypeScript 2.9.1 変更点 - Qiita
こんにちはメルペイ社な@vvakameです。 TypeScript 2.9.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ！ この辺に僕が試した時のコードを投げてあります。 ちなみに、次のバージョンは2.10じゃなくて3.0らしいです。 変更点まとめ ファイル名のリネームのサポート Add 'renameFile' command to services ファイル名をリファクタリングできるようになった 選択範囲を別ファイルに切り出す操作のサポート Add 'move to new file' refactor 定義を別ファイルに切り出すリファクタリングができるようになった 使ってない定義があったら教えてくれるようになった Show unused declarations as suggestions --noUnu
prisma - 最速 GraphQL Server実装
react-apollo の調査で GraphQL サーバーをさっくり実装する必要があり、 今 graphqool どうなってるんだっけ、と見に行ったら prisma が推奨されていました。 日本語情報がまったくなかったので、調査した結果をまとめておきます。 prisma とはなにか GraphQL の形をした ORM MySQL/Postgre への マイグレーションヘルパー付き モデル定義からインデックス自動生成 CRUD自動生成 graphqoolの次期版? PaaS に依存せず、自分でデプロイ可能なマイクロサービス 自分も最初よくわからなかったのですが、 使ってみた感じでは、 GraphQL の形をとった ORM + Migration Helper です。 $ npm i -g prisma $ prisma init my-graphql-server # REPL で実装を選
[React Native事始め完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 - Qiita
[React Native入門完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 この記事で説明する事 React Native採用に係る意思決定の話 atom + eslint + flowによるIDE風開発環境 line by lineによるプロジェクト作成方法とリリース方法 デバッグ方法やtips集、補助ツールの使い方 React Nativeとは Facebookがオープソースとして開発するReact.jsの思想の一つである「Learn once, Write everywhere」（元ネタはもちろんJavaのWrite once, Run anywhere）を体現した、Facebookが開発主体となるプロジェクトの一つで、要はJavascriptとReactフレームワーク1つでモバイルアプリ（iosとAndroid）を作れる、といった代物です
![[React Native事始め完全版]「いきなりデート」のアプリをReact Nativeで開発した知見をまとめます。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd8432893c7bb0d7c1100348e2d1c5ff6bb8ae41/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCUmVhY3QlMjBOYXRpdmUlRTUlODUlQTUlRTklOTYlODAlRTUlQUUlOEMlRTUlODUlQTglRTclODklODglNUQlRTMlODAlOEMlRTMlODElODQlRTMlODElOEQlRTMlODElQUElRTMlODIlOEElRTMlODMlODclRTMlODMlQkMlRTMlODMlODglRTMlODAlOEQlRTMlODElQUUlRTMlODIlQTIlRTMlODMlOTclRTMlODMlQUElRTMlODIlOTJSZWFjdCUyME5hdGl2ZSVFMyU4MSVBNyVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSU5NyVFMyU4MSU5RiVFNyU5RiVBNSVFOCVBNiU4QiVFMyU4MiU5MiVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSVFMyU4MSVCRSVFMyU4MSU5OSVFMyU4MCU4MiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Yzg4Nzg0NmQwM2I0NmE0OWI1YjljZDQ5N2UwMGNjZTY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZ29nb3RhbmFrYSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NjRiZDU0YWRmMDJhMWI2NmFhYzE4OTBlOThkNDY5MWM%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dda33fbe74e8524cb2321b6da1f8834d5)
アクセス解析担当が必ずやってるGoogleAnalytics設定のまとめ【2018年版】 - Qiita
この記事について 「GoogleAnalyticsの設定、どうしたらいいんだっけ...」と迷ったときのためのレファレンスです。 新規のサイトを立ち上げる時・GAの再設計がしたくなった時に参照してください。 のちのちアクセス解析しつつ改善していくために、できるだけ汎用的にデータを拾っておく 可能な限り、非コーダーができる作業で完結させる というのをテーマにまとめました。 STEP 0: GTM・GAのアカウントを取得 Googleのアカウントがあれば、驚くほど簡単に取得できます。 GoogleAnalyticsのアカウントを作る GoogleTagManagerのアカウントを作る 基本的には、GoogleTagManager（以下、GTM）経由でGoogleAnalytics（以下、GA）を導入します。GTMの使い勝手がよいのはもちろん、GAをカスタマイズしたくなったときに、コーダーの手を借
設定ファイル不要！webpack 4 でReactをビルドしてみた - Qiita
React #1 Advent Calendar 2017 2日目の記事です。 もう2018年になって一月経ちましたが空いていたので埋めます。 webpack 4 のbeta版が2018/01/25 JSTにプレリリースされました。 おそらく2月か3月中には正式リリースされるでしょう。 (追記 2/25) 正式リリースされました 正式版でもこの記事の内容に問題が無いことを確認しました。 https://github.com/webpack/webpack/releases/tag/v4.0.0 今回のwebpackは変更点が多く、速度改善もされているようです。 また設定ファイルも不要となり、webpack.config.js書くのが嫌な方には朗報です。 この記事では設定ファイル無しでビルドするところまで簡単な例を用いて紹介いたします。 webpack 4について 今回はReactのビルドに
初めてフリーランスになる時の指標 - Qiita
はじめに 初めてフリーランスを行う人は指標がない状態だと思う。 ここに僕が経験した内容を元にした指標を書いておくので、よければ参考にどうぞ。 当記事はツテは無いが会社員をやめて稼ぎたいというIT系の人向けです。 志があってフリーランスになりたい方向けの指標ではありません。 仕事の見つけかた 仕事の見つけ方は結構簡単です。 【[プログラムや技術名] 案件 フリーランス】などのようなキーワードでgoogle検索をすればすぐに案件を紹介してくれるエージェントが見つかります。 特に今は技術者不足なので妥協すれば仕事はすぐに見つかるでしょう。 初めて仕事を請けるときは、どこまで妥協すれば良いかわからないと思うので当記事を参考にしてください。 報酬額の目安 プログラマーの報酬額の目安は70万円/月になります。 70万/月以上の報酬があれば多い方だと思って良いでしょう。 少なくても50万円/月の報酬がも
「Front-end Developer Handbook 2018」2018年の予測について翻訳 - Qiita
そもそも「Front-end Developer Handbook」とは 概要 原文はこちら。 何が書いてあるの？ フロントエンドエンジニアに関わる技術やトレンドを幅広く記載している。各技術について深くは解説していないが、全体が1冊の本にまとまっている。 PDFでダウンロードしたり、Webブラウザ版をオンラインで読むことも可能。 誰が書いたの？ 「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」（O'Reilly）や「jQuery Cookbook」（O'Reilly）、「JavaScript Enlightenment」（O'Reilly）などを執筆したCody Lindley氏。 参考：https://github.com/codylindley どこにあるの？ GitBookで公開されている。 GitBookとは、GitHubのコードを公開するサービスのよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
