大規模でスケールするReactアプリケーション開発のための実践的アドバイス
Reactの大きな特徴の1つは、ファイルを自由に構造できることです。自由ゆえ、パッと見て理解できる構造にならないこともあります。そのためStackOverflawや類似サイトでは、どんなファイルの構造にするか数多くの質問が寄せられています。ファイルの構造は主観的で、正しい答えがありません。本記事ではReactアプリを作成するとき、私が考えるツール選び、ファイル構造、コンポーネントの分解方法を解説します。 ビルドツールとエラー回避 アプリのビルドにWebpackを使ったことがあれば、私がWebpackの大ファンというのもうなずけるでしょう。Webpackは複雑なツールですが、バージョン2の優れた機能と新しい公式ドキュメントのおかげでだいぶ理解しやすくなりました。Webpackに触れてコンセプトを理解したら、とてつもないパワーを手にしたことになります。私はReact独自の仕様をしたJSXを含む
約60時間を非常用電源設備で乗り切った石狩データセンターの奇跡
2018年9月6日に北海道を襲った震災により、停電状態に陥ったさくらインターネットの石狩データセンターに対し、9月8日ようやく電力供給が再開された。想定を超えた約60時間を非常用電源設備で乗り切り、インフラ事業者としての矜持を見せた石狩データセンターの「奇跡」について、改めてきちんと説明していきたいと思う。 卓越したオペレーション能力で「想定外」を「想定内」に 2011年11月に開設された石狩データセンターは、数多くのサーバーを収容するさくらインターネットの基幹データセンターになる。開設当時はソーシャルゲームの普及でサーバーの需要がうなぎ登りだったほか、環境に配慮したエコなデータセンターが求められていた。こうしたニーズに対応する石狩データセンターは、寒冷地のメリットを活かした外気冷却と東京ドーム1個分に相当する広大な敷地を用いたスケーラビリティが大きな売りだった。私も開設時と増設時で2回ほ
React初心者が環境構築でつまづかないためのCreate React Appの始め方
初めてReactに挑戦するとまずつまずくのは開発環境の設定です。Facrbookが提供しているCLIツール「Create React App」で簡単に始める方法を解説します。 Reactの新規プロジェクトを始めるには、コードを書いてアプリケーションを形にするだけではなく、ビルドツールでローカル開発環境を整え、ユニットテストをしたあと、最終的にビルドします。思っているほど簡単ではないと感じる方に、簡単なセットアップと最低限の努力で始められる方法を紹介します。 Facebookが提供しているCLIツールCreate React Appを使えば、新規のReactプロジェクトを設定済みの開発者向けwebpackを使って始められます。webpackの設定画面を二度と見なくて済むのです。 Create React Appの使い方 Create React Appはnpmを通してグローバル環境でインスト
WordPressコアコントリビューターに聞く「ぼくのかんがえた最強の開発環境」
WordPressで開発をするなら、いまどきどんなツールを使うのがいい？ WordPress専門のデベロッパーであり、コアコントリビューターでもあるMatt Geriさんがおすすめるする、最高の開発環境とは？ 近年、WordPressによる開発は大きな進展を遂げています。特に、ツールに関しては。以前は、WordPressでサイトを構築しようものなら、ほぼ確実にMAMP/WAMPのローカルホスティングの設定をしなければならず、それはもう悩みの種でしたよね。ひょっとしたら、本番の状態でサイトの開発を進めなければならなかったりしました。 そう、私もその一人でした。 幸い、時代は変わり、いまではそんな頭痛の種や反復作業を取り除くツールが出てきました。 WordPress開発業者としてフルタイムで開発をしていた私は、WordPressから離れて丸3年後の2015年12月、再びフルタイムのWordPr
Googleアナリティクスを無償で使いやすくする「Dot metrix」
オプトインキュベートとイロドリは2月5日、無料で使えるKPI自動レコメンド型サイト分析ツール「Dot metrix」にて、Googleアナリティクスと連携したアクセス解析サービスを提供開始した。併せて、日々の分析指標のサマリーをメールにて通知する「デイリーレポートメールサービス」も無償提供する。 Googleアナリティクスを分析に利用する企業は多いが、分析可能な指標が豊富な一方、見たい指標を確認するために複数の操作やツール利用の知識が必要となり、分析に時間がかかる。そこでDot metrixとGoogleアナリティクスを連携させ、必要な分析指標だけを面倒な操作なく一画面で見られるようにする。 Dot metrixは、サイト分析が実施できていないスタートアップ・ベンチャー、中小企業向けに開発されたサービス。「無料で利用可能」「簡単に導入可能」「シンプルで使いやすい」「サービスに合ったKPIを
たとえアニメといえども、現実と無縁ではいられない (1/5)
(C)2012「おおかみこどもの雨と雪」製作委員会 興行収入42億円を記録した、大ヒットアニメ映画「おおかみこどもの雨と雪」。プロデューサーのひとりである渡邊隆史氏に、ヒットの背景を伺っている。 ヒットを生む種は大きくふたつあった。ひとつは「映画が公共的なものであり、個人的なものでもあるという二面性を意識できたこと」（前編）だった。そしてもうひとつは「アニメがフィクションの枠を超え、現実と関わっているように見えた」ということだ。 つくりものだけど、どこかで現実とつながっている。ただのおとぎ話で終わらせることなく、心にひっかかりを残したことが共感と感動につながった。そのひっかかりは一体どこにあらわれたのか？ 数百万人の心を動かした、ヒット作の「リアル」を読み解く。 アニメプロデューサー 渡邊隆史氏 1959年栃木県生まれ。アニメ専門誌「アニメージュ」(徳間書店)編集長ののち、角川書店に入社。
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
iPhoneのGPSをJavaScriptで操ろう (1/6)
JavaScriptの利用範囲がどんどん広がっています。ライブラリの充実によって、比較的手軽にいろいろなことができるようになり、Webサイト／Webアプリケーションだけでなく、今やモバイルデバイスやデスクトップアプリケーションなどの分野でもJavaScriptが活躍するようになりました。 本連載では、多数のJavaScript関連書やASCII.jpの連載「29分でできる！あのサイトの技を盗め」の執筆でもおなじみの古籏一浩氏が、最新のAjax/JavaScriptライブラリの解説から、今後注目される新しいJavaScriptの活用Tipsまで、“楽しくできて役立つネタ”をお届けします。 初回は「iPhone 3GS」に合わせてリリースされたiPhone OSの新バージョン「iPhone OS 3.0」がテーマです。iPhoneならではのGPS機能をSafariのJavaScriptで活用す
Googleマップ待望の新機能「ルート案内API」の使い方 (1/3)
6月19日、Googleマップ日本語版に「ルート案内API」が追加されました。ルート案内APIを使うと、設定した出発地から目的地までの経路を地図上に簡単に表示できます。 たとえば、企業のWebサイトに最寄駅から自社までの道案内を掲載したり、観光名所を巡るツアーガイドのサイトを作ったりと、さまざまな利用が考えられます。もちろん静的なWebページだけでなく、ユーザーが入力した出発地点から目的のお店までの行き方を検索する、といったWebアプリケーションにも活用できます。 ルート案内APIの基本的な使い方 ルート案内APIの基本的な使い方を手順を追って紹介しましょう。 1. APIを使う準備をする Google Maps APIにはVer 2.xとVer 3がありますが（関連記事）、ルート案内APIはVer 2.xの最新版で使用できます。Ver 2.xの最新版を使うには、HTMLに以下のタグを追加
ASCII.jp：2000年に慶應版「Facebook」立ち上げた文系女子｜ネットに生きる現代の匠“CTO・エンジニア”に聞く
鋭い視点で先を見据えた創造性は“ネットの匠”にふさわしい。そこで「ネットに生きる現代の匠"CTO・エンジニア"に聞く」第3回は、アクセス解析ツールなどを提供する早稲田大学発の技術系ベンチャー企業・ユーザーローカルで企画・開発を担当する閑歳孝子氏に話を伺った。日経BP社で記者と編集者を経験したのち、Web系ベンチャー企業に転職し、2008年から現職に就くという経歴を持つ同氏は、どのような視点でサービスを生み出しているのだろうか。 閑歳氏の7つ道具と生活スタイルに迫る ── 仕事に欠かせない7つ道具を教えてください。 （紹介していただいたのは、iPhoneとAndroid端末のNexus One、国内メーカー製携帯電話、Pocket Wi-Fiに、Mac、森永乳業のマウントレーニア カフェラッテエスプレッソ、そして、砂時計の7つ） 閑歳 メインのケータイはiPhoneで、あとは動作チェックに使
Chromeで使えるエクステンション厳選25本！ (1/6)
ページ分けの多い記事も自動でめくれる、クリック一発で翻訳出来る――。 便利な拡張機能の豊富さで知られる人気ブラウザーといえばFirefoxだ。だが、そこに現在Google Chromeが「エクステンション」と呼ばれる拡張機能で猛追を始めている。グーグルが9日に公開したサイト「Chrome Extensions」にはすでに、500本を超えるエクステンションが登録されている。 エクステンションに対応するChromeは現在、Windows版およびLinux版のみ。いずれも正式版ではなく4.0ベータ版で、体験したい人はそれぞれをインストールすることになる（エクステンションを入れようとするとダウンロードを促されるので、それに従えばオーケー）。Mac版も近いうちに対応予定とのことなので、しばしお待ちを。正式版の4.0リリースは2010年の見通しだ。 リリース間もない現在の問題は、Firefoxのときと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
