| Part 1 導入編 なぜ使うかを知る | |
| Chapter 1 フロントエンドエンジニアの歴史 | |
| 1-1 Web の始まりと HTML | |
| 1-2 Web と HTML で何ができるようになったのか | |
| 1-3 ブラウザ戦争と標準化 | |
| 1-4 ブログの流行とインターネットインフラ | |
| 1-5 静的な UI から動的な UI へ | |
| 1-6 「フロントエンドエンジニア」という専門職 | |
| 1-7 Node.js による開発基盤の構築 | |
| 1-8 ECMAScript 規格更新に伴う周辺事情の活性化 |
| const startServer = async () => { | |
| const app = express(); | |
| const server = new ApolloServer({ | |
| typeDefs: gql` | |
| type Task { | |
| id: ID! | |
| priority: Int! | |
| } | |
| type Query { | |
| task: [Task!]! |
| @babel/runtime@7.1.2 | |
| @stardust-ui/react@0.40.7 | |
| @wry/equality@0.1.9 | |
| adal-angular@1.0.17 | |
| apollo-cache-inmemory@1.1.12 | |
| apollo-cache@1.1.7 | |
| apollo-client@2.6.3 | |
| apollo-link@1.2.3 | |
| apollo-utilities@1.0.12 | |
| base64-js@1.3.0 |
| module.exports = class RewriteSourceMapUrlPlugin { | |
| constructor({isServer}) { | |
| this.isServer = isServer; | |
| } | |
| apply(compiler) { | |
| compiler.plugin("emit", (compilation, callback) => { | |
| const { assets } = compilation; | |
| // クライアントのみ sourceMappingURL を書き換える | |
| if (!this.isServer) { | |
| for (const [filename, content] of Object.entries(assets)) { |
| module.exports = { | |
| init() { | |
| // 無 | |
| } | |
| }; |
| module.exports = { | |
| poweredByHeader: false, | |
| }; |
| version: "3.7" | |
| services: | |
| mysql: | |
| container_name: apollo-work-mysql | |
| image: mysql:5.7 | |
| restart: always | |
| ports: | |
| - 3306:3306 | |
| volumes: |
以下、記事の要約と個人的な疑問点などです。 GraphQL: Everything You Need to Know – Weblab Technology – Medium
また記事中に出てくるサンプルについてはより削ぎ落としたもので、依存がほとんどない。 GraphQL はクライアントからすると、クライアントキャッシングやその他課題はあるものの、クエリ言語である以外何者でもなさそうというがよく分かる。
参考： https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb
まだ HOC と TypeScript の良い落としどころが見えてないが、何となく理解しつつある現状。 「TypeScript こわい」から卒業したのと、良記事があったので簡単にまとめておきます。
悪い。 => 型を設定することが難しい。
しかしやっていきたいので、any を使わずに整理していこう。
| const pluck = ( | |
| array: Array<{[key: any]: value: any}>, | |
| props: string[], | |
| pickedKey: string, | |
| ): {[valuePickedByKey: any]: {[prop:any]: any}} => { | |
| return array.reduce((prevOut, item) => { | |
| const valuePickedByKey = item[pickedKey]; | |
| const pickedObj = props.reduce((prevItem, pickProp) => { | |
| return { | |
| ...prevItem, |