プログラミング学習

コンポーネントの繰り返しに使用する「map関数」

しまぶーさんが、「コンポーネントを、mapで繰り返そう」という動画を上げてくれていたので、学習ブログを書いていきます。 この記事では、主な内容のみを書いていきます（動画内では、詳細についても解説されています）。 今回使用した開発環境 http://localhost:3000/ 以前の記事で作成した、ローカル環境を使用しました。 言語は、TypeScriptを設定しましたが、今回の内容では、JavaScriptのみを使用しています。 現状のコード 現状では、カード部分の繰り返し部分で、以下のように、aタグ、h2タグ、pタグを4セットそのまま書いています。 <a href="https://nextjs.org/docs" className={s…

• React
• プログラミング学習

v-on、watch、methods

vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました。 参考書のVue.jsのバージョンは2.5ですが、今回は3系の書き方に変更しました。 今回作成したプログラム 最初は「3秒」と「ボタン」が表示されています。 ボタンを押すとタイマーが動作します。 ボタンを押して2秒たった時の様子 3秒経つとアラートが表示されます。 HTML・JSの記述 HTML・JSの記述で、必要な部分のみ抜粋して書いていきます。 こちらが、HTMLの記述です。 <script src="https://unpkg.com/vue@3/dist…

• Vue.js
• プログラミング学習

コンポーネント、v-for、v-bind

コンポーネント v-for v-bind について書いていきます。 https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-3 コンポーネント my-componentについて考えていきましょう。 HTML my-componentです。 <div id="app"> <my-component v-for="(item, index) in myArray" v-bind:my-name="item" > </my-component> </div> JS MyComponentが定義されています。 var MyComponent = { templ…

• Vue.js
• プログラミング学習

CDNから直接Vueを使用する方法、宣言的レンダリング、リアクティビティー（カウンター）

CDNから直接Vueを使用する方法 宣言的レンダリング リアクティビティー（カウンター） について書いていきます。 サンプルコード index.htmlをブラウザで開くと、サンプルが表示されます。 https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-1 このようなサンプルです。 CDNから直接Vueを使用する方法 以下の記述を行います。 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 公式サイトの該当箇所はこちらです。 https://ja.vuejs.org/guide/quick-s…

• Vue.js
• プログラミング学習

twigの文法

私は普段、EC-CUBEというオープンソースのECシステムで作成されたサイトの改修を行なっています。 EC-CUBEでは、twigというPHPのテンプレートエンジンが使用されています。 拡張子は、.twigです。 そんなtwigの文法について(フロントエンドのみ)書いていきます。 変数定義 シンプルに代入したい場合 例えば、商品の名前をfooという変数に入れたい場合は、下記のようになります。 {% set foo = Product.name %} 配列を代入したい場合 例えば、商品ID123456, 123457, 123458をまとめてfooという変数に入れたい場合は、下記のようになります。 {% set foo = [123456, 12…

• PHP
• プログラミング学習

TypeScriptを学んでいきます

最近、Workshipからの求人メールでTypeScriptの文字をよく見かけるので、学んでみたいと思います。 こちらの書籍を購入しました。 早速、本日学んだことをアウトプットしていきます。 学んだこと 学んだことを書いていきます。 TypeScriptとは TypeScriptは、JavaScriptのスーパーセット(機能を拡張したもの)です。 ECMAscriptとは JavaScriptの仕様を定めているのがECMAscript(エクマスクリプト)です。 tscコマンド tscコマンドはTypeScript Compilerの略で、TypeScriptをJavaScriptに変換するためのコマンドです。例えば、以下のように入力するとhello.t…

• TypeScript
• プログラミング学習

TECH::EXPERT（現TECH CAMP)での70日間のWebアプリケーション開発

2019年の10月ごろ〜2019年末にかけての70日間、 日本最大級のプログラミングスクールであるTECH::EXPERTに通っていました。 通おうと思った理由 時間と人間関係の自由があるフリーランスという働き方に興味があったためです。 ネットでフリーランスについて色々と調べていると、以下のサイトに行き着きました。 https://tech-camp.in/expert/freelance これがきっかけで、youtuberのマコなり社長のことを知り、動画をみるようになりました。 https://www.youtube.com/watch?v=g2AFcjHPO2A&t=276s こちらの動画にも後押しされ、TECH::EXPERTの受講を決意…

• Webアプリ開発
• プログラミング学習