Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための
日本一マクドナルドから遠い場所 - Qiita
きっかけ 日本マクドナルド様のサイトの店舗検索の地図をみてたら、やたらたくさんの店舗が一度に表示できる。 これって全店舗一度に読み込んでるのかな、とChromeのデベロッパーツールで覗いてみると、全店舗分のJSONが見えた。 全店舗2887件。 ちょっと拝借して長年の疑問を晴らしてみようと思った。『はたして、日本で一番マクドナルドから遠い場所はどこなのか？』 注) 離島は除きます。離島を含めると南鳥島がぶっちぎりです。 Fusion Tablesでプロットしてみる Fusion Tablesに緯度経度をインポートすることでマップに位置をプロットできるのでやってみた。 Fusion Tablesの導入その他に関しては他に説明を譲ります。 とりあえずデベロッパーツールからJSONを丸ごとコピペして編集の末にCSVファイルをでっちあげた。 Fusion Tablesで扱えるように、先頭行にはカラ
個人開発ならHerokuよりDokkuを使おう - Qiita
皆さん個人開発してますか？ 個人開発の時にせっかく作ったならリリースして誰かに見てもらいたい・使ってもらいたいですよね。でもあまりお金はかけられない。 静的サイトならgithub.ioやfirebase hostingがありますが、Webアプリケーションだと使えません。 ちょっと前まではHerokuがデファクトな選択肢でしたが、スリープしたりで不便だったりします。 そんな方にDokkuがオススメです。 DokkuはOSSのPaaSで、シェルスクリプトを実行するだけでインストールができるHerokuライクなアプリケーションです。 自分はVultrという激安VPSにインストールしています。 実際どうなのか？ インストール方法や基本操作等は以下が参考になるので割愛します。 Getting Started with Dokku DockerでミニHeroku！「Dokku」をさくらのクラウドで試す
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp
コードレビューの極意。それは「自分のことは棚に上げる」こと！！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに：コードを良くするためなら遠慮は不要 昨日Twitterに投稿した内容が思った以上に拡散されていたので、タイムラインに流れてしまわないようにQiitaにも書いておきます。 内容は上に書いてあるとおりです。 コードレビューはコードの問題点を指摘し、そのコードを良くすることが第一の目的です。 そのため、少しでもおかしいと思った部分は遠慮せずにどんどんツッコむ必要があります。 しかし、レビューする側が「これ、自分もあまりできてないんだよなあ」「お前もできてないじゃん！って言われたら返す言葉もないし・・・」などと思って遠慮してしまうと、
JavaプログラマのためのKotlin入門 - Qiita
Kotlin が Android の公式言語になることが Goole I/O 2017 で発表されました。 Java プログラマが Kotlin を始めることがこれから多くなると思うので、 Kotlin をスムーズに始められるように次の 3 点についてまとめます。 Javaとほぼ同じところ 新しい考え方が必要でつまづきがちなところ Kotlinならではの便利なこと すべてを一つの投稿にすると長くなるので連載形式とし、本投稿では最初の「Javaと同じところ」について説明します。 Kotlinって何？ 本題の前に、 Kotlin について簡単に説明します。 まずは↓の Android のコードを見て下さい。これは Android Studio が生成するテンプレートの Kotlin 版です。 Android アプリ開発者であれば、初見でも概ね何をしているのかわかると思います。 class Ma
Mastodon インスタンスのリモートフォローの仕組みと必要な購読更新の設定方法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? [追記]Mastodon バージョン1.3.3がリリースされて、このページに書いている不具合は解決されて、今後は発生しなさそうです。このページも御役御免ということですね。問題にハマってる人は1.3.3にアップデートしましょう。 Mastodon のインスタンス運営をする上で、v1.3.2以下の Mastodon の設定が悪いとリモートフォローのユーザーの投稿がある日突然見えなくなることがあります。逆に相手サーバーの設定が悪いとせっかくリモートフォローしてくれたユーザーの投稿が届かなくなります。原因はいくつかあって、主に 受信側の購読の更
Mastodon のインスタンス作成時につまづいたところメモ - Qiita
Mastodon は自分用のインスタンスを作成してこそ華。と思ってローカルの VM で動かしてみたり、www.mofgao.space を立ててみたりしていました。 インスタンス構築の記事はもういっぱいあってそれらを参照して貰うとして、つまづいたところだけをメモ程度に書き残しておきます。 #対象 2017年 4月15日時点での git repository main。（メール周りは 4月13日に試行錯誤していたもの） 開発の方もすごい勢いで進んでいるので 3日後くらいには別物になっているかもしれません。 この記事に書いてあることが通用するとは限りません。 #基本方針 Mastodon のリポジトリに含まれている docker-compose & Dockerfile を使って、Docker コンテナで動作させます。 Docker だからコマンドポンで動くんだろと思っていたら意外とつまづいた
筋トレを継続する技術 - Qiita
筋肉 Advent Calendar 201611日目の記事です。 やってみたいと思う人が10万人いて、やってみる人が1000人いて、諦めずに継続する人が10人いる。こう考えると案外ライバルって少ないだろ？10万人見て競争にビビるな。先ずやれ。そして継続しろ。行動に移せる事、継続できる事は立派な才能だ。人生一度きりだ。縮こまってないで派手に行け。 — Testosterone (@badassceo) 2016年12月6日 という訳で、筋トレをはじめて2年ちょっと、その間に継続・習慣化するためにやってきたことを書く。 自宅でやる 「着替えるの面倒」とか「雨降ってるし、、」とか、そういう影響を受けないようにする。 そもそも人見知りのひきこもりおじさんにジム通いとか無理。 準備運動 トレーニング前に必ず準備運動をやる。 気分が乗らないときも、とりあえず準備運動をやる。 準備運動やったあとに「と
Redmineを3年間使い続けてお世話になったプラグインたち - Qiita
TOPIC Redmineを3年間使い続けてお世話になったプラグインたち（全部、無償版） ＜書かないこと＞ Redmineの操作説明（インストール、操作方法など） プラグインの操作説明（インストール、操作方法など） ＜補足＞ 利用当時（2016年夏頃まで）の状況によるものとなりますので、最新の情報については要再確認となります。（当時はなかったものが今はあるかもしれないし、逆も然り） ※ 私が使っていたRedmineは、【Bitnami Redmine 3.1.1-1】となります。 （これまでのRedmine：2.3 → 2.6 → 3.1） ※以下、1つずつピックアップしていきます。 clipboard_image_paste（Attach image from clipboard） https://github.com/peclik/clipboard_image_paste 使用頻度：
技術的負債とどうやって戦うか - Qiita
プロジェクトが進行するにつれて増える『負債』 長いプロジェクトに携わっていると、技術的負債をいつ返すのかが課題になってきます。 リファクタリングはいつの時点でやるのか、これは長いプロジェクトを運用していく上で問題になっていきますが、今回は負債の種類を整理し、それぞれどう対応をしていけばよいかを考えていきたいと思います。 私達の開発では常に時間が足りない 最近読んだ、「アジャイルサムライ」という本には下記のようなことが書いてありました。 (開発における)3つの真実 プロジェクト開始時点にすべての要求をあつめることは出来ない 集めたところで要求はどれも必ずと言っていいほど変わる やるべきことはいつだって与えられた時間と資金よりも多い 以上のことからわかるように、私達の開発には時間が無いということが常だということがわかります。実際、技術的負債が多いプロジェクトほどこの傾向が強いのではないでしょう
語彙力診断の点数分布 - Qiita
語彙力診断 2016年8月18日，とある診断がバズりました． ハッシュタグ検索 #私の語彙力は この診断は50問の類義語/対義語に関する4択問題に答えると点数化され，分布のどの辺にいるのかを教えてくれます． しかし，Twitterで該当ハッシュタグ#私の語彙力はを検索…するまでもなくこの点数が"上位0.43%"でないことくらい感覚的に分かります． なので点数分布を取ってみました． そもそもこんな診断は信憑性のかけらもないよとか言わない． 検索・分布の描画 Twitter APIを使ったプログラムを組むのはほぼ初めてなので，以下 Python で Twitter から情報収集 (Twitter API 編) をベースにして組みました． 変更点は点数の取得とヒストグラムの描画と検索件数の変更です． if point <= 36600としてるのはネタでめちゃめちゃデカい点数に改変してツイートする
JavaScript の ジェネレータ を極める！ - Qiita
ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！ ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める！（この記事） また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ジェネレータ、ジェ
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
とりあえずLINE BOT APIでオウムを作ってみた - Qiita
LINEBOT API公開記念でただ同じ事を返すだけのボットを作ってみた。 アカウントや設定とかは、 https://developers.line.me から適当にやってください。 まず最初にハマるところは、Callback URLです。どうやらポート番号も必要なので、https://example.com:443/callbackなどのように443を指定してください。 LINE_CHANNEL_ID, LINE_CHANNEL_SECRET, LINE_CHANNEL_MIDは適当な物を指定して下記を実行すると「オウム返しBot」の出来上がり。 APIを呼ぶにはWhitelistにIPを登録する必要があるので、Herokuなどで動かす事はできません。 【追記】 LINE BOT をとりあえずタダで Heroku で動かすを見ると、Fixieっていうアドオンを使えばHerokuでも行ける
javascriptを使ったSEO対策まとめ - Qiita
一昔前まではjavascriptを使ったSEOに弱いというのがあったりしましたが、今ではGooglebotが大分賢くなりjavascriptを実行できるようになってきてます。 とはいえ何も考えなくてもいいかというとそうでもないので、javascriptを使った場合にSEO対策として意識しないといけないことをまとめてみました。 いろいろ書きましたが、 Hisory APIを使ってURLをきちんと書き換えよう っていうのが主です。(pjaxと呼ばれている手法です） クリックやスクロールでDOMを生成するコンテンツはインデックスされない ページロード時点ではhtml内に生成されていないが、あるイベントが起きた時にDOM要素を生成するパターン。 Qiitaで言うとTOPページ下部にある「もっと見る」とかがそうですね。 Googlebotはjavascriptを実行することはできるのですが、clic
初心者がAWSでミスって不正利用されて$6,000請求、泣きそうになったお話。 - Qiita
こんにちは、2015年も終わりですね。昨年よりエンジニアのお仕事をはじめております自称エンジニアの@mochizukikotaroです。 お祭り記事ですので、皆様の箸休めの一助にでもなればと思いながら、全力で書きたいと思います。 まず感謝 当記事は、「素人がAWSに手を出し、のんきに過ごして気づいたら、自分のミスで不正利用され$6,000ほどの請求が来ていて」一週間ほど食べ物も喉を通らず、AWS様に泣きついた結果、「なんとか情け容赦を頂いた」という内容です。 本文中には多少ふざけた言葉選びが散見されるかもしれませんが、私は全力で AWSさんに感謝 をしております。 この先、 僕と同じような過ちを犯す可哀想な素人エンジニアを、この世から一人でも無くしたい。 と切に願っております。 最初にお断りしておきますが、 当記事から得られる、プログラミングインテリジェンスは1gくらいです。 一定レベル以
IT業界で横行する恥ずかしい英語発音 - Qiita
プログラマやデザイナと話してるとしょっちゅう変な英語発音に出くわします。 例えばheightを「ヘイト」と発音したり。 そういう時、私は心では「ヘイトじゃないよハイトだよ！」と呟きつつ、口では「そうですね、ではヘイトは80pxにしましょう！」なんて言ってるのであります。 まあ、所詮我々が話しているのは英語ではなく、日本語の中に出てきた英単語をカタカナで発音しているに過ぎないですし、テレビのテロップでmainをメーンと表記する時代ですので正解などは無いと思っています。 ですから、何でもかんでも正しい英語っぽく発音するべきなどとは思っていませんが、やはり「こいつ適当にスペルを日本語読みしてるだけだろ！」ってのが明らかな場合は、聞いているこっちが恥ずかしくなってしまうものです。 というわけで、この業界で横行してる妙な発音をまとめてみました。 間違って発音すると恥ずかしい英語 これらは間違って発音
WebAPIリクエスト仕様書としてcurlコマンドのご提案 - Qiita
WebAPIの仕様を記述する方法はいくつかあると思う。 普通に日本語で記述する JSON Hyper-Schema、WADL、RAML、Swaggerなどを使う 仕様書の代わりにプログラムを書く HTTPメッセージそのものを記述しておく でも、文法にばらつきがあったり、読みにくかったり、ツールのセットアップが面倒だったり、どれもイマイチな所があって、手軽な方法が欲しいと思っていた。 何気なくcurlコマンドのオプションを調べていたら、「もうこれでAPIドキュメント扱いにしちゃえばいいんじゃね？」と思えてきたのでメモしておく。 curlコマンドのおさらい curlコマンドはlibcurlの付属コマンドで、最近のUnix系OSなら大抵最初から入っていると思う。コマンドの詳細はmanを読んでいただければ。 cURL - How To Use （マニュアルページ日本語訳） curlコマンドのオプシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/Dronetube/items/ac02a23eafe7d09f3b57