Ko
これからReactとFirebaseを使ってノートアプリを実装していきます。 対象としているのはフロントエンドの基本的な勉強をしてきたけどどうやってウェブアプリを作ればいいのかわからないといった方を想定しています。 このチュートリアルではReactで実装していくのでReactの知識があることを前提にしています。 さらにブラウザの開発ツールやターミナルも一通り触れることを前提にしています。 またCSSでのスタイリングの部分には触れません。ロジックの部分にフォーカスするためソース
こんにちはKosukeeeです。 日本のテック界隈のみなさんであれば昨今のグローバルな潮流として米国のシリコンバレーだけでなく中国のテック界隈も気になってきているかと思います。 そこで今回は中国のポストBATと呼ばれてるTMDについて触れてみたいと思います。 BATというのはすでにご存知かと思いますがバイドゥ（Baidu）、アリババ（Alibaba）、テンセント（Tencent）の企業になりますがTMDというのはこれら中国を代表するテックカンパニーに続く企業と言われていま
本格的にフロントエンドの開発をしていくにあたりモジュールバンドラーの役割を理解しておくことは非常に重要です。 近年どんどん複雑になっていくフロントエンドの開発フローにおいて「コードを書く」というのと同じくらい「開発環境の設定をする」ということが重要だからです。 そこでこのノートではモジュールバンドラーがなぜ必要なのかという観点から解説していきたいと思います。 基本的には私が普段使用しているWebpackを念頭に説明していきます。 モジュールバンドラーとは何をするものなのか？
こんにちは、Kosukeeeです。 今回はブラウザについて取り上げてみたいと思います。 フロントエンドの書くコードは全てブラウザ上で表示されます。 ということはブラウザがどのようにしてページを表示しているのかを理解することが非常に重要になってきます。 特にtoCのサービスに関わっているとUXやSEOの観点からページの表示スピードの改善もタスクの一つになるので表示プロセスに関して理解していることが求められます。 JSやCSSは雰囲気でも書けてしまいますが、ブラウザがDOMや
こんにちは、Kosukeeeです。 現在チャットアプリのチュートリアルを準備しているのですが、そこで非同期処理の一連の流れがあったので今回のトピックとして取り上げてみようと思います。 ここでは実際のウェブアプリでの使用例と合わせて解説することでイメージしやすくなるように説明していきたいと思います。 非同期処理の実際の使用例現在作っているチャットアプリではテキスト以外にも画像のファイルデータが送れます。 ここでのフローを詳細に説明すると １：画像を選択して「アップロード」ボ
こんにちは、Kosukeeeです。 今回はHTML/CSS/JSだけを使って音楽アプリ（瞑想アプリ）を作成していきたいと思います。 フロントエンドの開発を始めたばかりの方やJSを使ってウェブアプリを作成してみたいという方に参考になるように分かりやすく説明していきたいと思います。 まず、これからどういったものを作るのかイメージしていただくためにこちらの動画を確認してみてください。 また下記のリンクから実際に動いているものを触ってみることもできます。 Chromeなどのブラ
今回はフロントエンド開発の全体像を図にしてみようと思います。 多くの方がウェブサービスやウェブアプリを開発することを夢見てフロントエンドの勉強を始めると思うのですが、少ししてから現実に愕然とすることがあります。 それはフロントエンドの開発をするために理解しておかないといけないことが恐ろしいほどにたくさんある、ということです。 そして「何を」「どこまで」知っておく必要があるのかわからなくなります。 そこでこのノートではフロントエンドの全体像を図にしてみようと思います。 よく
フロントエンドの方が基本的なプログラミングの勉強をしてきて壁に当たる問題の一つが「静的なウェブサイトは作れるけど動的なウェブアプリをどうやって作ればいいのかわからない」という点だと思います。 HTMLとCSSでレイアウトの実装ができるようになって静的なウェブサイトも作れる。JavaScriptでインタラクションもつけられる。 でもウェブアプリってそもそもどういう仕組みになっていてどうやって実装すればいいのか分からくて躓く瞬間があると思います。 対象読者そこでノートアプリを例
